Ajax无刷新上传

html如下：

<form>
	<div id="whiteListDiv" style="display: none;margin:-5px auto 10px auto;" class="form-group clearfix">
		<label><font></font></label>
		<input type="file" id="whiteList" name="whiteList" style="height: 24px; width: 500px;" />
		<input type="button" class="btn-t1" onclick="uploadList('white');" value="上传" style="width: 120px; margin-left: 20px;">
	</div>
			
				
	<div class="form-group clearfix">
		<label><font></font>是否有黑名单</label>
		<input type="file" id="blackList" name="blackList" style="height: 24px; width: 500px;" />
		<input type="button" class="btn-t1" onclick="uploadList('black');" value="上传" style="width: 120px; margin-left: 20px;">
	</div>
</form>

注意id和name属性

调用的JS方法：

function uploadList(type){
    	
    	var fileList;
    	if(type == "white"){
    		fileList = $("#whiteList").val();
    	} else {
    		fileList = $("#blackList").val();
    	}
    	
    	if(fileList == null || fileList == ""){
    		alert("请先选择文件再上传");
    		return;
    	}
    	
    	var suffix = fileList.substring(fileList.lastIndexOf("."));
    	if(suffix != ".csv" && suffix != ".CSV"){
    		alert("请选择csv格式文件");
        	return;
    	}
    	
    	var formData = new FormData($("form")[0]);
    	formData.append("idBombBannerInfo",sid);
    	formData.append("type",type);
    	
    	$.ajax({
    		url : '../../accessManagerment/uploadFileList.do',type : 'POST',data : formData,// 告诉jQuery不要去处理发送的数据
        	processData : false,// 告诉jQuery不要去设置Content-Type请求头
        	contentType : false,beforeSend:function(){
	        	//console.log("正在进行，请稍候");
        			},success : function(data) {
		        		if(data.errorMsg != null && data.errorMsg != ""){
	        				alert(data.errorMsg);
	        			} else {
	        				alert(data.resultMsg);
	        			}
        			},error : function(responseStr) { 
        				alert("上传名单出现异常");
        			} 
    	});
    	
    }

由于是ajax发起请求，界面不用刷新

后台获取参数

@RequestMapping("/accessManagerment/uploadFileList.do")
	public void uploadFileList(HttpServletRequest request,HttpServletResponse response,@RequestParam(value="whiteList",required=false) MultipartFile whiteList,@RequestParam(value="blackList",required=false) MultipartFile blackList,@RequestParam(value="idBombBannerInfo",required=false) String idBombBannerInfo,@RequestParam(value="type",required=false) String type
								) throws IOException,ParseException,CmsBusinessException,IllegalStateException,ServletException{
		CmsLogger.audit("弾屏广告-上传白名单/黑名单：[type=" + type+"][idBombBannerInfo="+"]");
		Map<String,Object> resultMap  = new HashMap<String,Object>();
		Map<String,Object> paramMap  = new HashMap<String,Object>();
		PrintWriter out = initWriter();
		out = response.getWriter();
		String result = "";
		
		if(!(idBombBannerInfo != null && !idBombBannerInfo.equals("") && type != null && !type.equals(""))){
			result = "{"errorMsg": "上传参数不能为空"}";
			return;
		}
		
		//获取产品编码
//		DefaultMultipartHttpServletRequest req = (DefaultMultipartHttpServletRequest) request;
//		String productCode = req.getParameter("productCode");
		long www = whiteList.getSize();
		long bbb = blackList.getSize();
		
		MultipartFile fileList = null;
		if(type != null && type.equals("white")){
			fileList = whiteList;
		} else {
			fileList = blackList;
		}
		try{
			if(fileList == null){
				result = "{"errorMsg": "上传文件不能为空"}";
				return;
			}
			
			//判断上传文件的格式(csv)
			String originalName = fileList.getOriginalFilename();
			String suffix = originalName.substring(originalName.lastIndexOf("."));
			if(!suffix.equalsIgnoreCase(".csv")){
				result = "{"errorMsg": "只能上传csv格式的文件"}";
				return;
			}
			
			//获取文件内容
			InputStream is = fileList.getInputStream();
			BufferedReader reader = new BufferedReader(new InputStreamReader(is));
//			String phoneStr = "";
//			String tmp = "";
//			int count = 0;		//代表上传的手机号数量
//			while((tmp = reader.readLine()) != null){
//				//仅截取每行的前11位--如果长度够11
//				if(tmp != null && tmp.length() >= 11){
//					//最多传递500个手机号
//					if(count < 500){
//						phoneStr += tmp.substring(0,11) + ",";
//						count++;
//					} else {
//						result = "{"errorMsg": "白名单上传失败 :白名单数量已超过500"}";
//						return;
//					}
//				}
//			}
//			
//			if(count == 0){
//				result = "{"errorMsg": "上传的白名单为空，请录入白名单重新上传！"}";
//				return;
//			}
//			
//			if(phoneStr.indexOf(",") > -1){
//				phoneStr = phoneStr.substring(0,phoneStr.length() - 1);
//			}
			
			//下面调用接口直接将手机号一并发送过去
//			String URL = "http://IQSZ-L1470:9091/elis_mili_shop_app/do/app/product/factory/batchSaveUserWhiteList";
			String urlSuffix = cachePropertiesUtils.getPropertyValue("mili_shop.http.app.url");
			String URL = urlSuffix + "/do/app/product/factory/batchSaveUserWhiteList";
			
			NameValuePair[] data = {
//					new NameValuePair("whilteList",phoneStr),//					new NameValuePair("operator",user.getUserUmNo())
					};
			//调用接口
			resultMap.put("resultCode","00");
			
			if(resultMap != null && resultMap.get("resultCode").equals("00")){
				//mili-shop新增成功
				/*注意添加产品的时候，也要同时添加产品配置信息*/
				result = "{"resultMsg": "上传成功"}";
				if(type.equals("white")){
					paramMap.put("isUploadWhitelist","Y");
				} else {
					paramMap.put("isUploadBlacklist","Y");
				}
				paramMap.put("sid",idBombBannerInfo);
				
				accessManagermentService.updateBombBannerStatus(paramMap);
				
			} else {
				result = "{"errorMsg": "上传失败 " + resultMap.get("resultMsg") + ""}";
				CmsLogger.audit("弾屏广告名单上传失败");
			}
			
		} catch(Exception e){
			result = "{"errorMsg": "弾屏广告名单上传失败"}";
			CmsLogger.error("BombBannerManagementController-->uploadFileList:弾屏广告名单上传失败:" + e.getMessage(),e);
		} finally {
			if (null != out) {
				out.print(result);
				out.flush();
				out.close();
			}
		}
	}

jquery引用正常，请求能正常到后台，应该就可以直接使用了，上传代码是直接可运行的。。。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!