ajaxfileupload

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

 

 1  <! DOCTYPE html >
 2  < html >
 3  < head >
 4      < title ></ title >
 5      < meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8" >
 6      < script  src ="sb2/bower_components/jquery/dist/jquery.min.js" ></ script >
 7      < script  type ="text/javascript"  src ="http://www.phpddt.com/usr/themes/dddefault/jquery-1.4.2.min.js" ></ script >
 8      < script  type ="text/javascript"  src ="js/ajaxfileupload.js" ></ script >
 9  </ head >
10  < script >
11     jQuery( function () {
12         $("#buttonUpload").click( function () {
13              // 加载图标
14              /*  $("#loading").ajaxStart(function(){
15               $(this).show();
16               }).ajaxComplete(function(){
17               $(this).hide();
18               }); */
19              // 上传文件
20             $.ajaxFileUpload({
21                 url: 'resuser/fileUpload.do', // 处理图片脚本
22                 secureuri:  false,
23                 fileElementId: 'fileToUpload', // file控件id
24                 dataType: 'json',
25                 success:  function (data, status) {
26                      var dUrl = "resuser/fileDownload.do?filename=" + data.data.fileName;
27                     $("#fileUrl").attr({href: dUrl});
28                     alert(status);
29                 },
30                 error:  function (data, status, e) {
31                     alert(status);
32                 }
33             })
34              return  false;
35         });
36 
37     })
38  </ script >
39  < body >
40  < input  id ="fileToUpload"  type ="file"  size ="20"  name ="fileToUpload"  class ="input" >
41  < button  id ="buttonUpload" >上传 </ button >
42  < a  id ="fileUrl" >查看上传附件 </ a >>
43  </ body >

44 </html> 

 

如遇到IE 需要保存json的问题,后端配置需要改 

 

 

 

今天用ajaxFileUpload做了一个读取图片EXIF信息然后上传到服务器的功能。 

因为读取是在后台读取的，所以先上传了一次。

后来发现读取完成以后，再上传的时候file为空，没有文件信息。 

网上查资料也找不到解决办法。 

后来看ajaxFileUpload源码，发现创建from的时候没有保留原file的file信息。 

解决方法：

在ajaxFileUpload.js源码中找到：createUploadForm 找到这一段

var oldElement = $('#' + fileElementId);  
var newElement = $(oldElement).clone();  
$(oldElement).attr('id', fileId);  
$(oldElement).before(newElement);  
$(oldElement).appendTo(form);

改为：

var oldElement = jQuery('#' + fileElementId);  
var newElement = oldElement.clone(true);  
newElement[0].files=oldElement[0].files;  
oldElement.attr('id', fileId);  
oldElement.before(newElement);  
oldElement.appendTo(form);

 

转载于:https://www.cnblogs.com/jianzhouf/p/5694070.html