ajaxFileUpload 异步上传文件简单使用

最新推荐文章于 2019-03-04 12:00:37 发布

shasiqq

最新推荐文章于 2019-03-04 12:00:37 发布

阅读量4.4k

点赞数

分类专栏： POI解析Excel 文章标签： ajax jquery 异步 jquery插件

本文链接：https://blog.csdn.net/shasiqq/article/details/51131995

版权

本文介绍了如何使用jQuery插件AjaxFileUpload实现异步文件上传。在jsp与js分离的架构中，详细展示了jsp页面的设置、对应的js引入，以及Controller响应方法。AjaxJson作为处理ajax响应的自定义模型类，用于数据转换。

摘要由CSDN通过智能技术生成

这里就简单介绍下ajaxFileUpload，jQuery插件AjaxFileUpload可以实现ajax文件上传。我们的项目采用的是jsp跟js分离的架构，所以代码如下。

首先是jsp部分：

<!--       <form method="post"> -->
		<input type="file" name="n_file" id="fileToUpload" value="上传表格" />
               	<button id="upload1" class="btn btn-default">上传</button>
<!-- 	   </form> -->

这里说下为什么把form注释了，因为我的jsp中已经有了另外一个form 在调试过程中发现可能有冲突就把form注释了，事实证明ajaxFileUpload 不用form表单一样可以提交，下面就是js代码部分：

$(function(){  
    //点击打开文件选择器  
    $("#upload1").on('click', function() {  
    	//选择文件之后执行上传  

        $.ajaxFileUpload({  
            url:'supplyDataReportUploadExcel', //url自己写 
            secureuri:false, //这个是啥没啥用
            type:'post',
            fileElementId:'fileToUpload',//file标签的id  
            dataType: 'json',//返回数据的类型  
            //data:{name:'logan'},//一同上传的数据  
            success: function (data, status) {  
//            	alert(data);
//            	alert(data.msg);	
//            	alert(data.success);
            	if(data.success){
            		alert("upload,success!!!");
            		window.location.href='supplyDataReport';
            	}else{
            		alert(data.msg);
            		window.location.href='s