无刷新上传文件

昵称10504424 2013-11-01

展开全文

这几天做了一个项目，有一个需求是用户晒单，其中就包图片上传，就想到我们以前老师讲的，算是复习了下，

作为菜鸟，虽然很多原理不知道，目标是先学会用，在慢慢的深刻理解,这里完全是采用无刷新的，给用户体验度很

这里我们是采用 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./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;" />
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");
            }
        }