ajaxfileupload 上传插件

  1 jQuery.extend({
  2     handleError: function (s, xhr, status, e) {   
  3         // If a local callback was specified, fire it  
  4         if (s.error) {
  5             s.error.call(s.context || s, xhr, status, e);
  6         }
  7 
  8         // Fire the global callback  
  9         if (s.global) {
 10             (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
 11         }
 12     },
 13     createUploadIframe: function (id, uri) {
 14         //create frame
 15         var frameId = ‘jUploadFrame‘ + id;
 16         var io;
 17         var io = ‘<iframe id="‘ + frameId + ‘" name="‘ + frameId + ‘" style="position:absolute; top:-9999px; left:-9999px"‘;
 18         if (window.ActiveXObject) {
 19             if (typeof uri == ‘boolean‘) {
 20                 io += ‘ src="‘ + ‘javascript:false‘ + ‘"‘;
 21             }
 22             else if (typeof uri == ‘string‘) {
 23                 io += ‘ src="‘ + uri + ‘"‘;
 24             }
 25         }
 26         io += ‘ />‘;
 27         $(document.body).append($(io));
 28 
 29         return jQuery("#" + frameId).get(0);
 30     },
 31     createUploadForm: function (id, fileElementId, data) {
 32         //create form    
 33         var formId = ‘jUploadForm‘ + id;
 34         var fileId = ‘jUploadFile‘ + id;
 35         var form = jQuery(‘<form  action="" method="POST" name="‘ + formId + ‘" id="‘ + formId + ‘" enctype="multipart/form-data"></form>‘);
 36         if (data) {
 37             for (var i in data) {
 38                 jQuery(‘<input type="hidden" name="‘ + i + ‘" value="‘ + data[i] + ‘" />‘).appendTo(form);
 39             }
 40         }
 41         var oldElement = jQuery(‘#‘ + fileElementId);
 42         var newElement = jQuery(oldElement).clone();
 43         jQuery(oldElement).attr(‘id‘, fileId);
 44         jQuery(oldElement).before(newElement);
 45         jQuery(oldElement).appendTo(form);
 46 
 47 
 48 
 49         //set attributes
 50         jQuery(form).css(‘position‘, ‘absolute‘);
 51         jQuery(form).css(‘top‘, ‘-1200px‘);
 52         jQuery(form).css(‘left‘, ‘-1200px‘);
 53         jQuery(form).appendTo(‘body‘);
 54         return form;
 55     },
 56 
 57     ajaxFileUpload: function (s) {
 58         // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout        
 59         s = jQuery.extend({}, jQuery.ajaxSettings, s);
 60         var id = new Date().getTime()
 61         var form = jQuery.createUploadForm(id, s.fileElementId, (typeof (s.data) == ‘undefined‘ ? false : s.data));
 62         var io = jQuery.createUploadIframe(id, s.secureuri);
 63         var frameId = ‘jUploadFrame‘ + id;
 64         var formId = ‘jUploadForm‘ + id;
 65         // Watch for a new set of requests
 66         if (s.global && !jQuery.active++) {
 67             jQuery.event.trigger("ajaxStart");
 68         }
 69         var requestDone = false;
 70         // Create the request object
 71         var xml = {}
 72         if (s.global)
 73             jQuery.event.trigger("ajaxSend", [xml, s]);
 74         // Wait for a response to come back
 75         var uploadCallback = function (isTimeout) {
 76             var io = document.getElementById(frameId);
 77             try {
 78                 if (io.contentWindow) {
 79                     xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;
 80                     xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document;
 81 
 82                 } else if (io.contentDocument) {
 83                     xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;
 84                     xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document;
 85                 }
 86             } catch (e) {
 87                 debugger;
 88                 jQuery.handleError(s, xml, null, e);
 89             }
 90             if (xml || isTimeout == "timeout") {
 91                 requestDone = true;
 92                 var status;
 93                 try {
 94                     status = isTimeout != "timeout" ? "success" : "error";
 95                     // Make sure that the request was successful or notmodified
 96                     if (status != "error") {
 97                         // process the data (runs the xml through httpData regardless of callback)
 98                         var data = jQuery.uploadHttpData(xml, s.dataType);
 99                         // If a local callback was specified, fire it and pass it the data
100                         if (s.success)
101                             s.success(data, status);
102 
103                         // Fire the global callback
104                         if (s.global)
105                             jQuery.event.trigger("ajaxSuccess", [xml, s]);
106                     } else
107                         jQuery.handleError(s, xml, status);
108                 } catch (e) {
109                     status = "error";
110                     jQuery.handleError(s, xml, status, e);
111                 }
112 
113                 // The request was completed
114                 if (s.global)
115                     jQuery.event.trigger("ajaxComplete", [xml, s]);
116 
117                 // Handle the global AJAX counter
118                 if (s.global && ! --jQuery.active)
119                     jQuery.event.trigger("ajaxStop");
120 
121                 // Process result
122                 if (s.complete)
123                     s.complete(xml, status);
124 
125                 jQuery(io).unbind()
126 
127                 setTimeout(function () {
128                     try {
129                         jQuery(io).remove();
130                         jQuery(form).remove();
131 
132                     } catch (e) {
133                         jQuery.handleError(s, xml, null, e);
134                     }
135 
136                 }, 100)
137 
138                 xml = null
139 
140             }
141         }
142         // Timeout checker
143         if (s.timeout > 0) {
144             setTimeout(function () {
145                 // Check to see if the request is still happening
146                 if (!requestDone) uploadCallback("timeout");
147             }, s.timeout);
148         }
149         try {
150 
151             var form = jQuery(‘#‘ + formId);
152             jQuery(form).attr(‘action‘, s.url);
153             jQuery(form).attr(‘method‘, ‘POST‘);
154             jQuery(form).attr(‘target‘, frameId);
155             if (form.encoding) {
156                 jQuery(form).attr(‘encoding‘, ‘multipart/form-data‘);
157             }
158             else {
159                 jQuery(form).attr(‘enctype‘, ‘multipart/form-data‘);
160             }
161             jQuery(form).submit();
162 
163         } catch (e) {
164             jQuery.handleError(s, xml, null, e);
165         }
166 
167         jQuery(‘#‘ + frameId).load(uploadCallback);
168         return { abort: function () { } };
169 
170     },
171 
172     uploadHttpData: function (r, type) {
173         var data = !type;
174         data = type == "xml" || data ? r.responseXML : r.responseText;
175         // If the type is "script", eval it in global context
176         if (type == "script")
177             jQuery.globalEval(data);
178         // Get the JavaScript object, if JSON is used.
179         if (type == "json")
180             eval("data = " + data);
181         // evaluate scripts within html
182         if (type == "html")
183             jQuery("<div>").html(data).evalScripts();
184 
185         return data;
186     }
187 })

1  <input type="text" id="txt_file" name="txt_file" class="inputstyle" readonly style="width: 70%" />
2                                     <input type="button" id="btn_upload" name="btn_upload" class="btn_upload" value="选择文件" />
3                                     <input type="file" id="file_Excel" name="file_Excel" class="filestyle" style="width: 90%; display: none;" onchange="ajaxFileUpload();" />

 1 $(function(){
 2     $("body").delegate("#btn_upload", "click", function () {
        $("#file_Excel").trigger("click");
       });
 5  });
 6 
 7 
 8 function ajaxFileUpload() {
 9     //        var filename = getFilePath($("#file_Excel").get(0));   // 本来在网上找了一个获取file路径的方法，但是好像都不怎么管用，最后还是直接取value值了
10     var filename = $("#file_Excel").val();
11     var suffix = filename.substring(filename.lastIndexOf(‘.‘), filename.length - 1);
12     if (filename == ‘‘ || filename == undefined) {
13         alert(‘请选择需要上传的文件!‘);
14         return false;
15     }
16     if (suffix != ‘.xls‘ && suffix != ‘.xlsx‘ && suffix != ‘.csv‘) {
17         alert(‘请选择正确的文件格式(.xls|.xlsx|.csv)!‘);
18         return false;
19     }
20     $("#txt_file").val(filename);
21 
22     $.ajaxFileUpload({
23         url: ‘../ASHX/BBISExcelImportSample.ashx‘, // 请求URL地址
24         type: ‘POST‘,
25         data: {
26             type: ‘getExcelInfo‘,
 29             rnd: Math.random().toString()
30         },  // 自定义参数
31         secureuri: false,  // 默认false
32         fileElementId: ‘file_Excel‘,  // 页面上file控件的ID，控件要有name属性
33         dataType: ‘JSON‘,    // 请求成功之后返回的数据格式
34         success: function (data) {   // 请求成功之后回调函数
35                     },
36         error: function (XMLHttpRequest, textStatus, errorTHrown) {// 请求报错之后执行
37         }
38     });
39 }

 1 public void ProcessRequest(HttpContext context)
 2         {
 3             string result = string.Empty;
 4             if (!String.IsNullOrEmpty(context.Request.Form["type"]))
 5             {
 6                 string type = context.Request.Form["type"];
 7                 switch (type)
 8                 {
 9                     case "getExcelInfo":
10                         result = GetExcelInfo();
11                         break;
12                     default:
13                         break;
14                 }
15             }
16             context.Response.Write(result);
17             context.Response.End();
18         }
19 
20 
21 #region 获取EXCEL相关信息
22         private string GetExcelInfo()
23         {
24             string result = string.Empty;
25             result = "{";
26             HttpFileCollection files = HttpContext.Current.Request.Files;
27             string filename = files[0].FileName;
28             string sheetName = HttpContext.Current.Request.Form["sheetName"];
29             string template_id = HttpContext.Current.Request.Form["template_id"];
30 
31             WebApp.DataTableRenderToExcel.FilePath = filename;
32             WebApp.DataTableRenderToExcel.SheetName = sheetName;
33             // 获取工作簿Sheet集合
34             List<string> sheetList = WebApp.DataTableRenderToExcel.ExcelSheetToDT();
35             // 获取EXCEL表头
36             DataTable dt_columns = WebApp.DataTableRenderToExcel.GetExcelHeader();
37             // 获取EXCEL数据
38             DataTable dt_data = WebApp.DataTableRenderToExcel.GetExcelData();
39             result += "\"sheet\":" + JsonConvert.SerializeObject(sheetList);
40             result += ",\"columns\":" + JsonConvert.SerializeObject(dt_columns);
41             result += ",\"excelData\":" + JsonConvert.SerializeObject(dt_data);
42             if (sheetList != null) sheetList = null;
43             if (dt_columns != null) dt_columns.Dispose();
44             if (dt_columns != null) dt_columns = null;
45             if (dt_data != null) dt_data.Dispose();
46             if (dt_data != null) dt_data = null;
47 
48             result += "}";
49             return result;
50         }
51         #endregion