码迷,mamicode.com
首页 > Web开发 > 详细

asp.net多文件上传

时间:2015-09-14 11:56:19      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:

用的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 

 

asp.net多文件上传

标签:

原文地址:http://www.cnblogs.com/lanleiming/p/4806656.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!