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中map函数的两种方式
Apr 07 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
详解python3实现的web端json通信协议
2016/12/29 Python
深入理解Python中的内置常量
2017/05/20 Python
Python测试人员需要掌握的知识
2018/02/08 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
Java程序员综合测试题
2014/04/25 面试题
化工专业个人的求职信范文
2013/11/28 职场文书
超市客服工作职责
2014/06/11 职场文书
旷课检讨书范文
2014/10/30 职场文书
党校党性分析材料
2014/12/19 职场文书
Python 键盘事件详解
2021/11/11 Python
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis