ajaxfileupload源码

Ajaxfileupload.js javascript文件上传插件,Ajaxfileupload.js,官方下载版 立即下载

ajaxfileupload的版本早就不更新了,ajaxFileUpload 报这错jQuery.handleError is not a function,是版本1.4.2之前的版本才有handlerError方法,之后就不存在了。需要添加此方法。


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] );  
                }  
    }  

得到下面最全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)
	{
		//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);
			}			
		}		
		var oldElement = jQuery('#' + fileElementId);
		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;
    },
    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] );
    			}
    },
    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));
		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 () {}};	

    },

    uploadHttpData: function( r, type ) {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;
        data = data.replace("<pre>","");
        data = data.replace("</pre>","");
        // 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;
    }
})

然后这样去调用,此处附上一段判断文件大小和文件类型的代码:

<input type="file" id="basicInfoHead" style="display:none;"  name="basicInfoHead" />    

$('#basicInfoHead').change(function(){
    var files = Array.prototype.slice.call(this.files);
    var that=this;
    files.forEach(function (file, i) {
        if (file.size > 20 * 1024) {
            alert("上传图片不能大于20k");
            that.value = "";
            return;
        } else if (file.size == 0) {
            alert("上传图片路径不正确(可能包含中文)");
            that.value = "";
            return;
        }
        if (!/\/(?:jpeg|png|gif)/i.test(file.type)){
           alert("文件格式必须为jpeg,png,gif");return
        }
    })

      $.ajaxFileUpload({  
         url:"",//需要链接到服务器地址   
         secureuri:false,  
         fileElementId:"basicInfoHead",//文件选择框的id属性  
         dataType: 'json',   //json  
         success: function (data) {  
            $("#imgHead").attr("src","/"+data.imagePath);  
         }, 
         error:function(XMLHttpRequest, textStatus, errorThrown){  
            alert('上传失败!');  
         }  
      });  



ajaxFileUpload.js 源码包 该js包是在官方下载的ajaxFileUpload.js基础上所做修改后的包,修改该包所要解决的问题包括: 1、浏览器上传文件后不刷新页面再次点击上传时后台接收不到文件的bug 2、解决了ajaxFileUpload 报jQuery.handleError is not a function的bug 3、解决了使用ajaxFileUpload除了上传文件外不能传递其他参数的bug 立即下载

相关推荐

完整ajaxfileupload.js

ajax上传文件必须js文件,修复其中缺少handleError方法,json处理带有,问题,亲测可以,直接引用即可!

ajaxFileUpload 源码及相关bug解决

首先,先放上js,给懒得看的人 // JavaScript Document jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if(win

u014693253的博客 1654

jQuery Ajax File Upload实例

主要为大家分享了jQuery Ajax File Upload实例源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

$ajaxFileUpload可以带参数文件上传源码及使用

$ajaxFileUpload可以带参数文件上传源码及使用。。。

perry_zhao的博客 2030

jquery之ajaxfileupload异步上传插件(附工程代码)

点我下载工程代码 由于项目需求,在处理文件上传时需要使用到文件的异步上传。这里使用Jquery Ajax File Uploader这个组件下载地址:http://www.phpletter.com/download_project_version.php?version_id=6 服务器端采用struts2来处理文件上传。 所需环境: jquery.js ajaxfileupload.js struts2所依赖的jar包 及struts2-json-plugin-2.1.8.1.jar 编写文件上传的Action 代码如下: package com.ajaxfile.action; imp

Windows 11下Telnet端口23连接失败的终极解决方案(附详细排查步骤)

本文详细解析了Windows 11系统中Telnet端口23连接失败的常见原因及解决方案。从Telnet客户端功能启用、服务端配置检查到网络连接诊断,提供了一套完整的排查步骤,帮助用户快速定位并解决连接问题,同时给出了安全使用Telnet的建议。

win55的博客 456

ajaxfileupload.js源码

ajaxfileupload.js源码   jQuery.extend({           createUploadIframe: function(id, uri)     {            //create frame             var frameId = 'jUploadFrame' + id;             var if

wxincome的专栏 656

UFS 3.1协议实战解析:从MIPI M-PHY到SCSI命令的完整链路拆解

本文深入解析UFS 3.1存储协议,从MIPI M-PHY物理层到SCSI命令层,完整拆解数据链路。通过分析协议栈三层架构(UIC、UTP、UCS),结合Wireshark抓包实战,详解UPIU数据包传输与SCSI命令封装,并探讨GEAR模式对性能与功耗的影响,为嵌入式存储开发与调试提供实用指南。

weixin_29207533的博客 420

jQ效果:jQuery插件ajaxfileupload.js源码与使用

在网页应用中,一般会用到上传文件或者图片什么的到服务器,那么可以用ajaxfileupload.js,但是在使用ajaxfileupload.js时候,当服务器返回的json带有&amp;符号的时候,返回的data数据里面所有的&amp;被转义成了&amp;amp;。下面的ajaxfileupload.js是经过修改的文件上传库。 jQuery.extend({ /** creat...

weixin_34185364的博客 218

利用腾讯云轻量服务器快速搭建网站CDN

腾讯云的轻量最近在主机和站长中间可谓是占尽来风头,优秀的线路,低廉的价格使得越来越多的人开始使用腾讯云的轻量级服务器来部署应用。由于腾讯云轻量服务器的海外服务器电信走的是CN2GIA线路带宽30m挺适合做CDN的,我就记录一下如何利用腾讯云香港的轻量服务器搭建一个CDN。 购买服务器 首先选购服务器,最近腾讯云在做活动,力度很大国内备案用户可以选用国内的服务器最低128元/年,未备案的可以选用香港或者新加坡的服务器。 购买链接 服务器系统选Debian、Ubuntu、centos都可以 一键脚

demo_top的博客 2565

大疆航线文件解析指南:5分钟搞懂KMZ里的template.kml和waylines.wpml区别

本文深入解析大疆无人机航线文件KMZ中template.kml与waylines.wpml的核心区别。template.kml是定义任务框架和全局参数的可编辑模板,而waylines.wpml是包含精确执行指令的最终文件。理解两者差异对于高效规划航线、批量生成任务及进行二次开发至关重要。

sun99的博客 866

ajaxFileUpload 实现多文件上传(源码)

按照原ajaxFileUpload.js是不能多文件上传的。需要对源码进行修改:主要修改了fileElementId部分 具体参考https://blog.youkuaiyun.com/itmyhome1990/article/details/36396291,里面有具体使用方法 下面是修改后的源码 jQuery.extend( { handleError : function(s, x...

weixin_30659829的博客 157

WinCC动态选择报警记录案例

本例中需要确认查询的时间段以及查询的关键字,然后通过一个按钮来执行报警数据查询脚本,并把查询出的结果加载到当前报警控件中。<本例中数据查询脚本的思路是根据选项组所选定的参数加载相应的归档变量到在线趋势控件,根据设定的查询时间范围设定控件时间轴的开始时间及结束时间。本文以 WinCC V8.0为例,介绍如何动态的查询WinCC报警记录,包括关键字查询/时间&关键字查询,如图1所示。<在WinCC变量管理中创建不同的变量组,并在变量组下创建相应的变量,如图2 所示(下图并非实际变量值)。

weixin_45072604的博客 2709

ajaxfileupload:上传 (多个文件 + json传参)源码修改+前台demo+后台解析

写在前面的: 源码中仅支持上传一个文档,不支持批量传文件以及参数。本文提供2种修改源码方式,分别支持“多文件上传” 和 “多文件+json传参上传”。 一、上传多个文件,无json传参 1、ajaxfileupload.js源码修改: 2、前台代码: 注:此处的i...

qq_41306795的博客 719

AI赋能传染病建模:从数据到动力学模型的本地实践指南

这次我们来看一个将 AI 与传染病动力学建模结合的前沿方向。想象一下,你手头有一份流感爆发的病例数据,传统的建模方法可能需要复杂的微分方程和大量的手动调参,而 AI 模型能否直接从数据中“学习”出传播规律,甚至自动跑通整个建模流程?这正是当前研究的热点。根据《Nature》的最新综述,人工智能正在重塑传染病流行病学建模,从参数推断、趋势预测到多源数据融合,AI 技术为解决传统建模中的计算瓶颈和数据难题提供了全新路径。 对于开发者、数据科学家或公共卫生领域的研究者而言,最关心的是:这套方法能不能在本地跑起来?

weixin_29051811的博客 298

FUMA实战:5分钟搞定GWAS数据中的Independent SNPs和Lead SNPs筛选

本文详细介绍了如何使用FUMA平台快速筛选GWAS数据中的Independent SNPs和Lead SNPs。通过解析核心概念、分步实战演示和结果解读,帮助研究人员在5分钟内从海量显著关联位点中提炼出独立且具代表性的遗传信号,为后续功能注释和基因定位奠定高效基础。

weixin_29201859的博客 425

ajaxFileUpload 多文件上传

前提条件: ajaxFileUpload.js插件多文件上传 步骤: 1、修改源码,(源码只支持单个文件的上传): //修改前代码------- //var oldElement = jQuery('#' + fileElementId); //var newElement = jQuery(oldElement).clone(); //jQue

枫飘瞬间 3043

1.07---共识机制详解(PoW、PoS、DPoS 对比)

【摘要】区块链能成为“无需信任的协作网络”,靠的正是它的“共识机制”。本节将深入剖析 PoW、PoS、DPoS 等核心共识模型,并结合以太坊从 PoW 到 PoS 的转型与 Solana 等新型方案,为你拆解这一决定区块链运行方式、性能、安全性的“发动机系统”。什么是共识机制?为何不是多数投票这么简单?三大主流共识算法(PoW、PoS、DPoS)机制对比与演化路线以太坊从 PoW 到 PoS 的转型细节(The Merge)Solana 的 PoH + PoS 混合共识机制解析。

鄙人kunzhi96,感恩遇见! 1万+

ajaxFileUpload.js 插件 ie9 下bug

注:这个是针对ajaxfileupload的老版本,新版本已经没有这个问题了。 今天在做图片上传的时候,调用了jQuery插件 ajaxfileupload.js 插件。但是发现在IE9下无法实现上传的功能,网上搜索半天未果。和几个同事一起分析了下,找到不支持IE9的原因。分享给大家:一、IE9 下调试发现 在IE9下执行,并报错。说明IE9认识 ActiveXObject 这个东东,而此处...

brittany2009的博客 150

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

ajaxfileupload

1jQuery.extend({2createUploadIframe:function(id,uri){//id为当前系统时间字符串,uri是外部传入的json对象的一个参数3//createframe4varframeId='jUploadFrame'+id;//给iframe添加一个独...

Tunny20121011的博客 121

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

关于ajaxfileupload.js的上传打开新页面的问题

最近在弄公司的项目用到了ajaxfileupload.js这个邪恶的js我已经被他坑过一次了 以前是不兼容ie的版本 以至于花了将近一天的时间才搞定,现在又遇到了 上传的时候会打开新的页面。在此直不在啰嗦原因:如果你的项目使用的是jquery1.4以上的则需要在ajaxfileupload.js中增加 handleError: function( s, xhr, status, e ) { ...

iteye_19737的博客 444

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

ajaxfileupload不能多次上传文件

开发室,往往遇到很多无聊的bug 例如,使用ajaxFileUpload 上传时,只能上传一次!关于这个问题,我也是搞了好久! 方法一: 借助一个点击事件来实现同个 input 多次上传,直接上代码 html 代码 <input type="file" name="fileField...

chunqibei7908的博客 311

使用ajaxFileUpload插件返回的data由于添加了pre标签无法解析

在使用ajaxFileUpload插件的时候,想必有不少人遇到返回的data由于添加了pre标签无法解析的问题,这里提供三个解决方式。我们找到源码ajaxfileupload.js文件,找到uploadHttpData函数,修改下它的返回值就可以了。uploadHttpData: function( r, type ) { var data = !type; dat...

peter_qyq的博客 879

文件上传JQuery插件 ajaxFileUpload 不严谨的bug

前言 广大的开源中国社区博友们,我是一名刚出道的java程序员,由于工作中需要做前端页面一块开发,所以在JavaScript也每天在使用,每天在学习,在我提出bug之中如果你觉得这个问题我说的不对欢迎在在下方评论区深怼我哦! 简介 我在工作中使用ajaxFileUpload这个JQuery插件...

218
上一篇: Array.prototype.slice.call()方法详解
下一篇: 绑定和解除事件的三组api
web前端狗
博客等级 码龄14年 5粉丝 55原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值