ajaxfileupload传递文件及参数

ajaxfileupload带参数上传文件

最经在工作中要实现文件的无刷新上传，当然XmlHttpRequest对象是无法实现文件的上传功能的。google后找到JQuery的fileupload插件，此插件通过一个IFrame并在IFrame中创建一个form表单来实现文件上传；而在我的应用中还需要带一些其他的文本参数，而此插件并未提供此功能。
既然是动态创建form表单，那么更定能加入其他参数的，请看代码（注意第41行）：

Java代码

1. jQuery.extend({
2. createUploadIframe:function(id,uri)
3. {
4. //createframe
5. varframeId='jUploadFrame'+id;
7. if(window.ActiveXObject){
8. vario=document.createElement('<iframeid="'+frameId+'"name="'+frameId+'"/>');
9. if(typeofuri=='boolean'){
10. io.src='javascript:false';
11. }
12. elseif(typeofuri=='string'){
13. io.src=uri;
14. else{
15. vario=document.createElement('iframe');
16. io.id=frameId;
17. io.name=frameId;
18. io.style.position='absolute';
19. io.style.top='-1000px';
20. io.style.left='-1000px';
21. document.body.appendChild(io);
22. returnio
23. },
24. createUploadForm:function(id,fileElementId,data)
25. //createform
26. varformId='jUploadForm'+id;
27. varfileId='jUploadFile'+id;
28. varform=$('<formaction=""method="POST"name="'+formId+'"id="'+formId+'"enctype="multipart/form-data"></form>');
29. varoldElement=$('#'+fileElementId);
30. varnewElement=$(oldElement).clone();
31. $(oldElement).attr('id',fileId);
32. $(oldElement).before(newElement);
33. $(oldElement).appendTo(form);
34. //增加文本参数的支持
35. if(data){
36. for(variindata){
37. $('<inputtype="hidden"name="'+i+'"value="'+data[i]+'"/>').appendTo(form);
38. //setattributes
39. $(form).css('position','absolute');
40. $(form).css('top','-1200px');
41. $(form).css('left',250); line-height:18px"> $(form).appendTo('body');
42. returnform;
43. ajaxFileUpload:function(s){
44. //Todointroduceglobalsettings,allowingtheclienttomodifythemforallrequests,notonlytimeout
45. s=jQuery.extend({},jQuery.ajaxSettings,s);
46. varid=newDate().getTime()
47. varform=jQuery.createUploadForm(id,s.fileElementId,s.data);
48. vario=jQuery.createUploadIframe(id,s.secureuri);
49. //Watchforanewsetofrequests
50. if(s.global&&!jQuery.active++)
51. jQuery.event.trigger("ajaxStart");
52. varrequestDone=false;
53. //Createtherequestobject
54. varxml={}
55. if(s.global)
56. jQuery.event.trigger("ajaxSend",[xml,s]);
57. //Waitforaresponsetocomeback
58. varuploadCallback=function(isTimeout)
59. vario=document.getElementById(frameId);
60. try
61. if(io.contentwindow)
62. xml.responseText=io.contentwindow.document.body?io.contentwindow.document.body.innerHTML:null;
63. xml.responseXML=io.contentwindow.document.XMLDocument?io.contentwindow.document.XMLDocument:io.contentwindow.document;
64. }if(io.contentDocument)
65. xml.responseText=io.contentDocument.document.body?io.contentDocument.document.body.innerHTML: xml.responseXML=io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
66. catch(e)
67. jQuery.handleError(s,xml,null,e);
68. if(xml||isTimeout=="timeout")
69. requestDone=true;
70. varstatus;
71. try{
72. status=isTimeout!="timeout"?"success":"error";
73. //Makesurethattherequestwassuccessfulornotmodified
74. if(status!="error")
75. //processthedata(runsthexmlthroughhttpDataregardlessofcallback)
76. vardata=jQuery.uploadHttpData(xml,s.dataType);
77. //Ifalocalcallbackwasspecified,fireitandpassitthedata
78. if(s.success)
79. s.success(data,status);
80. //Firetheglobalcallback
81. jQuery.event.trigger("ajaxSuccess",85); font-weight:bold">else
82. status="error";
83. //Therequestwascompleted
84. jQuery.event.trigger("ajaxComplete",0); padding:0px; margin:0px; width:auto; border:0px">//HandletheglobalAJAXcounter
85. if(s.global&&!--jQuery.active)
86. jQuery.event.trigger("ajaxStop");
87. //Processresult
88. if(s.complete)
89. s.complete(xml,250); line-height:18px"> jQuery(io).unbind()
90. setTimeout(function()
91. { $(io).remove();
92. $(form).remove();
93. 100)
94. xml=null
95. //Timeoutchecker
96. if(s.timeout>0)
97. setTimeout(function(){
98. //Checktoseeiftherequestisstillhappening
99. if(!requestDone)uploadCallback("timeout");
100. //vario=$('#'+frameId);
101. varform=$('#'+formId);
102. $(form).attr('action',s.url);
103. $(form).attr('method','POST');
104. $(form).attr('target',frameId);
105. if(form.encoding)
106. form.encoding='multipart/form-data';
107. form.enctype='multipart/form-data';
108. $(form).submit();
109. if(window.attachEvent){
110. document.getElementById(frameId).attachEvent('onload',uploadCallback);
111. document.getElementById(frameId).addEventListener('load',uploadCallback,85); font-weight:bold">false);
112. return{abort:function(){}};
113. uploadHttpData:function(r,type){
114. vardata=!type;
115. data=type=="xml"||data?r.responseXML:r.responseText;
116. //Ifthetypeis"script",evalitinglobalcontext
117. if(type=="script")
118. jQuery.globalEval(data);
119. //GettheJavaScriptobject,ifJSONisused.
120. if(type=="json")
121. eval("data="+data);
122. //evaluatescriptswithinhtml
123. if(type=="html")
124. jQuery("<div>").html(data).evalScripts();
125. //alert($('param',data).each(function(){alert($(this).attr('value'));}));
126. returndata;
127. })

使用方法：

$.ajaxFileUpload({

url:'/ajax/mine/uploadlogo',250); line-height:18px"> secureuri:false,250); line-height:18px"> fileElementId:'input_logo',250); line-height:18px"> dataType:'json',250); line-height:18px"> data:{//加入的文本参数

"logoPath":"param1",250); line-height:18px"> "logoName":"param2"

success:function(data){

error:function(){

showError("上传失败，请检查文件是否符合格式要求。");

});

最后注意服务器返回的response type必须是text/html

原文的链接:http://dannybai.iteye.com/blog/657810