SWFUpload批量上传插件

时间:2022-08-29 18:31:31

SWFUpload是一个批量上传插件,在HTML4.1里面,估计也只有Flash+javascript配合才能够做到了。先复制个重要的网址,这个应该是官方的文档了,相当齐全。

http://leeon.me/upload/other/swfupload.html#uploadStart

这个是格式比较好看的。

http://www.cnblogs.com/2050/archive/2012/08/29/2662932.html

算了,这个文档的内容太多,各种属性各种方法,记不了这么多,直接贴上个实例算了。

前台是视图javascript代码:

 

   <script src="@Url.Content("~/Scripts/Swfupload/swfupload.js")" type="text/javascript"></script>    <script src="@Url.Content("~/Scripts/Swfupload/handlers.js")" charset="utf-8" type="text/javascript"></script>

  <script type="text/javascript">
            var swfu; $(function () { swfu = new SWFUpload({ //Backend Settings upload_url: '@Url.Action("AjaxUploadPic")', //网上说一定要是绝对路径 // post_params: { "name": "value", "name": "value" }, //上传时可提交参数  post_params: { "ASPSESSID": "<%=Session.SessionID %>", }, use_query_string: false, // File Upload Settings file_size_limit: "200 MB", //文件最大值 file_types: "*.*", //文件类型, file_types_description: "JPG Images", file_upload_limit: "10", //Zero means unlimited file_queue_limit: "10", //只允许一个文件 //文件上传事件驱动,冒号后边是函数(方法),方法放到 handlers.js 里面了,方便管理。  file_queue_error_handler: fileQueueError, file_dialog_complete_handler: fileDialogComplete, file_queued_handler: fileQueued, upload_progress_handler: uploadProgress, //文件上传过程中定时触发,可用来显示上传进度 upload_error_handler: uploadError, //上传失败触发 upload_success_handler: uploadSuccess, //上传成功触发 upload_complete_handler: uploadComplete, //上传成功和失败都会触发 upload_start_handler: uploadStart, //上传前触发,一般可用来初始化提交参数 //FlashButton settings button_image_url: '@Url.Content("~/Scripts/Swfupload/images/112.jpg")', //flash按钮背景,注意自己的路径。 button_placeholder_id: "spanButtonPlaceholder", //页面存放按钮的容器 button_width: 200, button_height: 51, button_text: '<span class="buttonCss"></span>', //按钮文本 button_text_style: ".button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }", //按钮文本样式 button_text_top_padding: 1, button_text_left_padding: 5, button_cursor: SWFUpload.CURSOR.HAND, button_action: SWFUpload.BUTTON_ACTION.SELECT_FILES, //多文件上传 单文件上传设置,详细见中文说明,页面有连接 //Flash Settings flash_url: '@Url.Content("~/Scripts/Swfupload/swfupload.swf")', custom_settings: { upload_target: "divFileProgressContainer" }, //Debug Settings debug: false }); }); </script>
 

handle处理javascript代码:

 
var fileCount; function fileQueueError(file, errorCode, message) { //alert(file.name + message); try { var imageName = "error.gif"; var errorName = ""; if (errorCode === SWFUpload.errorCode_QUEUE_LIMIT_EXCEEDED) { errorName = "You have attempted to queue too many files."; } if (errorName !== "") { alert(errorName); return; } switch (errorCode) { case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE: imageName = "zerobyte.gif"; break; case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: imageName = "toobig.gif"; break; case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE: case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE: default: alert(message); break; } addImage("images/" + imageName); } catch (ex) { this.debug(ex); } } function fileQueued(file) { try { var progress = new FileProgress(file, this.customSettings.upload_target); progress.setProgress(0); progress.toggleCancel(true, this); } catch (ex) { this.debug(ex); } } function uploadStart(file) { this.addPostParam("bank", $(".in").val()); } function fileDialogComplete(numFilesSelected, numFilesQueued) { try { if (numFilesQueued > 0) { fileCount = numFilesQueued; if ($("#itemId").val() == "") { alert("Please save the basic information First!"); } else { this.addPostParam("itemId", $("#itemId").val()); this.startUpload(); //选择完成直接上传  } } } catch (ex) { this.debug(ex); } } function uploadProgress(file, bytesLoaded) { try { var percent = Math.ceil((bytesLoaded / file.size) * 100); var progress = new FileProgress(file, this.customSettings.upload_target); progress.setProgress(percent); if (percent === 100) { progress.toggleCancel(false, this); } else { progress.toggleCancel(true, this); } } catch (ex) { this.debug(ex); } } var imagesCount = -1; function uploadSuccess(file, serverData) { imagesCount++; try { var image = strToJson(serverData); if (image.success == "0") { alert(image.name); } else { $(".album_list li").eq(imagesCount).find("img").attr("src", image.name); } var progress = new FileProgress(file, this.customSettings.upload_target); progress.toggleCancel(false); } catch (ex) { this.debug(ex); } //alert(serverData); } var iCount = 0; function itemUpdateuploadSuccess(file, serverData) { iCount++; var image = strToJson(serverData); if (image.success == "0") { alert(image.name); } else { var dom = $("<li><img src='" + image.name + "' alt='' /></li>"); $(".album_list").append(dom); } if (iCount == fileCount) { alert("upload success!") } var progress = new FileProgress(file, this.customSettings.upload_target); progress.toggleCancel(false); } function strToJson(str) { var json = (new Function("return " + str))(); return json; } function uploadComplete(file) { try { var progress = new FileProgress(file, this.customSettings.upload_target); progress.setComplete(); if (this.getStats().files_queued > 0) { this.startUpload(); } else { progress.toggleCancel(false); } } catch (ex) { this.debug(ex); } } function uploadError(file, errorCode, message) { var imageName = "error.gif"; var progress; try { switch (errorCode) { case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED: try { progress = new FileProgress(file, this.customSettings.upload_target); progress.setCancelled(); progress.toggleCancel(false); } catch (ex1) { this.debug(ex1); } break; case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED: try { progress = new FileProgress(file, this.customSettings.upload_target); progress.setCancelled(); progress.toggleCancel(true); } catch (ex2) { this.debug(ex2); } case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED: imageName = "uploadlimit.gif"; break; default: alert(message); break; } addImage("images/" + imageName); } catch (ex3) { this.debug(ex3); } } function addImage(src) { var newImg = document.createElement("img"); newImg.style.margin = "5px"; document.getElementById("thumbnails").appendChild(newImg); if (newImg.filters) {