无刷新上传文件
这几天做了一个项目,有一个需求是用户晒单,其中就包图片上传,就想到我们以前老师讲的,算是复习了下,
作为菜鸟,虽然很多原理不知道,目标是先学会用,在 慢慢的深刻理解,这里完全是采用无刷新的,给用户体验度很
这里我们是采用 flash 组件来上传文件格式有很多(".xls", ".doc", ".JPG", ".GIF", ".jpg", ".gif", ".png", ".PNG", ".bmp", ".BMP", ".JPEG", "jpeg", ".psd", ".PSD" ) 这里我就把代码贴处来!
这里是前台的html代码
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpLoadFiles.aspx.cs" Inherits="UploadFiles.UpLoadFiles" %>
2
3 <!DOCTYPE html>
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
8 <title></title>
9 <script src="Script/jquery-1.6.2.min.js"></script>
10 <script src="swf/swfupload.js"></script>
11 <script src="swf/handlers.js"></script>
12 <script type="text/javascript">
13 $(function () {
14 var swfu = new SWFUpload({
15 //Backend Settings
16 upload_url: "ServerUploadFiles.ashx",//上传图片服务器的路径
17 post_params: {
18 "ASPSESSID": "<%=Session.SessionID %>"
19 },
20
21 //File Upload Settings
22 file_size_limit: "2 MB", //图片大小
23 file_types: "*.JPG;.jpg;.gig", //上传图片的格式多用逗号分隔
24 file_types_description: "JPG Images",
25 file_upload_limit: 0, // Zero means unlimited
26
27 //Event Handler Settings - these functions as defined in Handlers.js
28 //The handlers are not part of SWFUpload but are part of my website and control how
29 //my website reacts to the SWFUpload events.
30 swfupload_preload_handler: preLoad,
31 swfupload_load_failed_handler: loadFailed,
32 file_queue_error_handler: fileQueueError,
33 file_dialog_complete_handler: fileDialogComplete,
34 upload_progress_handler: uploadProgress,
35 upload_error_handler: uploadError,
36 upload_success_handler: showImg, //上传成功调用的方法
37 upload_complete_handler: uploadComplete,
38
39 //Button settings
40 button_image_url: "swf/images/XPButtonNoText_160x22.png",
41 button_placeholder_id: "spanButtonPlaceholder",
42 button_width: 160,
43 button_height: 22,
44 button_text: '<span class="button">选择头像上传(小于4MB)</span></span>',
45 button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
46 button_text_top_padding: 1,
47 button_text_left_padding: 5,
48
49 //Flash Settings
50 flash_url: "swf/swfupload.swf", // Relative to this file
51 flash9_url: "swf/swfupload_fp9.swf", // Relative to this file
52
53 custom_settings: {
54 upload_target: "divFileProgressContainer"
55 },
56
57 //Debug Settings
58 debug: false
59 });
60
61 });
62 function showImg(file, serverData) {
63 var data = serverData.split(":");
64 if (data[0] == "ok") {
65 document.getElementById("imgOk").src = data[1];
66 }
67 }
68 </script>
69 </head>
70 <body>
71 <div id="content">
72 <div id="swfu_container" style="margin: 0px 10px;">
73 <div>
74 <span id="spanButtonPlaceholder"></span>
75 </div>
76 <div id="thumbnails">
77 </div>
78 </div>
79 </div>
80 <img id="imgOk" src="" style="width: 100px; height: 100px;" /><!--这里是图片上传成功之后把图片显示在html页面上--->
81 </body>
82 </html>
2
3 <!DOCTYPE html>
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
8 <title></title>
9 <script src="Script/jquery-1.6.2.min.js"></script>
10 <script src="swf/swfupload.js"></script>
11 <script src="swf/handlers.js"></script>
12 <script type="text/javascript">
13 $(function () {
14 var swfu = new SWFUpload({
15 //Backend Settings
16 upload_url: "ServerUploadFiles.ashx",//上传图片服务器的路径
17 post_params: {
18 "ASPSESSID": "<%=Session.SessionID %>"
19 },
20
21 //File Upload Settings
22 file_size_limit: "2 MB", //图片大小
23 file_types: "*.JPG;.jpg;.gig", //上传图片的格式多用逗号分隔
24 file_types_description: "JPG Images",
25 file_upload_limit: 0, // Zero means unlimited
26
27 //Event Handler Settings - these functions as defined in Handlers.js
28 //The handlers are not part of SWFUpload but are part of my website and control how
29 //my website reacts to the SWFUpload events.
30 swfupload_preload_handler: preLoad,
31 swfupload_load_failed_handler: loadFailed,
32 file_queue_error_handler: fileQueueError,
33 file_dialog_complete_handler: fileDialogComplete,
34 upload_progress_handler: uploadProgress,
35 upload_error_handler: uploadError,
36 upload_success_handler: showImg, //上传成功调用的方法
37 upload_complete_handler: uploadComplete,
38
39 //Button settings
40 button_image_url: "swf/images/XPButtonNoText_160x22.png",
41 button_placeholder_id: "spanButtonPlaceholder",
42 button_width: 160,
43 button_height: 22,
44 button_text: '<span class="button">选择头像上传(小于4MB)</span></span>',
45 button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
46 button_text_top_padding: 1,
47 button_text_left_padding: 5,
48
49 //Flash Settings
50 flash_url: "swf/swfupload.swf", // Relative to this file
51 flash9_url: "swf/swfupload_fp9.swf", // Relative to this file
52
53 custom_settings: {
54 upload_target: "divFileProgressContainer"
55 },
56
57 //Debug Settings
58 debug: false
59 });
60
61 });
62 function showImg(file, serverData) {
63 var data = serverData.split(":");
64 if (data[0] == "ok") {
65 document.getElementById("imgOk").src = data[1];
66 }
67 }
68 </script>
69 </head>
70 <body>
71 <div id="content">
72 <div id="swfu_container" style="margin: 0px 10px;">
73 <div>
74 <span id="spanButtonPlaceholder"></span>
75 </div>
76 <div id="thumbnails">
77 </div>
78 </div>
79 </div>
80 <img id="imgOk" src="" style="width: 100px; height: 100px;" /><!--这里是图片上传成功之后把图片显示在html页面上--->
81 </body>
82 </html>
后台的处理逻辑
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
HttpPostedFile fileData = context.Request.Files["FileData"];//接收上传文件的数据
string fileName = Path.GetFileName(fileData.FileName);//获取上传的文件名
string fileExtion = Path.GetExtension(fileName);//获取上传文件的格式
//判断上传文件的格式是否是合法的 由于上传的格式比较多,这里我们定义一个字符串数组
string[] arrayFileExtion = { ".xls", ".doc", ".JPG", ".GIF", ".jpg", ".gif", ".png", ".PNG", ".bmp", ".BMP", ".JPEG", "jpeg", ".psd", ".PSD" };
bool isRun = false;
for (int i = 0; i < arrayFileExtion.Length; i++)
{
if (fileExtion == arrayFileExtion[i])
{
isRun = true;
break;
}
}
if (isRun == false)
{
context.Response.Write("type:error");
return;
}
try
{
string saveDir = "/UploadFiles";
//为了使用户不能同一张上传多次,这里采用MD5来计算文件值
string fullDir = saveDir + "/" + Tool.Tool.GetStreamMD5(fileData.InputStream) + fileExtion;//构建文件存储的服务器路径
Directory.CreateDirectory(Path.GetDirectoryName(context.Server.MapPath(saveDir)));
fileData.SaveAs(context.Server.MapPath(fullDir));
context.Response.Write("ok:" + fullDir);//上传成功之后,返回图片的路径
}
catch (Exception)
{
//失败
context.Response.Write("no:" + "no");
}
}
{
context.Response.ContentType = "text/plain";
HttpPostedFile fileData = context.Request.Files["FileData"];//接收上传文件的数据
string fileName = Path.GetFileName(fileData.FileName);//获取上传的文件名
string fileExtion = Path.GetExtension(fileName);//获取上传文件的格式
//判断上传文件的格式是否是合法的 由于上传的格式比较多,这里我们定义一个字符串数组
string[] arrayFileExtion = { ".xls", ".doc", ".JPG", ".GIF", ".jpg", ".gif", ".png", ".PNG", ".bmp", ".BMP", ".JPEG", "jpeg", ".psd", ".PSD" };
bool isRun = false;
for (int i = 0; i < arrayFileExtion.Length; i++)
{
if (fileExtion == arrayFileExtion[i])
{
isRun = true;
break;
}
}
if (isRun == false)
{
context.Response.Write("type:error");
return;
}
try
{
string saveDir = "/UploadFiles";
//为了使用户不能同一张上传多次,这里采用MD5来计算文件值
string fullDir = saveDir + "/" + Tool.Tool.GetStreamMD5(fileData.InputStream) + fileExtion;//构建文件存储的服务器路径
Directory.CreateDirectory(Path.GetDirectoryName(context.Server.MapPath(saveDir)));
fileData.SaveAs(context.Server.MapPath(fullDir));
context.Response.Write("ok:" + fullDir);//上传成功之后,返回图片的路径
}
catch (Exception)
{
//失败
context.Response.Write("no:" + "no");
}
}