`
屌丝学Java
  • 浏览: 28503 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用jquery的上传插件：ajaxfileupload.js实现excel文件上传

    博客分类：
  • Java
 
阅读更多
最近做的一个使用jQuery提供的上传插件，上传excel文件功能，为了看起来美观通过一个按钮<Button />的点击事件来触发文件上传标签<input type="file" />,提交的SpirngMVC 的Controller, 
<button type="button" style="height: 35px; " class="paymentBtn"  onclick="javascript:open_upload();">上传交费明细</button> 
<input type="file" id="excel_file" name="excel_file" onchange="fileSelected();" style="display:none">                    
<button type="button" style="height: 35px;display:none; width: 120px;" id="start_upload" class="sel_btn" onclick="javascript:start_upload();">开始上传</button>

<script type="text/javascript">
 //打开选择文件窗口
  function open_upload(){
	  var flag=document.getElementById("excel_file").click();
  }

 //上传文件
 function ajaxFileUpload(paymentTitle_,excel_file_,paymentYear_,paymentMonth_,paymentTimez_,paymentContent_) {
     $.ajaxFileUpload
     (
         {
             url: '${ctxPath}/upload/uploadPreview', 
             type:'POST',
             data: { 
            	 'paymentTitle': paymentTitle_,
            	 'excel_file': excel_file_,
            	 'paymentYear':paymentYear_,
            	 'paymentMonth':paymentMonth_,
            	 'paymentTimez':paymentTimez_,
            	 'paymentContent':paymentContent_
             }, 
             secureuri: false, 
             fileElementId: 'excel_file', //文件上传域的ID
             contentType: 'text/html', 
             dataType: 'text', //返回值类型 一般设置为json
             success: function (data1,status) 
             {
                 var data=eval('('+data1+')');
            	 hideLoading();
            	 if(data.success){
            		 $(".templateName").html(data.original_name);
         		 	 $("#notice").css('opacity','1');
                	 
                	 var content="";
               		 $.each(data.rList, function(i, item) {  
                		 content+="<tr><td class='col-md-1 text-center'>"+item.xuhao+"</td><td class='col-md-2 text-center'>"+
                        		  item.uuid+"</td><td class='col-md-1 text-center'>"+
                        		  item.name+"</td><td class='col-md-3 text-center'>"+
                        		  item.phonenum+"</td><td class='col-md-3 text-center'>"+
                        		  item.bzmsg+"</td><td class='col-md-2 text-center'>"+
                        		  item.feenum+"</td></tr>";    
                	  });  
         			content+="<tr><td></td><td></td><td></td><td></td><td style='text-align:right;'>总金额：</td><td class='text-center'>"+data.dangfei_total+"</td></tr>";
        		 	$('.dangfei_Wapper').show();
         			$(".dangfei_notice").html(content); 
        		 	$("#ensurediv").css('display','block');
            	 }else{
            		 sweetalert(data.msg);
            	 }
            	 
             },
             error: function(XMLHttpRequest, textStatus, errorThrown) {
				 alert(XMLHttpRequest.status);
				 alert(XMLHttpRequest.readyState);
				 alert(XMLHttpRequest.responseText);				 
				 //alert(textStatus);
				  debugger;
				  hideLoading();
            	 sweetalert('服务器开小差了...');
			   },
			   complete: function(XMLHttpRequest, textStatus) {
			       //this; // 调用本次AJAX请求时传递的options参数
			   }
             
         }
     )
     return false;
 }
</script>


dataType使用"json",contentType使用"application/json',后台返回字符串。

问题来了：1、虽然经过了SpirngMVC配置文件的设置来防止IE浏览器提示保存json文件，Controller返回json，但是在IE11下，仍然提示保存json文件。
解决办法：是页面改为text/html提交方式，后台通过response来返回响应内容。
2、jquery.min_1_9_1.js以及以后的版本，不支持ajaxfileupload.js中的browser.version属性设置
解决方法：添加jquery-browser.js 见附件。
注意页面引入顺序要注意， 
<script src="${ctxPath}/lib/jquery.min_1_9_1.js"></script>
    <script src="${ctxPath}/lib/jquery-browser.js"></script>
    <script src="${ctxPath}/lib/ajaxfileupload.js"></script>



//页面做的兼容性设置
<html lang="zh-CN">
	<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">


后台代码 
/**
	 * 上传文件信息预览
	 * 
	 * @param
	 * @return
	 * @throws IOException 
	 */
	@RequestMapping(value = "/uploadPreview", method = RequestMethod.POST)
	public void uploadPreview(
			@RequestParam(value = "excel_file", required = false) MultipartFile file,
			HttpServletRequest request, HttpServletResponse response)
			throws IOException {
		String json = "";
		Map<String, Object> resultMap = new HashMap<String, Object>();
		try {
		   json = JsonUtils.toJson(resultMap);
		} catch (Exception e) {
			// TODO: handle exception
			logger.error("uploadPreview", e);
			resultMap.put("msg", "上传出错或上传的Excel文件不合法");
			resultMap.put("success", false);
			json = JsonUtils.toJson(resultMap);
		}
		response.setContentType("text/html;charset=UTF-8");
		response.setCharacterEncoding("UTF-8");
		response.getWriter().print(json);
	}


最后还有一个问题，在IE9/IE10下有保护机制，只能通过点击上传标签来上传文件，不能通过其它按钮的触发时间来上传，否则，禁止提交文件。
解决办法：使用 <label for="excel_file" ></label>来替代Button,用其for属性来指向对应的<input type="file" id="excel_file" />标签，这样就能提交了，好奇快！
参考URL:http://blog.csdn.net/x1172031988/article/details/70142895
  • lib.rar (34.2 KB)
  • 下载次数: 4
分享到：
| ajax发送请求到Spring MVC的Controller 返 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics