swfupload无刷新上传

最近在写项目时第一次接触swfupload上传控件，此控件上传方便 ，支持无刷新上传，并且支持多文件上传。

现在我还只用到过单文件上传，我先贴上单文件上传的，多文件上传后面再更新。

使用swfupload控件时需要引入几个文件，此包可以直接上swfupload官网上下载 http://code.google.com/p/swfupload/

<script type="text/javascript" src="./static/cmsAdminStatic/js/coin-slider.min.js"></script>
<script type="text/javascript" src="./static/cmsAdminStatic/SWFUpload/swfupload.js"></script>
<script type="text/javascript" src="./static/cmsAdminStatic/SWFUpload/swfupload.queue.js"></script>
<script type="text/javascript" src="./static/cmsAdminStatic/SWFUpload/fileprogress.js"></script>
<script type="text/javascript" src="./static/cmsAdminStatic/SWFUpload/handlers.js"></script>

初始化后相当于就是在span id="uploadbtn1" 处显示上传按钮

html:

?? </span><span id="uploadbtn1"></span>
??????????????????????????????? (1 MB max)

js:

var swfu; window.onload = function () { ??? swfu = new SWFUpload({ ??????? // Backend settings ??????? upload_url: "/uploadSlidesFile",??????? //file_post_name: "file",???????? post_params: {Filename : $("#filename").val()},??????? // Flash file settings ??????? file_size_limit : "1MB",??????? file_types : "*.jpg;*.jpeg;*.png;",//文件类型?? ??? ??? ?// or you could use something like: "*.doc;*.wpd;*.pdf",??????? file_types_description : "All Files",??????? file_upload_limit : "10",??????? file_queue_limit : "10",/* ??????? // Event handler settings ??????? swfupload_loaded_handler : swfUploadLoaded,??????? file_dialog_start_handler: fileDialogStart,??????? file_queued_handler : fileQueued,??????? file_queue_error_handler : fileQueueError,??????? file_dialog_complete_handler : fileDialogComplete,??????? //upload_start_handler : uploadStart,?? ?// I could do some client/JavaScript validation here,but I don't need to. ??????? upload_progress_handler : uploadProgress,??????? upload_error_handler : uploadError,??????? upload_success_handler : uploadSuccess,??????? upload_complete_handler : uploadComplete,*/ ??????? file_dialog_start_handler : function(){},??????? file_queued_handler : function(file){ ?????????? // alert(file.name); ????????? //? $("#filename").val(file.name); ??????? },??????? file_queue_error_handler : function (file,errorCode,message) { ??????????? if(errorCode==SWFUpload.QUEUE_ERROR.INVALID_FILETYPE){ ??????????????? alert("上传文件格式不符!"); ??????????? } ??????????? if (errorCode==SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT){ ??????????????? alert("文件过大！"); ??????????? }else{ ??????????????? alert("上传出错，请检查要上传的文件是否正确"); ??????????? } ??????? },??????? file_dialog_complete_handler : function(numFilesSelected,numFilesQueued){ ??????????? this.startUpload(); ??????? },??????? upload_start_handler : function(){},??????? upload_progress_handler : function(){},??????? upload_error_handler : function(file,code,message){ ?? ??? ??? ?alert("error:" + code + ";" + message); ?? ??? ?},??????? upload_complete_handler : function(data){ ????? ??? ??? ?//alert("upload complete:" + data); ??????? },??????? upload_success_handler : function(file,serverData,response) { ?????????? // alert(serverData); ??????????? try { ??????????????? //console.log(serverData); ??????????????? //"{"code":"","data":{"path":"/appReleaseFile/c7d2cb6c3b7c49fbb1e3796162101df2.zip","dir":"/appReleaseFile/","fileId":"3b42c8ab710a4aad90f07787f81094bc"},"exception":"","message":"上传文件成功","result":1,"success":true}" ??????????????? //服务端返回json外面有"",需要通过eval解析 ??????????????? var data = eval("("+serverData+")"); ?????????????? // alert(data.data.path); ??????????????? if('true'==data.success || true==data.success){ ??????????????????? alert('上传文件成功!'); ??????????????????? $("#slidePicUrl").val(data.data.path); ??????????????????? $("#uploadFileName").html(data.data.name); ?????????????????? // $('#slidesImg').attr('src',data.data.path); ??????????????????? //$('.edit-app-thumb').prepend('<img id="slidesImg" class="app-thumb" alt="slidesImg" src="'+data.data.path+'" />'); ????????????????? //? $('#picId').val(data.data.id); ??????????????? }else{ ??????????????????? alert('上传文件失败!'); ??????????????? } ??????????? } catch (ex) { ??????????????? this.debug(ex); ??????????? } ??????? },??????? // Button Settings ??????? button_image_url : "./static/cmsAdminStatic/SWFUpload/XPButtonUploadText_61x22.png",???? //上传图标 ??????? button_placeholder_id : "uploadbtn1",??????? button_width: 61,??????? button_height: 22,??????? //button_text: '请选择上传文件',??????? button_text:'',??????? // Flash Settings ??????? flash_url : "./static/cmsAdminStatic/SWFUpload/swfupload.swf",??????? custom_settings : { ??????????? progress_target : "fsUploadProgress",??????????? upload_successful : false ??????? },??????? // Debug settings ??????? debug: false??? //debug? 测试 ??? }); };