首页 > 代码库 > ajaxfileupload 上传插件
ajaxfileupload 上传插件
弄了几天的上传，总是各种不兼容，现在基本算是完善了。目前的状况是发布在我自己的笔记本上，用同事的电脑访问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="http://www.mamicode.com/‘ + 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="http://www.mamicode.com/‘ + 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 =http://www.mamicode.com/ jQuery.uploadHttpData(xml, s.dataType); 99 // If a local callback was specified, fire it and pass it the data100 if (s.success)101 s.success(data, status);102 103 // Fire the global callback104 if (s.global)105 jQuery.event.trigger("ajaxSuccess", [xml, s]);106 } else107 jQuery.handleError(s, xml, status);108 } catch (e) {109 status = "error";110 jQuery.handleError(s, xml, status, e);111 }112 113 // The request was completed114 if (s.global)115 jQuery.event.trigger("ajaxComplete", [xml, s]);116 117 // Handle the global AJAX counter118 if (s.global && ! --jQuery.active)119 jQuery.event.trigger("ajaxStop");120 121 // Process result122 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 = null139 140 }141 }142 // Timeout checker143 if (s.timeout > 0) {144 setTimeout(function () {145 // Check to see if the request is still happening146 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 = http://www.mamicode.com/!type;174 data = http://www.mamicode.com/type =="xml" || data ? r.responseXML : r.responseText;175 // If the type is "script", eval it in global context176 if (type == "script")177 jQuery.globalEval(data);178 // Get the JavaScript object, if JSON is used.179 if (type == "json")180 eval("data = "http://www.mamicode.com/+ data);181 // evaluate scripts within html182 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, // 默认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 }
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 =http://www.mamicode.com/ 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 = http://www.mamicode.com/null;47 48 result += "}";49 return result;50 }51 #endregion
记录下来，一是为了方便下次使用，另外也希望对大家有所帮助。。
ajaxfileupload 上传插件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。