用的falsh插件swfupload
1、html页面中添加引用:
1 <script src="/Scripts/uploadFile/callbacks.js" type="text/javascript"></script> 2 <script src="/Scripts/uploadFile/fileprogress.js" type="text/javascript"></script> 3 <script src="/Scripts/uploadFile/swfupload.js" type="text/javascript"></script> 4 <script src="/Scripts/uploadFile/swfupload.queue.js" type="text/javascript"></script>
2、添加JS配置
需要更改的参数:upload_url(后台接收文件的地址)、flash_url(flash文件在服务器中的地址)、flash9_url、button_image_url(选择文件按钮的背景图片)
1 <script type="text/javascript"> 2 $(function () { 3 var swfupload = null; 4 var settings = { 5 upload_url: ‘/ashx/uploadFile/AddFile.ashx‘, //附件上传服务器地址 6 file_post_name: ‘file‘, //向后台提交的表单名 7 flash_url: "/Scripts/uploadFile/swfupload.swf", 8 flash9_url: "/Scripts/uploadFile/swfupload_fp9.swf", 9 post_params: { "PHPSESSID": "<?php echo session_id(); ?>" }, //解决session丢失问题 10 file_size_limit: "50 MB", //文件大小限制,此处仅是前端flash选择时候的限制,具体还需要和后端结合判断 11 file_types: "*.xls;*.xlsx", //允许的扩展名,多个扩展名之间用分号隔开,支持*通配符 12 file_types_description: "Excel", //扩展名描述 13 file_upload_limit: 0, //单次可同时上传的文件数目 14 file_queue_limit: 0, //队列中可同时上传的文件数目 15 custom_settings: { //自定义设置,用户可在此向服务器传递自定义变量 16 startUploadId: "btn_addFile" 17 }, 18 debug: false, 19 20 // 按钮设置 21 button_image_url: "/Images/btn_swfupload.png", 22 button_width: "150", 23 button_height: "30", 24 button_placeholder_id: "spanButtonPlaceHolder", 25 button_text: ‘<span class="theFont" style="border:1px #ccc solid">请选择文件...</span>‘, 26 button_text_style: ".theFont { font-size:15px;background-color:white;}", 27 button_text_left_padding: 2, 28 button_text_top_padding: 5, 29 30 // 所有回调函数 in handlers.js 31 swfupload_preload_handler: preLoad, 32 swfupload_load_failed_handler: loadFailed, 33 file_queued_handler: fileQueued, 34 file_queue_error_handler: fileQueueError, 35 file_dialog_start_handler: function () { 36 this.cancelUpload(); 37 }, 38 //选择文件完成回调 39 file_dialog_complete_handler: function (numFilesSelected, numFilesQueued) { 40 var me = this; //此处的this是swfupload对象 41 if (numFilesQueued > 0) { 42 var start = document.getElementById(this.customSettings.startUploadId); 43 //start.style.display = ""; 44 start.onclick = function () { 45 me.startUpload(); 46 } 47 } 48 }, 49 upload_start_handler: function () { 50 var ddlSeller = $(‘#ddlSeller‘).val(); 51 this.setPostParams({ 52 ‘type‘: ddlSeller 53 }); 54 }, 55 upload_progress_handler: uploadProgress, 56 upload_error_handler: uploadError, 57 upload_success_handler: function (file, serverData) { 58 //上传成功后的回调方法73 }, 74 //上传完成回调 75 upload_complete_handler: uploadComplete, 76 //队列完成回调 77 queue_complete_handler: function (numFilesUploaded) { 78 } 79 } 80 swfupload = new SWFUpload(settings); 81 }); 88 89 90 </script>
3、html中必须的元素有:
<span id="spanButtonPlaceHolder"></span> 这个是显示‘选择文件’按钮
<label id="label_file_Name" ></label> 这个是选择文件后,用来显示 选择的文件名
<input type="button" class="btn btn-primary btn-large" style="" value="导入" id="btn_test"/> 这个是用来做一些校验性判断
<input type="button" class="btn btn-primary btn-large" style="display:none;" value="导入" id="btn_addFile"/> 这个是真正触发上传文件的按钮,会向服务器post
4、需要用到的事件方法
1)选择文件后的方法:file_dialog_complete_handler 不用修改;
2)上传文件成功后的方法: upload_success_handler 根据自己的业务需要,进行更改
5、其他的一些JS校验性判断
1 $(function () { 2 $(‘#btn_test‘).click(function () { 3 var label_file_Name = $(‘#label_file_Name‘).html(); 4 if (label_file_Name.length < 1) { 5 alert(‘请选择文件!‘); 6 return false; 7 } 8 if (confirm("确认上传?")) { 9 $(‘#btn_addFile‘).click(); 10 $(‘#btn_test‘).hide(); 11 } 12 13 }); 14 15 16 17 });
插件下载地址:http://pan.baidu.com/s/1gdhgUyf
时间: 2024-10-11 10:46:07