ajaxFileupload.js

最新推荐文章于 2021-08-05 23:01:19 发布
最新推荐文章于 2021-08-05 23:01:19 发布
阅读量309 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tanxuefeng11/article/details/107082516
版权

jQuery.extend({

createUploadIframe: function(id, uri)
{
		//create frame
        var frameId = 'jUploadFrame' + id;
        
        if(window.ActiveXObject) {
        	   if(jQuery.browser.version=="9.0" || jQuery.browser.version=="10.0"){
        	    	var io = document.createElement('iframe');
        	    	io.id = frameId;
        	    	io.name = frameId;
        	    }else if(jQuery.browser.version=="6.0" || jQuery.browser.version=="7.0" || jQuery.browser.version=="8.0"){
        	    	var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
        	    	if(typeof uri== 'boolean'){
        	    	    io.src = 'javascript:false';
        	    	}
        	    	else if(typeof uri== 'string'){
        	    	    io.src = uri;
        	    	}
        	    }
        	}
        else {
            var io = document.createElement('iframe');
            io.id = frameId;
            io.name = frameId;
        }
        io.style.position = 'absolute';
        io.style.top = '-1000px';
        io.style.left = '-1000px';

        document.body.appendChild(io);

        return io;			
},
createUploadForm: function(id, fileElementId,data)
{
	//create form	
	var formId = 'jUploadForm' + id;
	var fileId = 'jUploadFile' + id;
	var form = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');	
	var oldElement = $('#' + fileElementId);
    if(typeof(fileElementId) == 'string'){
        fileElementId = [fileElementId];
    }
    for(var i in fileElementId){
    	if(!fileElementId.hasOwnProperty(i) ){
    		continue;
    	}
        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
	if (data) {
		for ( var i in data) {
			$('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
		}
	}
	
	$(form).css('position', 'absolute');
	$(form).css('top', '-1200px');
	$(form).css('left', '-1200px');
	$(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,s.data);
	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 
									{
										$(io).remove();
										$(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 io = $('#' + frameId);
		var form = $('#' + formId);
		$(form).attr('action', s.url);
		$(form).attr('method', 'POST');
		$(form).attr('target', frameId);
        if(form.encoding)
		{
            form.encoding = 'multipart/form-data';				
        }
        else
		{				
            form.enctype = 'multipart/form-data';
        }			
        $(form).submit();

    } catch(e) 
	{			
        jQuery.handleError(s, xml, null, e);
    }
    if(window.attachEvent){
        document.getElementById(frameId).attachEvent('onload', uploadCallback);
    }
    else{
        document.getElementById(frameId).addEventListener('load', uploadCallback, false);
    } 		
    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" ){
    	以下为新增代码///  
        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();
		//alert($('param', data).each(function(){alert($(this).attr('value'));}));
    return data;
},
handleError: function( s, xhr, status, e ) {
	// If a local callback was specified, fire it
			if ( s.error ) {
				s.error.call( s.context || s, xhr, status, e );
			}

			// Fire the global callback
			if ( s.global ) {
				(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
			}
}

})

demo

/**

  • 作者：谭学锋

  • 版权：西安优步

  • 全局的删除文件函数

  • 版本：1.0

  • 日期：2018.8.31 10:22

  • 删除附件

  • @param e

  • @param entityId

  • @param buttonId
    */

     function delFjTxf(e,entityId,buttonId){
 	$(e).parent().parent().remove();
 	 $("#"+buttonId).show();
 	 nui.get(entityId).setValue("");
 }

/**

  • 作者：谭学锋

  • 版权：西安优步

  • 文件上传（单个文件）的通用显示和删除函数

  • 版本：1.0

  • 日期：2018.8.31 10:28

  • @param lcm 流程名

  • @param entityId 实体属性id

  • @param entityOriId 文件名属性id

  • @param buttonId 按钮id

  • @param fileId 文件域id

  • @param showId 显示id

  • @param fileNameCheckFn 文件名检查函数，参见源码中的 fileNameCheckFn,默认（undefined）全部类型，“image” ：图片。

  • @param noDelete true:没有删除按钮，也没有上传按钮。默认false.

  • @param notify 回调 function(){ }
    */

    function uploadInitial(lcm,entityId,entityOriId,buttonId,fileId,showId,fileNameCheckFn,noDelete,notify){
    noDelete=noDelete||false;
    if( fileNameCheckFn==“image”){
    fileNameCheckFn=function(feid){
    var img = document.getElementById(feid);
    return /.(jpg|png|gif|bmp)$/.test(img.value)?true:(function() {
    nui.alert(‘图片格式仅支持jpg、png、gif、bmp格式，且区分大小写。’);
    return false;
    })();

            }
     }else if( fileNameCheckFn== "imageAndPdf"){
        fileNameCheckFn=function(feid){
     		var img = document.getElementById(feid);
     		  return /.(jpg|png|gif|bmp|pdf)$/.test(img.value)?true:(function() {
     			  nui.alert('图片格式仅支持jpg、png、gif、bmp、pdf格式，且区分大小写。');             
     			  return false;
     		  })();
     	  
        }
     }else if( fileNameCheckFn== undefined){
        fileNameCheckFn=function(){
     	  return true;
        }
     }
  function bindChange(){
      $("#"+fileId).change(function(e){
 	       ajax_upload(fileId, function(data) {
 	    	      data.url=data.url.replace(/\\\\/g,'/');
 	    	      data.url=data.url.replace(/\\/g,'/');
 				  data.url=basePath+"/"+data.url;
 				  var fjShow='<div class="file-item" >'+
 							 '    <div class="hover-box"><input type="hidden" name="fj" value="'+data.url+'">'+
 							  '        <a href="'+data.url+'" target="_Blank">'+
 							   '           <span class="fa fa-download"></span>'+
 								'      </a>'+
 								'      <a href="javaScript:void(0)" onclick="delFjTxf(this,\''+entityId+'\',\''+buttonId+'\')">'+
 								 '          <span class="fa fa-remove"></span>'+
 								  '    </a>&nbsp;&nbsp;&nbsp;'+data.originalname+
 								'   </div>'+
 							  '</div>';						
 				  $('#'+showId).html(fjShow );					
 				  nui.get(entityId).setValue(data.url);	
 				  nui.get(entityOriId).setValue(data.originalname);	
 				  if(notify){
 					  notify();
 				  }
 				  $("#"+buttonId).hide();
 		   });
 	 });
  }
  bindChange();
  function ajax_upload(feid, callback) { 
 	  if (fileNameCheckFn(feid)) { 
 		  $.ajaxFileUpload({
 			  fileElementId: feid,   
 			  url: 'upload.jsp?lcm='+lcm, 
 			  type: 'post',   
 			  dataType: 'json',   //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
 			  secureuri: false,  
 			  async : true,   
 			  success: function(data) {   
 				  if (callback) callback.call(this, data);
 					 $("#"+fileId).val(""); 
 					 bindChange();
 			  },
 			  error: function(data, status, e) {  
 				  $("#"+fileId).val("");
 				  bindChange();
 			  }
 		  });
 	  }
   }
    //点击传递
      $("#"+buttonId).click(function(){
 	     $("#"+fileId).val("");
 		$("#"+fileId).trigger("click");
 	});
      
      if($("#"+entityId).val()!="" && $("#"+entityId).val()!="null"){
     	 $("#"+buttonId).hide();
     	 var deleteHtml='      <a href="javaScript:void(0)" onclick="delFjTxf(this,\''+entityId+'\',\''+buttonId+'\')">'+
 			 '          <span class="fa fa-remove"></span>'+
 			  '    </a>';
     	 if(noDelete){
     		 deleteHtml="";
     	 }
     	 var fjShow='<div class="file-item" >'+
 		 '    <div class="hover-box"><input type="hidden" name="fj" value="'+$("#"+entityId).val()+'">'+
 		  '        <a href="'+$("#"+entityId).val()+'" target="_Blank">'+
 		   '           <span class="fa fa-download"></span>'+
 			'      </a>'+
 			deleteHtml
 			+'&nbsp;&nbsp;&nbsp;'+$("#"+entityOriId).val()+
 			'   </div>'+
 		  '</div>';						
         $('#'+showId).html(fjShow );
      }
      if(noDelete){
     	 $("#"+buttonId).hide();
     }

    }

patherBlue
关注
专栏目录
ajaxfileupload.js
02-17
ajaxfileupload.js是实现页面无刷新上传文件的一个插件
Ajaxfileupload.js
06-24
javascript文件上传插件，Ajaxfileupload.js，官方下载版
ajaxFileUpload ajax上传文件！jquery插件
展望
08-01 2466
function ajaxFileUpload(){                jQuery.ajaxFileUpload(                    {                 url:'',
ajaxfileupload.js 支持chrome，fireox，ie
masuwen博客
11-30 528
jQuery.extend({ handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || s, xhr, status, e ); } // Fire t
ajaxfileupload.js文件下载
08-16
此为前端进行文件上传，使用Ajax方式提交的js插件，使用方便简洁，开发很高效。
php ajaxfileupload.js 使用,使用ajaxfileupload.js实现上传文件功能
weixin_42131541的博客
03-10 154
一直以来上传文件都是使用form表单上传文件，也看到过有人使用js上传文件，不过看起来蛮简单的也就没有怎么去理会。今天突然要使用这种方式上传文件，期间还遇到点问题。因此就记录下来，方便以后遇到这样的问题可以查看。首先就是引入js和ajaxfileupload的文件，这个不需要多说。然后就是ajax请求后台地址。代码如下：选择文件$("#upload").on("change",function()...
ajax upload file.js,jquery.ajaxfileupload.js
weixin_39772420的博客
08-05 337
jquery.ajaxfileupload.js上传插件，利用iframe提交不刷新页面功能完成。/*// jQuery Ajax File Uploader//// @author: Jordan Feldstein //// - Ajaxifies an individual // - Files are sandboxed. Doesn't matter how many, or whe...
php ajaxfileupload.js 使用,ajaxfileupload.js实现文件上传（附步骤代码）
weixin_33245447的博客
03-10 425
这次给大家带来ajaxfileupload.js实现文件上传(附步骤代码)，ajaxfileupload.js实现文件上传的注意事项有哪些，下面就是实战案例，一起来看一下。AjaxUpLoad.js的使用实现无刷新文件上传，如图1、创建页面并编写HTML上传文档:上传图片: 2、引用AjaxUpload.js文件3、编写JS脚本window.onload = function() {init()...
ajaxfileupload.js文件
01-15
该js包是在官方下载的ajaxFileUpload.js基础上所做修改后的包，修改该包所要解决的问题包括： 1、浏览器上传文件后不刷新页面再次点击上传时后台接收不到文件的bug。 2、解决了ajaxFileUpload 报jQuery.handleError is not a function的bug。 3、解决了使用ajaxFileUpload除了上传文件外不能传递其他参数的bug。
AjaxFileUpload.js
04-23
NULL 博文链接：https://zhaixp1949.iteye.com/blog/2260109
jquery ajax fileupload.js 下载
04-21
NULL 博文链接：https://dmwdmc.iteye.com/blog/1918988
方便自己下载的ajaxfileupload.js备份
02-25
该资源提供了两个核心文件，即jquery.min.js和ajaxfileupload.js，它们共同构成了一个简单的图片上传解决方案。 首先，`jquery.min.js`是jQuery库的压缩版，这是一个广泛使用的JavaScript库，简化了DOM操作、事件...
ajaxfileupload.js完整使用全套（带对应jquery+demo）
12-28
`ajaxfileupload.js`是一个JavaScript库，用于实现异步文件上传功能，避免了传统文件上传时页面刷新的问题。它与jQuery的结合使得文件上传更加简便、高效。 首先，我们来理解`ajaxfileupload.js`的核心概念。这个...
jquery实现异步文件上传ajaxfileupload.js
01-18
ajaxfileupload.js 异步上传文件： 直接引用。 调用方法： $.ajaxFileUpload({ url:'',//后台接口地址 type: post, secureuri: false, //一般设置为false fileElementId: 'ofx', // 上传文件的id、name属性名 ...
一个支持Jquery3 的ajaxfileupload.js
12-17
通过修改终于使得ajaxfileupload兼容jquery3，代码已上线运行。
使用ajaxfileupload.js实现Ajax文件上传PHP教程
然而，需要注意的是，由于浏览器安全限制，JavaScript无法直接访问file类型的input元素的实际内容，因此ajaxfileupload.js通过创建iframe来绕过这个限制。同时，为了确保上传的安全性和正确性，服务器端的验证和处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值