jquery实现异步文件上传ajaxfileupload.js


Posted in jQuery onOctober 23, 2020

本文实例为大家分享了jquery实现异步文件上传的具体代码,供大家参考,具体内容如下

ajaxfileupload.js 异步上传文件:

直接引用。

调用方法:

$.ajaxFileUpload({ 
 url:'',//后台接口地址 
 type: "post", 
 secureuri: false, //一般设置为false 
 fileElementId: 'ofx', // 上传文件的id、name属性名 
 dataType: 'json', 
 success: function(data, status){ 
  
 }, 
 error: function(data, status, e){ 
 } 
 });

下面是ajaxfileupload.js,可直接复制并引用。

jQuery.extend({
 createUploadIframe: function(id, uri)
 {
  
 //create frame
 var frameId = 'jUploadFrame' + id;
 var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
 if(window.ActiveXObject)
 {
 if(typeof uri== 'boolean'){
 iframeHtml += ' src="' + 'javascript:false' + '"';

 }
 else if(typeof uri== 'string'){
 iframeHtml += ' src="' + uri + '"';

 } 
 }
 iframeHtml += ' />';
 jQuery(iframeHtml).appendTo(document.body);

 return jQuery('#' + frameId).get(0); 
 },
 createUploadForm: function(id,fileElementId,data,fileElement)
 {
 //create form 
 var formId = 'jUploadForm' + id;
 var fileId = 'jUploadFile' + id;
 var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); 
 if(data)
 {
 for(var i in data)
 {
 jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
 } 
 }

 
 if(typeof(fileElementId) == 'string'){
 fileElementId = [fileElementId];
 }
 for(var i in fileElementId){
 var oldElement = jQuery('#' + fileElementId[i]);
 var newElement = jQuery(oldElement).clone();
 jQuery(oldElement).attr('id', fileId);
 jQuery(oldElement).before(newElement);
 jQuery(oldElement).appendTo(form);
 }
 
 
 
 //set attributes
 jQuery(form).css('position', 'absolute');
 jQuery(form).css('top', '-1200px');
 jQuery(form).css('left', '-1200px');
 jQuery(form).appendTo('body'); 
 return form;
 },

 ajaxFileUpload: function(s) {
  // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout 
  s = jQuery.extend({}, jQuery.ajaxSettings, s);
  var id = new Date().getTime()  
 var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data),s.fileElement);
 var io = jQuery.createUploadIframe(id, s.secureuri);
 var frameId = 'jUploadFrame' + id;
 var formId = 'jUploadForm' + id; 
  // Watch for a new set of requests
  if ( s.global && ! jQuery.active++ )
 {
 jQuery.event.trigger( "ajaxStart" );
 }   
  var requestDone = false;
  // Create the request object
  var xml = {} 
  if ( s.global )
   jQuery.event.trigger("ajaxSend", [xml, s]);
  // Wait for a response to come back
  var uploadCallback = function(isTimeout)
 { 
 var io = document.getElementById(frameId);
   try 
 { 
 if(io.contentWindow)
 {
  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)
 {
  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") 
 { 
    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 ); 
      // 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()

    setTimeout(function()
   { try 
   {
   jQuery(io).remove();
   jQuery(form).remove(); 
   
   } 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);
 jQuery(form).attr('method', 'POST');
 jQuery(form).attr('target', frameId);
   if(form.encoding)
 {
 jQuery(form).attr('encoding', 'multipart/form-data');   
   }
   else
 { 
 jQuery(form).attr('enctype', 'multipart/form-data'); 
   } 
   jQuery(form).submit();

  } catch(e) 
 { 
   jQuery.handleError(s, xml, null, e);
  }
 
 jQuery('#' + frameId).load(uploadCallback);
  return {abort: function(){
 try
 {
 jQuery('#' + frameId).remove();
 jQuery(form).remove();
 }
 catch(e){}
 }};
 },

 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" ){
 以下为新增代码///
   data = r.responseText;
   var start = data.indexOf(">");
   if(start != -1) {
  var end = data.indexOf("<", start + 1);
  if(end != -1) {
  data = data.substring(start + 1, end);
  }
 }
 }
   ///以上为新增代码///
   eval( "data = " + data );
  // evaluate scripts within html
  if ( type == "html" )
   jQuery("<div>").html(data).evalScripts();

  return data;
 },
 
 handleError: function( s, xml, status, e ) {
 // If a local callback was specified, fire it
 if ( s.error )
 s.error( xml, status, e );

 // Fire the global callback
 if ( s.global )
 jQuery.event.trigger( "ajaxError", [xml, s, e] );
 }
});

更多精彩内容,请点击《jQuery上传操作汇总》,《ajax上传技术汇总》进行深入学习和研究。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
基于jQuery实现文字打印动态效果
Apr 21 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
jquery简易手风琴插件的封装
Oct 13 jQuery
jquery实现抽奖功能
Oct 22 #jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 #jQuery
jQuery实现计算器功能
Oct 19 #jQuery
jQuery实现推拉门效果
Oct 19 #jQuery
jQuery实现图片切换效果
Oct 19 #jQuery
jQuery实现回到顶部效果
Oct 19 #jQuery
jQuery实现放大镜案例
Oct 19 #jQuery
You might like
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
PHP新手上路(四)
2006/10/09 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
javascript 正则表达式相关应介绍
2012/11/27 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现数独算法实例
2015/06/09 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
Python实现一个论文下载器的过程
2021/01/18 Python
大学生职业生涯规划范文
2014/01/08 职场文书
电子商务应届生自我鉴定
2014/01/13 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
债务纠纷起诉书
2015/05/20 职场文书
运动会通讯稿100字
2015/07/20 职场文书
《去年的树》教学反思
2016/02/18 职场文书
工作自我评价范文
2019/03/21 职场文书