1. [代码]ajaxfileupload.js 跳至 [1] [2] [全屏预览]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
jQuery.extend({ createUploadIframe: function (id, uri) {//id为当前系统时间字符串，uri是外部传入的json对象的一个参数 //create frame var frameId = 'jUploadFrame' + id; //给iframe添加一个独一无二的id var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"'; //创建iframe元素 if (window.ActiveXObject) {//判断浏览器是否支持ActiveX控件 if (typeof uri == 'boolean') { iframeHtml += ' src="' + 'javascript:false' + '"'; } else if (typeof uri == 'string') { iframeHtml += ' src="' + uri + '"'; } } iframeHtml += ' />'; jQuery(iframeHtml).appendTo(document.body); //将动态iframe追加到body中 return jQuery('#' + frameId).get(0); //返回iframe对象 }, createUploadForm: function (id, fileElementId, data) {//id为当前系统时间字符串，fileElementId为页面<input type='file' />的id，data的值需要根据传入json的键来决定 //create form var formId = 'jUploadForm' + id; //给form添加一个独一无二的id var fileId = 'jUploadFile' + id; //给<input type='file' />添加一个独一无二的id var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data" ></form>'); //创建form元素 if (data) {//通常为false for (var i in data) { jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); //根据data的内容，创建隐藏域，这部分我还不知道是什么时候用到。估计是传入json的时候，如果默认传一些参数的话要用到。 } } var oldElement = jQuery('#' + fileElementId); //得到页面中的<input type='file' />对象 var newElement = jQuery(oldElement).clone(); //克隆页面中的<input type='file' />对象 jQuery(oldElement).attr('id', fileId); //修改原对象的id jQuery(oldElement).before(newElement); //在原对象前插入克隆对象 jQuery(oldElement).appendTo(form); //把原对象插入到动态form的结尾处 //set attributes jQuery(form).css('position', 'absolute'); //给动态form添加样式，使其浮动起来， jQuery(form).css('top', '-1200px'); jQuery(form).css('left', '-1200px'); jQuery(form).appendTo('body'); //把动态form插入到body中 return form; }, ajaxFileUpload: function (s) {//这里s是个json对象，传入一些ajax的参数 // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout s = jQuery.extend({}, jQuery.ajaxSettings, s); //此时的s对象是由jQuery.ajaxSettings和原s对象扩展后的对象 var id = new Date().getTime(); //取当前系统时间，目的是得到一个独一无二的数字 var form = jQuery.createUploadForm(id, s.fileElementId, (typeof (s.data) == 'undefined' ? false : s.data)); //创建动态form var io = jQuery.createUploadIframe(id, s.secureuri); //创建动态iframe var frameId = 'jUploadFrame' + id; //动态iframe的id var formId = 'jUploadForm' + id; //动态form的id // Watch for a new set of requests if (s.global && !jQuery.active++) {//当jQuery开始一个ajax请求时发生 jQuery.event.trigger("ajaxStart"); //触发ajaxStart方法 } var requestDone = false; //请求完成标志 // Create the request object var xml = {}; if (s.global) jQuery.event.trigger("ajaxSend", [xml, s]); //触发ajaxSend方法 // Wait for a response to come back var uploadCallback = function (isTimeout) {//回调函数 var io = document.getElementById(frameId); //得到iframe对象 try { if (io.contentWindow) {//动态iframe所在窗口对象是否存在 xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null; xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document; } else if (io.contentDocument) {//动态iframe的文档对象是否存在 xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null; xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document; } } catch (e) { jQuery.handleError(s, xml, null, e); } if (xml || isTimeout == "timeout") {//xml变量被赋值或者isTimeout == "timeout"都表示请求发出，并且有响应 requestDone = true; //请求完成 var status; try { status = isTimeout != "timeout" ? "success" : "error"; //如果不是“超时”，表示请求成功 // Make sure that the request was successful or notmodified if (status != "error") { // process the data (runs the xml through httpData regardless of callback) var data = jQuery.uploadHttpData(xml, s.dataType); //根据传送的type类型，返回json对象，此时返回的data就是后台操作后的返回结果 // If a local callback was specified, fire it and pass it the data if (s.success) s.success(data, status); //执行上传成功的操作 // Fire the global callback if (s.global) jQuery.event.trigger("ajaxSuccess", [xml, s]); } else jQuery.handleError(s, xml, status); } catch (e) { status = "error"; jQuery.handleError(s, xml, status, e); } // The request was completed if (s.global) jQuery.event.trigger("ajaxComplete", [xml, s]); // Handle the global AJAX counter if (s.global && ! --jQuery.active) jQuery.event.trigger("ajaxStop"); // Process result if (s.complete) s.complete(xml, status); jQuery(io).unbind();//移除iframe的事件处理程序 setTimeout(function () {//设置超时时间 try { jQuery(io).remove();//移除动态iframe jQuery(form).remove();//移除动态form } catch (e) { jQuery.handleError(s, xml, null, e); } }, 100) xml = null } } // Timeout checker if (s.timeout > 0) {//超时检测 setTimeout(function () { // Check to see if the request is still happening if (!requestDone) uploadCallback("timeout");//如果请求仍未完成，就发送超时信号 }, s.timeout); } try { var form = jQuery('#' + formId); jQuery(form).attr('action', s.url);//传入的ajax页面导向url jQuery(form).attr('method', 'POST');//设置提交表单方式 jQuery(form).attr('target', frameId);//返回的目标iframe，就是创建的动态iframe if (form.encoding) {//选择编码方式 jQuery(form).attr('encoding', 'multipart/form-data'); } else { jQuery(form).attr('enctype', 'multipart/form-data'); } jQuery(form).submit();//提交form表单 } catch (e) { jQuery.handleError(s, xml, null, e); } jQuery('#' + frameId).load(uploadCallback); //ajax 请求从服务器加载数据，同时传入回调函数 return { abort: function () { } }; }, uploadHttpData: function (r, type) { var data = !type; data = type == "xml" || data ? r.responseXML : r.responseText; // If the type is "script", eval it in global context if (type == "script") jQuery.globalEval(data); // Get the JavaScript object, if JSON is used. if (type == "json") eval("data = " + data); // evaluate scripts within html if (type == "html") jQuery("<div>").html(data).evalScripts(); return data; }}) |
2. [代码]使用ajaxfileupload.js插件的大致方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
$.ajaxFileUpload( { url: '../../XXXX/XXXX.aspx', //用于文件上传的服务器端请求地址 secureuri: false, //一般设置为false fileElementId: $("input#xxx").attr("id"), //文件上传控件的id属性 <input type="file" id="file" name="file" /> 注意，这里一定要有name值 //$("form").serialize(),表单序列化。指把所有元素的ID，NAME 等全部发过去 dataType: 'json',//返回值类型 一般设置为json complete: function () {//只要完成即执行，最后执行 }, success: function (data, status) //服务器成功响应处理函数 { if (typeof (data.error) != 'undefined') { if (data.error != '') { if (data.error == "1001") {//这个error（错误码）是由自己定义的，根据后台返回的json对象的键值而判断 } else if (data.error == "1002") { } alert(data.msg);//同error return; } else { alert(data.msg); } } /* * 这里就是做一些其他操作，比如把图片显示到某控件中去之类的。 */ }, error: function (data, status, e)//服务器响应失败处理函数 { alert(e); } }) |
