ajaxfileupload.js实现文件异步上传

墨蓝 2022-09-24 11:22 216阅读 0赞

html中：

var param = $("#inputForm").serialize();
    url = $("#inputForm").attr("action");
    $.ajaxFileUpload({
    	url: url,
    	secureuri: false,
    	fileElementId: 'biCardFile'
    	dataType: 'json',
    	success: function (data,status) {
    		if (data.result == '0') {								
    			layer.alert(data.resultMsg, 1, function() {								
    				$("#searchForm", window.parent.document).attr("action","${ctx}/merchant/merchantIdentity/");
    				$("#searchForm", window.parent.document).submit();
    			});
    		} else {								
    			layer.alert(data.resultMsg);
    		}
    
    	},
    	error: function (data,status,e) {
    		layer.alert("修改失败");
    	}
    });

注意：form表单的提交方式method="post"；enctype="multipart/form-data"   
另外：有童鞋修改js代码支持多文件异步上传，区别为fileElementId后面的参数

var param = $("#inputForm").serialize();
    url = $("#inputForm").attr("action");
     $.ajaxFileUpload({
    	url: url,
    	secureuri: false,
    	fileElementId: ['biCardFile','taxCardFile','orgCardFile'],
    	dataType: 'json',
    	success: function (data,status) {
    		if (data.result == '0') {								
    			layer.alert(data.resultMsg, 1, function() {								
    				$("#searchForm", window.parent.document).attr("action","${ctx}/merchant/merchantIdentity/");
    				$("#searchForm", window.parent.document).submit();
    			});
    		} else {								
    			layer.alert(data.resultMsg);
    		}
    
    	},
    	error: function (data,status,e) {
    		layer.alert("修改失败");
    	}
    });

//修改前
    //if(fileElement == null)
    //oldElement = jQuery('#' + fileElementId[i]);
    //else
    	//oldElement = fileElement;
    //var newElement = jQuery(oldElement).clone(); 
    //jQuery(oldElement).attr('id', fileId); 
    //jQuery(oldElement).before(newElement); 
    //jQuery(oldElement).appendTo(form); 
    //修改后
    for(var i in fileElementId){
    	if(fileElement == null)
    		oldElement = jQuery('#' + fileElementId[i]);
    	else
    		oldElement = fileElement;
        var newElement = jQuery(oldElement).clone();  
        jQuery(oldElement).attr('id', fileId);  
        jQuery(oldElement).before(newElement);  
        jQuery(oldElement).appendTo(form);  
    }

修改位置大概40行左右

ajaxfileupload修改前后对比

另外，dataType=“json”可能导致不管请求成功或失败都会回调error。因为返回的json字符串被包装为<pre>json</pre>。

解决方法为：

//修改前
    //eval( "data = " + data );
    //修改后
    data = jQuery.parseJSON(jQuery(data).text());

修改位置大概215行左右

[修改版本ajaxfileupload.js下载][ajaxfileupload.js]

[ajaxfileupload.js]: http://download.csdn.net/detail/a491857321/9590025

发表评论取消回复

表情：

评论列表（有 0 条评论，216人围观）

还没有评论，来说两句吧...

相关阅读

相关 html异步文件上传代码,Ajax异步上传文件实例代码分享

非常不多说，直接给大家上干货，写的不好还请见谅。具体代码如下所示： Index $(function() \{ $(':button').click(function

逃离我推掉我的手/ 2022年10月06日 13:49/ 0 赞/ 222 阅读

相关 ajaxfileupload.js实现文件异步上传

html中： var param = $("inputForm").serialize(); url = $("inputForm").attr("actio

墨蓝/ 2022年09月24日 11:22/ 0 赞/ 217 阅读

相关 ajax分片上传,异步实现ajax的文件分片上传

序言使用到Ajax上传文件的应用场景颇多，比如上传用户头像、博客文章中插入图片、对认证用户相关身份进行校验等等很多很多。这篇文章主要介绍了关于异步实现ajax的文件分片上传

浅浅的花香味﹌/ 2022年09月03日 06:18/ 0 赞/ 268 阅读

相关 springmvc + ajaxfileupload 实现异步上传文件（图片）

最近在做一个项目需要实现异步上传图片，在网上找了很多资料后，采用了ajaxfileupload可以实现，以下是核心代码： jsp:

迷南。/ 2022年08月07日 03:58/ 0 赞/ 262 阅读

相关前端ajax异步上传文件+SpringMVC处理上传文件

mark一下以防自己以后再次遇到，也是给同行们一个参考。先说下我的需求：前端我需要给用户一个上传文件页面，用户点击上传后，不会像提交form一样跳转，而是在上传页面

本是古典何须时尚/ 2022年06月13日 00:57/ 0 赞/ 330 阅读

相关 VUE+SpringBoot实现文件异步上传

@RequestMapping("/upload") @ResponseBody public void upload(@RequestParam(

小灰灰/ 2022年05月14日 01:37/ 0 赞/ 480 阅读

相关 Ajax异步上传文件

\[b\]\[color=green\]\[size=large\]近来，项目有个小需求需要使用到Ajax异步上传文件，本来Ajax是不支持上传文件的，但是可以通过IFrame

Love The Way You Lie/ 2022年04月21日 14:58/ 0 赞/ 462 阅读

相关 ajax异步上传文件

这里主要使用前端的方法，主要用到了h5的api。使用的时候，一定要在界面上加入： <%--使用formdata来上传文件一定要注明该注释为html5--%>

太过爱你忘了你带给我的痛/ 2022年02月19日 07:09/ 0 赞/ 373 阅读

相关 springmvc异步上传及多文件上传

上传文件的基本配置等在[springmvc实现文件上传下载][springmvc]中已经写过了，在上一篇中写的是单文件上传，这一篇主要写的是多文件异步上传；应用场景：上传相

柔光的暖阳◎/ 2021年10月20日 00:00/ 0 赞/ 480 阅读

相关文件的上传（表单上传和ajax文件异步上传）

一.表单上传： html客户端部分： <form action="upload.ashx" method="post" enctype="multipart/f

亦凉/ 2021年06月26日 16:06/ 0 赞/ 659 阅读