前段时间做文件上传用的是H5的一个插件,由于浏览器的兼容性不好,所以又换了一个Flash版本的上传文件插件,感觉这个上传插件的使用方式跟H5的差不多,有些雷同。不过,由于后续浏览不再支持Flash(略囧),所以,暂时还没有找到能够完美兼容浏览器的上传文件插件。各位网友如果有好的插件,请推荐下。
View代码:
1 <html> 2 <head> 3 <meta name="viewport" content="width=device-width" /> 4 <title>Index</title> 5 <script src="~/Scripts/jquery-1.10.2.min.js"></script> 6 <script src="~/Content/swfupload/swfupload.js"></script> 7 <script src="~/Content/swfupload/handlers.js"></script> 8 <script type="text/javascript"> 9 var swfu; 10 window.onload = function () { 11 swfu = new SWFUpload({ 12 // Backend Settings 13 upload_url: "/UploadFile/UploadFile", 14 post_params : { 15 }, 16 17 // File Upload Settings 18 file_size_limit : "2 MB", 19 file_types : "*.jpg;*.bmp;*.jpg;*.jpeg;*.png;*.gif", 20 file_types_description : "JPG Images;bmp Images;jpg Images;jpeg Images;png Images;gif Images", 21 file_upload_limit : 0, // Zero means unlimited 22 23 // Event Handler Settings - these functions as defined in Handlers.js 24 // The handlers are not part of SWFUpload but are part of my website and control how 25 // my website reacts to the SWFUpload events. 26 swfupload_preload_handler : preLoad, 27 swfupload_load_failed_handler : loadFailed, 28 file_queue_error_handler : fileQueueError, 29 file_dialog_complete_handler : fileDialogComplete, 30 upload_progress_handler : uploadProgress, 31 upload_error_handler : uploadError, 32 upload_success_handler : uploadSuccess, 33 upload_complete_handler : uploadComplete, 34 35 // Button settings 36 button_image_url: "/Content/swfupload/images/XPButtonNoText_160x22.png", 37 button_placeholder_id : "spanButtonPlaceholder", 38 button_ 160, 39 button_height: 22, 40 button_text : '<span class="button">上传文件<span class="buttonSmall">(2 MB Max)</span></span>', 41 button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }', 42 button_text_top_padding: 1, 43 button_text_left_padding: 5, 44 45 // Flash Settings 46 flash_url : "/Content/swfupload/swfupload.swf", // Relative to this file 47 flash9_url: "/Content/swfupload/swfupload_FP9.swf", // Relative to this file 48 49 custom_settings : { 50 upload_target : "divFileProgressContainer" 51 }, 52 53 // Debug Settings 54 debug: false 55 }); 56 57 //文件上传成功后,给用户提示信息 58 function uploadSuccess(file, serverData) { 59 var result = serverData.split('|'); 60 if (result[0] == 'ok') { 61 alert(result[1]); 62 } 63 } 64 } 65 66 67 </script> 68 </head> 69 <body> 70 <div id="content"> 71 <div id="swfu_container" style="margin: 0px 10px;"> 72 <div> 73 <span id="spanButtonPlaceholder"></span> 74 </div> 75 <div id="divFileProgressContainer" style="height: 75px;"></div> 76 <div id="thumbnails"></div> 77 </div> 78 </div> 79 </body> 80 </html>
Controller代码:
1 private string uploadPath = ConfigurationManager.AppSettings["UploadFile"];//文件上传路径 2 private string fileFormat = ConfigurationManager.AppSettings["FileFormat"];//允许上传的文件格式 3 4 /// <summary> 5 /// 保存上传文件 6 /// </summary 7 /// <returns></returns> 8 public ActionResult UploadFile() 9 { 10 HttpPostedFileBase fileData = Request.Files["Filedata"]; 11 string fileExt = Path.GetExtension(fileData.FileName); 12 13 string[] formatArray = fileFormat.Split('|'); 14 if (!formatArray.Contains(fileExt)) //前端有格式的限制,但我觉得安全起见,后端还是验证下好点 15 { 16 return Content("no|上传文件格式不正确"); 17 } 18 string saveDirectory = uploadPath + "/UploadFile/";//保存上传文件的文件夹 19 if (!Directory.Exists(saveDirectory)) 20 { 21 Directory.CreateDirectory(saveDirectory); 22 } 23 24 string fileName = Guid.NewGuid().ToString() + fileExt; 25 string savePath = saveDirectory + fileName; 26 fileData.SaveAs(savePath);//上传文件保存 27 28 return Content("ok|文件上传成功"); 29 }
webconfig中的配置
1 <add key="UploadFile" value="E:/swfUploadFileStorage/"/> 2 <add key="FileFormat" value=".bmp|.jpg|.jpeg|.png|.gif"/>