页面提交内容为两个业务逻辑,分两个程序处理,干脆就弄了两次ajax访问。其中一个ajax内有文件上传,所以便用到了html5的formData。
页面部分只用写input标签即可,类似:
<input id="isSconds" type="file" />
js部分创建formData对象,然后把input内容选中,加进去就行了。
var formData = new FormData();
var ipName= $("#isSconds").files[0]; //append三参数:1参数名(如为多文件上传,则不能重复),2文件体(用js获取),3文件名(若不写此项则为本来的文件名) formData.append("file1",fileNow[m],"我是自定义的文件名");
ajax部分
//ajax部分 if(formData!=null){ $.ajax({ url:"接收地址", type : 'POST', data : formData, // 告诉jQuery不要去处理发送的数据 processData : false, // 告诉jQuery不要去设置Content-Type请求头 contentType : false, crossDomain: true, beforeSend:function(){ console.log("上传中……"); }, success : function(data) { if(data==1){ alert("上传成功"); $("input").val(""); $("input[type='button']").attr("value","提 交"); }else{ alert("上传失败,返回信息:"+data); } }, error : function(responseStr) { console.log("error"); } }); }
后端接收,java后端SpringMVC,单文件多文件都可以处理。
@RequestMapping("/对应js中的请求接口") public void springUpload(HttpServletRequest request, HttpServletResponse response) { logger.info("文件接收!"); String isOk = "0"; String ip=null; try { // 将当前上下文初始化给 CommonsMutipartResolver (多部分解析器) CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession() .getServletContext()); // 检查form中是否有enctype="multipart/form-data" if (multipartResolver.isMultipart(request)) { // 将request变成多部分request MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request; // 获取multiRequest 中所有的文件名 @SuppressWarnings("rawtypes") Iterator iter = multiRequest.getFileNames(); // 如果目标路径文件夹不存在,则创建文件夹 boolean flag=true; while (iter.hasNext()) { String fileName=null; try { // 一次遍历所有文件 MultipartFile file = multiRequest.getFile(iter.next().toString()); if (file != null) { fileName=file.getOriginalFilename(); String path = FILEDIRECTORY(根目录) + "文件夹/" + fileName; System.out.println(path); File fileDir = new File(path); File fileParent = fileDir.getParentFile(); // 如果文件夹不存在,则创建 if (!fileParent.exists()) { fileParent.mkdirs(); } fileDir.createNewFile(); // 上传 file.transferTo(fileDir); } isOk = "1"; } catch (Exception e) { flag=false; sb.append("_"+fileName); e.printStackTrace(); } } } } catch (Exception e) { e.printStackTrace(); logger.error(e); }finally{ // 上传成功发送“1”,上传失败发送“0” response.getWriter().write(isOk); } }