弄了几天的上传，总是各种不兼容，现在基本算是完善了。目前的状况是发布在我自己的笔记本上，用同事的电脑访问IE10、firefox、chrome都可以正常上传，还有其他不完善的地方，欢迎大家赐教。。。。
ajaxfileupload.js
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 })
html代码：
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();" />
js代码：
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, // 默认false32 fileElementId: ‘file_Excel‘, // 页面上file控件的ID，控件要有name属性33 dataType: ‘JSON‘, // 请求成功之后返回的数据格式34 success: function (data) { // 请求成功之后回调函数
35 },
36 error: function (XMLHttpRequest, textStatus, errorTHrown) {// 请求报错之后执行
37 }
38 });
39 }
C#代码：
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
记录下来，一是为了方便下次使用，另外也希望对大家有所帮助。。
时间： 2024-08-08 01:27:31