JQuery与springmvc实现多个文件上传操作

合集下载

JQueryAjax使用SpringMVC中MultipartFile进行文件上传

JQueryAjax使⽤SpringMVC中MultipartFile进⾏⽂件上传对于⼀个带有⽂件上传的表单，后台使⽤springMVC封装的MultipartFile file接收⽂件，并且需要使⽤异步提交，并返回相应的提⽰信息使⽤JQUERY的form插件，即jquery.form.js这个插件，然后使⽤插件的ajaxSubmit⽅法；代码如下1 $("#pageForm").ajaxSubmit({2 type: "POST",3 url:"你的action.html",4 dataType: "json",5 success: function(data){6if(data.msg=='SUCCESS'){7 alert(success);8 }9else{10 alert(data.msg);11 }12 }13 });1 @RequestMapping("/insertGoodsBrand")2public void insertGoodsBrand(3 HttpServletRequest request,4 @RequestParam(value = "file", required = false) MultipartFile file,HttpServletResponse response,5 GoodsBrand goodsBrand){6 JSONObject obj = new JSONObject();7 PrintWriter out = null;8try {9 out = response.getWriter();10 String path = request.getSession().getServletContext().getRealPath(11 "upload\\goods\\brand");12 String fileName = file.getOriginalFilename();13 String saveFileName = Common.getNowCorrect2Second() + "."14 + fileName.substring(stIndexOf(".") + 1);15 File targetFile = new File(path, saveFileName);16if (!targetFile.exists()) {17 targetFile.mkdirs();18 }19 String msg = "";20 file.transferTo(targetFile);21 msg = backGoodsBrandBus.insertGoodsBrand(goodsBrand, saveFileName);22if (msg.equals("SUCCESS")) {23 obj.put("msg", msg);24 } else {25 obj.put("msg", msg);26 }27 out.print(obj);28 } catch (Exception e) {29 e.printStackTrace();30 }31finally{32 out.close();33 }34 }。

SpringMVC上传大文件的三种解决方案

SpringMVC上传⼤⽂件的三种解决⽅案⽂件夹数据库处理逻辑public class DbFolder{JSONObject root;public DbFolder(){this.root = new JSONObject();this.root.put("f_id", "");this.root.put("f_nameLoc", "根⽬录");this.root.put("f_pid", "");this.root.put("f_pidRoot", "");}/*** 将JSONArray转换成map* @param folders* @return*/public Map<String, JSONObject> toDic(JSONArray folders){Map<String, JSONObject> dt = new HashMap<String, JSONObject>();for(int i = 0 , l = folders.size();i<l;++i){JSONObject o = folders.getJSONObject(i);String id = o.getString("f_id");dt.put(id, o);}return dt;}public Map<String, JSONObject> foldersToDic(String pidRoot){//默认加载根⽬录String sql = String.format("select f_id,f_nameLoc,f_pid,f_pidRoot from up6_folders where f_pidRoot='%s'", pidRoot); SqlExec se = new SqlExec();JSONArray folders = se.exec("up6_folders", sql, "f_id,f_nameLoc,f_pid,f_pidRoot","");return this.toDic(folders);}public ArrayList<JSONObject> sortByPid( Map<String, JSONObject> dt, String idCur, ArrayList<JSONObject> psort) {String cur = idCur;while (true){//key不存在if (!dt.containsKey(cur)) break;JSONObject d = dt.get(cur);//查⽗IDpsort.add(0, d);//将⽗节点排在前⾯cur = d.getString("f_pid").trim();//取⽗级IDif (cur.trim() == "0") break;if ( StringUtils.isBlank(cur) ) break;}return psort;}public JSONArray build_path_by_id(JSONObject fdCur) {String id = fdCur.getString("f_id").trim();//String pidRoot = fdCur.getString("f_pidRoot").trim();////根⽬录ArrayList<JSONObject> psort = new ArrayList<JSONObject>();if (StringUtils.isBlank(id)){psort.add(0, this.root);return JSONArray.fromObject(psort);}//构建⽬录映射表(id,folder)Map<String, JSONObject> dt = this.foldersToDic(pidRoot);//按层级顺序排列⽬录psort = this.sortByPid(dt, id, psort);SqlExec se = new SqlExec();//是⼦⽬录->添加根⽬录if (!StringUtils.isBlank(pidRoot)){JSONObject root = se.read("up6_files", "f_id,f_nameLoc,f_pid,f_pidRoot", new SqlParam[] { new SqlParam("f_id", pidRoot) });psort.add(0, root);}//是根⽬录->添加根⽬录else if (!StringUtils.isBlank(id) && StringUtils.isBlank(pidRoot)){JSONObject root = se.read("up6_files", "f_id,f_nameLoc,f_pid,f_pidRoot", new SqlParam[] { new SqlParam("f_id", id) });psort.add(0, root);}psort.add(0, this.root);return JSONArray.fromObject(psort);}public FileInf read(String id) {SqlExec se = new SqlExec();String sql = String.format("select f_pid,f_pidRoot,f_pathSvr from up6_files where f_id='%s' union select f_pid,f_pidRoot,f_pathSvr from up6_folders where f_id='%s'", id,id);JSONArray data = se.exec("up6_files", sql, "f_pid,f_pidRoot,f_pathSvr","");JSONObject o = (JSONObject)data.get(0);FileInf file = new FileInf();file.id = id;file.pid = o.getString("f_pid").trim();file.pidRoot = o.getString("f_pidRoot").trim();file.pathSvr = o.getString("f_pathSvr").trim();return file;}public Boolean exist_same_file(String name,String pid){SqlWhereMerge swm = new SqlWhereMerge();swm.equal("f_nameLoc", name.trim());swm.equal("f_pid", pid.trim());swm.equal("f_deleted", 0);String sql = String.format("select f_id from up6_files where %s ", swm.to_sql());SqlExec se = new SqlExec();JSONArray arr = se.exec("up6_files", sql, "f_id", "");return arr.size() > 0;}/*** 检查是否存在同名⽬录* @param name* @param pid* @return*/public Boolean exist_same_folder(String name,String pid){SqlWhereMerge swm = new SqlWhereMerge();swm.equal("f_nameLoc", name.trim());swm.equal("f_deleted", 0);swm.equal("LTRIM (f_pid)", pid.trim());String where = swm.to_sql();String sql = String.format("(select f_id from up6_files where %s ) union (select f_id from up6_folders where %s)", where,where);SqlExec se = new SqlExec();JSONArray fid = se.exec("up6_files", sql, "f_id", "");return fid.size() > 0;}public Boolean rename_file_check(String newName,String pid){SqlExec se = new SqlExec();JSONArray res = se.select("up6_files", "f_id",new SqlParam[] {new SqlParam("f_nameLoc",newName),new SqlParam("f_pid",pid)},"");return res.size() > 0;}public Boolean rename_folder_check(String newName, String pid){SqlExec se = new SqlExec();JSONArray res = se.select("up6_folders", "f_id", new SqlParam[] {new SqlParam("f_nameLoc",newName),new SqlParam("f_pid",pid)},"");return res.size() > 0;}public void rename_file(String name,String id) {SqlExec se = new SqlExec();se.update("up6_files", new SqlParam[] { new SqlParam("f_nameLoc", name) }, new SqlParam[] { new SqlParam("f_id", id) });}public void rename_folder(String name, String id, String pid) {SqlExec se = new SqlExec();se.update("up6_folders", new SqlParam[] { new SqlParam("f_nameLoc", name) }, new SqlParam[] { new SqlParam("f_id", id) });}}1.在webuploader.js⼤概4880⾏代码左右，在动态⽣成的input组件的下⾯（也可以直接搜索input），增加webkitdirectory属性。

springmvc文件上传

一、单个文件上传，除了常规引用jar包外，还需要在spring配置文件中加上如下的配置：第一步：<bean id="multipartResolver"class="monsMultipart Resolver"><property name="defaultEncoding"value="utf-8"></property><property name="maxUploadSize"value="10485760000"></property><property name="maxInMemorySize"value="40960"></property> </bean>第二步：Upload.jsp<form action="udLoad/upload.do"method="post"enctype="multipart/form-data">选择:<input type="file"name="myfile"id="myfile"><br/><input type="submit"value="提交"></form>第三步：controller@RequestMapping("/upload")public String upload(Model model, HttpServletRequest request, //此时传的是参数，不是对象@RequestParam(value = "myfile") MultipartFile multipartFile)throws IOException {System.out.println("进入该方法");// 获取上传的文件保存的路径String path =request.getSession().getServletContext().getRealPath("upload");// 获取上传的文件的名称String filename = multipartFile.getOriginalFilename();//创建文件夹uploadFile targetFile = new File(path, filename);//判断文件夹是否已经存在，如果已经存在了重新建if (!targetFile.exists()) {targetFile.mkdirs();}multipartFile.transferTo(targetFile);model.addAttribute("fileUrl", request.getContextPath() +"/upload/" + filename);return"voteCount/result";}。

基于jQueryEasyUI框架的动态多文件上传的实现

基于jQueryEasyUI框架的动态多文件上传的实现作者：谷洪彬来源：《计算机时代》2017年第09期摘要：很多Web应用系统需要多文件上传功能，实际需求中文件个数并不固定，所以需要系统提供动态添加文件上传文本框功能，这样的功能可以通过JavaScript或者jQuery实现。

为了增强用户友好性，文章用jQuery EasyUI框架实现了多文件上传的界面，并解决了实现过程中遇到的各种问题。

关键词：动态的文件上传； jQuery EasyUI框架；用户友好性； Web应用系统中图分类号：TP311 文献标志码：A 文章编号：1006-8228（2017）09-45-03Abstract： Many Web applications need the function of multiple file upload， but the actual demanded number of files is not fixed， so require the system to provide a text box for dynamically adding the files to be uploaded， and this function can be realized by JavaScript or jQuery. In order to enhance the user friendliness， this paper implements the multi-file upload interface with the jQuery EasyUI framework， and solves various problems encountered in the implementation process.Key words： multi-file upload； jQuery EasyUI framework； user friendliness； Web application system0 引言包括OA和CMS在内的很多Web应用系统需要多文件上传功能[1-2]，由于实际应用中文件个数不能实现确定，就需要为用户提供动态添加功能，动态添加文件文本框可以通过JavaScript或者jQuery实现。

用jQuery实现文件的上传，后台为spring+mybatis

⽤jQuery实现⽂件的上传，后台为spring+mybatis 1.⾸先为html代码以及js代码<div id="uploadDiv" style="display:none;"><span class="btn btn-success fileinput-button"><i class="glyphicon glyphicon-plus"></i><span>⽂件选择</span><input id="fileupload" type="file" name="file"></span><button id="uploadBtn" class="btn btn-primary disabled">确认上传</button><br><div id="progress" class="progress"><div class="progress-bar progress-bar-success"></div></div><div id="msgDiv" class="files"></div></div>$("#uploadBtn").click(function(){var dialog = $("#uploadDiv").clone().dialog({title: "附件上传",width : '75%',height : 500,modal : true});$('#fileupload', dialog).fileupload({dataType: 'json',progressall: function (e, data) {var progress = parseInt(data.loaded / data.total * 100, 10);$('#progress .progress-bar', dialog).css('width',progress + '%').html(progress + '%');$("#msgDiv", dialog).html("处理中……");},add: function (e, data) {data.url = "ra/suspiciousCase/uploadTotal";data.submit();$("#uploadBtn", dialog).off('click').on('click', function () {var id = getUrlParam('id');data.url = "ra/suspiciousCase/upload?id="+id;data.submit();setTimeout(function(){handleUploadTable();}, 3000);//延迟执⾏刷新});},done: function (e, data) {var isTotal = data.url.indexOf("uploadTotal") > -1;var tip = isTotal ? "解析成功，请点击“确认上传”" : "上传";var result = data.result;var msg = "<b>" + tip + "</b>"var bar = $('#progress .progress-bar');bar.removeClass("progress-bar-warning progress-bar-success");if(!result.success){msg = "<b>" + tip + "失败：</b>"+result.error;bar.addClass("progress-bar-warning");$("#uploadBtn", dialog).addClass("disabled");}else{bar.addClass("progress-bar-success");msg = "<b>" + tip + "成功：</b>";if(isTotal){$("#uploadBtn", dialog).removeClass("disabled");}}if(result.totalInfo){msg += "<br>";msg += "<b>提⽰信息：</b>" + result.totalInfo;}msg += "<br><b>⽂件名称：</b>" + data.files[0].name;$("#msgDiv", dialog).html(msg);}})})再来是后台代码@Path("/upload")@POST@NoCache@Consumes("multipart/form-data")public ExtJSResponse upload(@Context HttpServletRequest request) {ExtJSResponse resp = new ExtJSResponse(true);final String id = request.getParameter("id");final AmlSuspectcaseAttach attach = new AmlSuspectcaseAttach();boolean isMultipart= ServletFileUpload.isMultipartContent(request);if(isMultipart){//构造⼀个⽂件上传处理对象FileItemFactory factory = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(factory);@SuppressWarnings("rawtypes")Iterator items;try{checkPermission(Permissions.AML_SUSPECT_CASE);//解析表单中提交的所有⽂件内容items = upload.parseRequest(request).iterator();while(items.hasNext()){FileItem item = (FileItem) items.next();if(!item.isFormField()){//取出上传⽂件的⽂件名称String name = item.getName();("上传⽂件的⼤⼩为：[{}]",item.getSize());//取得上传⽂件以后的存储路径final String suffix = name.substring(stIndexOf('.') + 1, name.length());int fsize = fileSize*1024*1024;if(fileSuffix.contains(suffix)){if(item.getSize() < fsize){Long attachId = null;if(!StringUtils.isEmpty(name)){attach.setName(name);}if(!StringUtils.isEmpty(id)){attach.setCaseid(Long.parseLong(id));attachId = suspectCase.insertAttch(attach);System.out.println("attach:"+attachId);}if(resp.isSuccess()){//上传⽂件以后的存储路径("上传⽂件：[{}]",attachId+"."+suffix);String Path= amlPath + File.separatorChar + attachId;File file =new File(amlPath);//如果⽂件夹不存在则创建if (!file.exists() && !file.isDirectory()){file.mkdir();}//上传⽂件("上传⽂件的路径为：[{}]",Path);File uploaderFile = new File(Path);item.write(uploaderFile);}}else{("上传⽂件⼤⼩不能超过2M");resp.setSuccess(false);resp.setErrorMsg("上传⽂件⼤⼩不能超过2M");}}else{("⽂件格式不正确，请选择doc、docx、xls、xlsx、png、gif、jpg、jpeg、bmp后缀⽂件！");resp.setSuccess(false);resp.setErrorMsg("⽂件格式不正确，请选择doc、docx、xls、xlsx、png、gif、jpg、jpeg、bmp后缀⽂件！"); }}}}catch(Exception e){e.printStackTrace();resp.setSuccess(false);resp.setErrorMsg("⽂件上传失败");}}return resp;}@Path("/uploadTotal")@POST@NoCache@Consumes("multipart/form-data")public ExtJSResponse uploadTotal(@Context HttpServletRequest request) {ExtJSResponse resp = new ExtJSResponse(true);@SuppressWarnings("unused")InputStream instream = null;try {checkPermission(Permissions.AML_SUSPECT_CASE);ServletFileUpload upload = new ServletFileUpload();FileItemIterator fileIterator = upload.getItemIterator(request);while (fileIterator.hasNext()) {FileItemStream item = fileIterator.next();if ("file".equals(item.getFieldName())){instream = item.openStream();break;}}StringBuilder total = new StringBuilder();resp.put("totalInfo", total);} catch (Exception e) {getLogger().warn(e.getMessage(), e);resp.setSuccess(false);resp.setErrorMsg(e.getLocalizedMessage());}return resp;}其中uploadTotal⽅法是在⽂件上传之前先对⽂件进⾏解析，下⾯贴上我的上传效果图，我这⾥是⽤的frame弹窗解析完再点击确认上传之后就完成了。

聊一聊jquery文件上传（支持多文件上传）

聊⼀聊jquery⽂件上传（⽀持多⽂件上传）谈到⽂件上传，现在⼀般都⽤现成的组件可以使⽤。

PC端的可以使⽤uploadify。

针对微⽹站H5也有uploadifive。

但是这组件并不能满⾜各种场景的需求，例如：预览切图放⼤缩⼩,取消之类的。

普通上传HTML:<form action="Upload"method="post" enctype="multipart/form-data"><input id="File1"name="fileupload" type="file" value="" /><input id="" type="submit" value="上传" /></form>服务端：[HttpPost]public JsonResult Upload(){if (Request.Files.Count > 0){if (Request.Files.Count == 1){HttpPostedFileBase file = Request.Files[0];if (file.ContentLength > 0){string title = string.Empty;title = DateTime.Now.ToString("yyyyMMddHHmmss") + "_" + Path.GetFileName(file.FileName);string path = "../UploadFile/" + title;path = System.Web.HttpContext.Current.Server.MapPath(path);file.SaveAs(path);return Json(new { status = true, url = path });}}else{string[] urllist = new string[Request.Files.Count];for (int i = 0; i < Request.Files.Count; i++){HttpPostedFileBase file = Request.Files[i];if (file.ContentLength > 0){string title = string.Empty;title = DateTime.Now.ToString("yyyyMMddHHmmss") + "_" + Path.GetFileName(file.FileName);string path = "../UploadFile/" + title;path = System.Web.HttpContext.Current.Server.MapPath(path);file.SaveAs(path);urllist[i] = path;}}return Json(new { status = true, url = urllist });}}else{return Json(new { status = false, url = "",msg="没有⽂件" });}return Json(new { status = false, url = "",msg=""});}后端代码没什么不同的，⼀直就是如此主要是前端html，我标记为红⾊字体的属性⼀个都不能少，少⼀个都不可能完成上传action作⽤：该属性的值指向要提交到某⼀个页⾯,缺少它会不知道提交给谁可以提交的页⾯：abc.aspx abc.ashx mvc的控制器⽅法 webapi接⼝以及其他后端处理程序method作⽤：该属性的值决定以何种⽅式提交,缺少它会报404可以取的值：post get put deleteenctype作⽤：指定类型缺少它在后台接收时⽂件并不会包含进去可以取的值：multipart/form-data application/x-www-form-urlencoded text/plain 此处必须使⽤ multipart/form-data才能将⽂件传到服务端nameinput file ⾥⾯必须包含name属性才能够将⽂件传递到服务器,具体原因不知道,有兴趣的可以尝试下如果有知道的⿇烦解惑相信到了这⾥你⼀定可以完成上传⽂件操作了！⽂件类型筛选能完成基本的⽂件上传操作之后，我们会对它有更多的要求，⽐如：⽂件筛选相信⼤家都不愿意让⼈什么类型的⽂件都往服务器上传，万⼀是病毒或者脚本之类的就⿇烦⼤了。

jQuery上传文件的方法

jQuery上传⽂件的⽅法<div id="login-form"><form id="uploadSongsForm" enctype="multipart/form-data"><div id="showMp3Files" class="tittle"><div class=" form-group"><input type="file" name="file" id="mp3Files"></div><div class=" form-group"><button type="reset" id="clearmp3" class="btn btn-dark">清除选择歌曲</button></div><div class=" form-group"><input type="submit" value="上传" id="uploadBtn" class=" btn btn-primary"></div></div></form>jq代码$("#uploadSongsForm").submit(function () {$.post("/upload",{file:file},function (info) {if(info.flag){alert(info.msg)}else{//添加失败alert(info.msg);}});return false;});controller代码private static final org.slf4j.Logger LOGGER = LoggerFactory.getLogger(FileUploadController.class);@GetMapping("/upload")public String upload() {return "upload";}@PostMapping("/upload")@ResponseBodypublic ResultInfo upload(@RequestParam("file") MultipartFile file) {ResultInfo info=new ResultInfo();info.setFlag(false);if (file.isEmpty()) {info.setMsg("⽂件为空");info.setFlag(false);return info;}String fileName = file.getOriginalFilename();String filePath = "/mp3/";System.out.println("⽂件名:"+fileName);File dest = new File(filePath + fileName);try {file.transferTo(dest);("succeed");info.setFlag(true);info.setMsg("上传成功");return info;} catch (IOException e) {LOGGER.error(e.toString(), e);}info.setMsg("上传失败");return info;}就我的猜测是jq段肯定是有错误的。

jquery.multifile多文件上传

Jquery使用插件实现多文件同时上传的功能需要用到的相关jar包和第三方插件分别为：jquery-1.4.2.min.js,jquery.MultiFile.js,commons-io-1.4.jar,commons-fi leupload-1.2.1.jar引入相关的js和jar文件即可开始上传的操作：//此处的上传没有判断文件上传的类型，因为使用了jquery的插件，所以此处的上传类型在前台的页面做控制final long MAX_SIZE = 3 * 1024 * 1024;// 设置上传文件最大为 3M response.setContentType("text/html");// 设置字符编码为UTF-8, 这样支持汉字显示response.setCharacterEncoding("GBK");// 实例化一个硬盘文件工厂,用来配置上传组件ServletFileUpload DiskFileItemFactory dfif = new DiskFileItemFactory();dfif.setSizeThreshold(4096);// 设置上传文件时用于临时存放文件的内存大小,这里是4K.多于的部分将临时存在硬盘dfif.setRepository(new File("c:\\"));// 设置存放临时文件的目录,web根目录下的ImagesUploadTemp目录// 用以上工厂实例化上传组件ServletFileUpload sfu = new ServletFileUpload(dfif);// 设置最大上传尺寸sfu.setSizeMax(MAX_SIZE);// 从request得到所有上传域的列表List fileList = null;try {fileList = sfu.parseRequest(request);} catch (FileUploadException e) {// 处理文件尺寸过大异常if (e instanceof SizeLimitExceededException) {out.println("文件尺寸超过规定大小:" + MAX_SIZE + "字节<p />"); out.println("<a href=\"upload.html\" target=\"_top\">返回</a>"); return;}e.printStackTrace();}// 没有文件上传if (fileList == null || fileList.size() == 0) {out.println("请选择上传文件<p />");out.println("<a href=\"upload_sence.jsp\" target=\"_top\">返回</a>");return;}// 得到所有上传的文件Iterator fileItr = fileList.iterator();// 循环处理所有文件while (fileItr.hasNext()) {FileItem fileItem = null;String fpath = "";long size = 0;// 得到当前文件fileItem = (FileItem) fileItr.next();if (fileItem.isFormField()) {//如果不是上传域，而是普通的表单域(如：<input type="text|radio">)则在此进行处理}// 忽略简单form字段而不是上传域的文件域(<input type="text" />等) if (fileItem == null || fileItem.isFormField()) {continue;}// 得到文件的完整路径fpath = fileItem.getName();// 得到文件的大小size = fileItem.getSize();if ("".equals(fpath) || size == 0) {out.println("请选择上传文件<p />");out.println("<a href=\"upload_sence.jsp\" target=\"_top\">返回</a>");return;}// 得到去除路径的文件名String t_name = fpath.substring(stIndexOf("\\") + 1);// 得到文件的扩展名(无扩展名时将得到全名)String t_ext = t_name.substring(t_stIndexOf(".") + 1);// 根据系统时间生成上传后保存的文件名//String prefix = String.valueOf(now);// 保存的最终文件完整路径,保存在web根目录下的ImagesUploaded目录下String u_name = request.getRealPath("/") + "uploaded\\" + t_name + "." + t_ext;File file = new File(u_name);fileItem.write(file);out.println("文件上传成功. 已保存为: " + t_name + "." + t_ext+ "   文件大小: " + size + "字节<p />");out.println("<a href=\"upload_sence.jsp\" target=\"_top\">继续上传</a>");}PS:如果你上传文件时需要使用当前时间的毫秒数来做上传文件的文件名，那么请不要使用此种方式上传，因为该方式可以让用户通过一个文本域同时上传多个文件，而多个文件是同时进行上传操作的，所以在同一时间内最后一个上传的文件很可能会将前边的文件覆盖掉，造成文件的丢失相应的上传页面代码如下:<%@ page language="java" contentType="text/html; charset=GBK"pageEncoding="GBK"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><title>JQeury多文件上传测试</title><!--引入jquery的主文件和上传的插件,注意下方蓝色文件显示的地方，只有使用了jquery相关插件的时候才可以这样写，其中class="multi"指定了该域可以使用jquery插件特有的属性，accept="gif|jpg"表示允许的上传文件类型，多个类型之间用|进行分割。

spring mvc 多文件上传

1.后台/* =============文件上传================ */MultipartHttpServletRequestmultipartRequest = (MultipartHttpServletRequest) request;String sep =System.getProperty("file.separator");Map files = multipartRequest.getFileMap(); Iterator fileNames =multipartRequest.getFileNames();StringBuffer sb = new StringBuffer();boolean flag = false;String fileDir = “E:/upload”+ sep + System.currentTimeMillis();// 存放文件文件夹名称for (; fileNames.hasNext();) {String filename = (String)fileNames.next();CommonsMultipartFile file = (CommonsMultipartFile) files.get(filename);byte[] bytes = file.getBytes();if (bytes.length != 0) {// 说明申请有附件if (!flag) {File dirPath = new File(fileDir);if (!dirPath.exists()) {flag = dirPath.mkdirs();}}String fileTrueName =file.getOriginalFilename();File uploadedFile = new File(fileDir + sep + fileTrueName);FileCopyUtils.copy(bytes, uploadedFile);sb.append(fileTrueName).append(","); }}2.页面:代码: <p><input type="file"size="50"name="file0"/></p><%--多个文件表但name="file"不能相同，否则文件会被覆盖 --%><p><inputtype="file"size="50"name="file1"/></p>3.中间的配置就不写了,spring mvc基础可以同时上传多文件,写的不是很详细随笔一纪录,可留言共同讨论。

SpringMVC文件上传配置，多文件上传，使用的MultipartFile的实例

SpringMVC⽂件上传配置，多⽂件上传，使⽤的MultipartFile的实例基本的SpringMVC的搭建在我的上⼀篇⽂章⾥已经写过了，这篇⽂章主要说明⼀下如何使⽤SpringMVC进⾏表单上的⽂件上传以及多个⽂件同时上传的步骤⼀、配置⽂件：SpringMVC ⽤的是的MultipartFile来进⾏⽂件上传所以我们⾸先要配置MultipartResolver:⽤于处理表单中的file<beans:bean id="multipartResolver" class="monsMultipartResolver"p:defaultEncoding="UTF-8"p:maxUploadSize="5400000"p:uploadTempDir="fileUpload/temp"></beans:bean>其中属性详解：defaultEncoding="UTF-8" 是请求的编码格式，默认为iso-8859-1maxUploadSize="5400000" 是上传⽂件的⼤⼩，单位为字节uploadTempDir="fileUpload/temp" 为上传⽂件的临时路径⼆、创建⼀个简单的上传表单：<body><h2>⽂件上传实例</h2><form action="fileUpload.html" method="post" enctype="multipart/form-data">选择⽂件:<input type="file" name="file"><input type="submit" value="提交"></form></body>注意要在form标签中加上enctype="multipart/form-data"表⽰该表单是要处理⽂件的,这是最基本的东西，很多⼈会忘记然⽽当上传出错后则去找程序的错误，却忘了这⼀点三、编写上传控制类1、创建⼀个控制类: FileUploadController和⼀个返回结果的页⾯list.jsp2、编写提交表单的action://通过Spring的autowired注解获取spring默认配置的request@Autowiredprivate HttpServletRequest request;/**** 上传⽂件⽤@RequestParam注解来指定表单上的file为MultipartFile** @param file* @return*/@RequestMapping("fileUpload")public String fileUpload(@RequestParam("file") MultipartFile file) {// 判断⽂件是否为空if (!file.isEmpty()) {try {// ⽂件保存路径String filePath = request.getSession().getServletContext().getRealPath("/") + "upload/"+ file.getOriginalFilename();// 转存⽂件file.transferTo(new File(filePath));} catch (Exception e) {e.printStackTrace();}}// 重定向return "redirect:/list.html";}/**** 读取上传⽂件中得所有⽂件并返回** @return*/@RequestMapping("list")public ModelAndView list() {String filePath = request.getSession().getServletContext().getRealPath("/") + "upload/";ModelAndView mav = new ModelAndView("list");File uploadDest = new File(filePath);String[] fileNames = uploadDest.list();for (int i = 0; i < fileNames.length; i++) {//打印出⽂件名System.out.println(fileNames[i]);}return mav;}3、使⽤SpringMVC注解RequestParam来指定表单中的file参数；4、指定⼀个⽤于保存⽂件的web项⽬路径5、通过MultipartFile的transferTo(File dest)这个⽅法来转存⽂件到指定的路径。

Spring MVC uploadify2.1批量文件、图片上传

Spring MVC uploadify2.1批量文件、图片上传今天在做一个批量上传图片的需求，google下，觉得uploadify在jquery的上传控件还是挺不错，特写下怎么使用。

1、下载资源包，2.1.0整理，免费分享地址/detail/dracotianlong/52321222、需要的资源(1)：jquery-1.3.2.min.js(2)：jquery.uploadify.v2.1.0.min.js(3)：swfobject.js(4)：uploadify.css(5)：uploadify.swf3、页面引用4、使用[javascript] view plaincopyprint?$(document).ready(function() {$("#multiple_file_upload").uploadify({'uploader' :'${base}/thirdparty/uploadify/uploadify.swf?random=' + (new Date()).getTime(),'cancelImg' :'${base}/thirdparty/uploadify/cancel.png','script' :'../common/o_multiple_upload.do',//要提交到的处理文件上传的PHP文件'auto' : false, //是否自动开始'multi' : true, //是否支持多文件上传'buttonText' : 'browe', //按钮上的文字'simUploadLimit' : 1000, //一次同步上传的文件数目'sizeLimit' : 19871202, //设置单个文件大小限制'queueSizeLimit' : 1000, //队列中同时存在的文件个数限制'fileDesc' : '支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性，那么这个属性是必须的'fileExt' : '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式onComplete: function (event, queueID, fileObj, response, data) {//$('').appendTo('.files').text(response);var picIndexPlus = picIndex++;var uploadPath =response;$('#picBefore').before(picTpl(picIndexPlus));var uploadImgPathId = "uploadImgPath" + (picIndexPlus);document.getElementById(uploadImgPathId).value=uploadPath;},onError: function(event, queueID, fileObj) {alert("文件:" + + "上传失败");},onCancel: function(event, queueID, fileObj){//alert("取消了" + );}});});$(document).ready(function() {$("#multiple_file_upload").uploadify({'uploader' :'${base}/thirdparty/uploadify/uploadify.swf?random=' + (new Date()).getTime(),'cancelImg' :'${base}/thirdparty/uploadify/cancel.png','script' :'../common/o_multiple_upload.do',//要提交到的处理文件上传的PHP文件'auto' : false, //是否自动开始'multi' : true, //是否支持多文件上传'buttonText' : 'browe', //按钮上的文字'simUploadLimit' : 1000, //一次同步上传的文件数目'sizeLimit' : 19871202, //设置单个文件大小限制'queueSizeLimit' : 1000, //队列中同时存在的文件个数限制'fileDesc' : '支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性，那么这个属性是必须的'fileExt' : '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式onComplete: function (event, queueID, fileObj, response, data) {//$('').appendTo('.files').text(response);var picIndexPlus = picIndex++;var uploadPath =response;$('#picBefore').before(picTpl(picIndexPlus));var uploadImgPathId = "uploadImgPath" + (picIndexPlus);document.getElementById(uploadImgPathId).value=uploadPath;},onError: function(event, queueID, fileObj) {alert("文件:" + + "上传失败");},onCancel: function(event, queueID, fileObj){//alert("取消了" + );}});});5、后台代码Java代码[java] view plaincopyprint?/*** 批量上传图片** @param filename 文件名* @param uploadNum 上传数量* @param mark* @param file 文件流* @param request* @param model* @return* @throws Exception*/@RequestMapping(value = "/common/o_multiple_upload.do") public @ResponseBodyString executeMultiple(String filename, Integer uploadNum, Boolean mark, HttpServletRequest request,HttpServletResponse response, ModelMap model) throws Exception{MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;Map fileMap = multipartRequest.getFileMap();// 存储fileUrlList uploadPaths = new ArrayList();String fileUrl = null;for (Map.Entry entity : fileMap.entrySet()){// 获取MulipartFile对象MultipartFile file = entity.getValue();WebErrors errors = validate(filename, file, request);if (errors.hasErrors()){model.addAttribute(ERROR, errors.getErrors().get(0));return RESULT_PAGE;}CmsSite site = CmsUtils.getSite(request);MarkConfig conf = site.getConfig().getMarkConfig();if (mark == null){mark = conf.getOn();}// 上传文件名String origName = file.getOriginalFilename();String ext =FilenameUtils.getExtension(origName).toLowerCase(Locale.ENGLISH);try{if (site.getConfig().getUploadToDb()){String dbFilePath = site.getConfig().getDbFileUri();if (!StringUtils.isBlank(filename)){filename = filename.substring(dbFilePath.length());if (mark){File tempFile = mark(file, conf);fileUrl = dbFileMng.storeByFilename(filename, new FileInputStream(tempFile));tempFile.delete();}else{fileUrl = dbFileMng.storeByFilename(filename,file.getInputStream());}}else{if (mark){File tempFile = mark(file, conf);fileUrl = dbFileMng.storeByExt(site.getUploadPath(), ext, new FileInputStream(tempFile));tempFile.delete();}else{fileUrl = dbFileMng.storeByExt(site.getUploadPath(), ext, file.getInputStream());}// 加上访问地址fileUrl = request.getContextPath() + dbFilePath + fileUrl;}}else if (site.getUploadFtp() != null){Ftp ftp = site.getUploadFtp();String ftpUrl = ftp.getUrl();if (!StringUtils.isBlank(filename)){filename = filename.substring(ftpUrl.length());if (mark){File tempFile = mark(file, conf);fileUrl = ftp.storeByFilename(filename, newFileInputStream(tempFile));tempFile.delete();}else{fileUrl = ftp.storeByFilename(filename, file.getInputStream());}}else{if (mark){File tempFile = mark(file, conf);fileUrl = ftp.storeByExt(site.getUploadPath(), ext, new FileInputStream(tempFile));tempFile.delete();}else{fileUrl = ftp.storeByExt(site.getUploadPath(), ext,file.getInputStream());}// 加上url前缀fileUrl = ftpUrl + fileUrl;}}else{String ctx = request.getContextPath();if (!StringUtils.isBlank(filename)){filename = filename.substring(ctx.length());if (mark){File tempFile = mark(file, conf);fileUrl = fileRepository.storeByFilename(filename, tempFile);tempFile.delete();}else{fileUrl = fileRepository.storeByFilename(filename, file);}}else{if (mark){File tempFile = mark(file, conf);fileUrl = fileRepository.storeByExt(site.getUploadPath(), ext, tempFile);tempFile.delete();}else{fileUrl = fileRepository.storeByExt(site.getUploadPath(), ext, file);}// 加上部署路径fileUrl = ctx + fileUrl;}}fileMng.saveFileByPath(fileUrl, origName, false);uploadPaths.add(fileUrl);model.addAttribute("uploadNum", uploadNum);}catch (IllegalStateException e){model.addAttribute(ERROR, e.getMessage());log.error("upload file error!", e);}catch (IOException e){model.addAttribute(ERROR, e.getMessage());log.error("upload file error!", e);}catch (Exception e){model.addAttribute(ERROR, e.getMessage());log.error("upload file error!", e);}}// model.addAttribute("uploadPaths", uploadPaths); return fileUrl;}/*** 批量上传图片** @param filename 文件名* @param uploadNum 上传数量* @param mark* @param file 文件流* @param request* @param model* @return* @throws Exception*/@RequestMapping(value = "/common/o_multiple_upload.do")public @ResponseBodyString executeMultiple(String filename, Integer uploadNum, Boolean mark, HttpServletRequest request,HttpServletResponse response, ModelMap model) throws Exception{MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;Map fileMap = multipartRequest.getFileMap();// 存储fileUrlList uploadPaths = new ArrayList();String fileUrl = null;for (Map.Entry entity : fileMap.entrySet()){// 获取MulipartFile对象MultipartFile file = entity.getValue();WebErrors errors = validate(filename, file, request);if (errors.hasErrors()){model.addAttribute(ERROR, errors.getErrors().get(0));return RESULT_PAGE;}CmsSite site = CmsUtils.getSite(request);MarkConfig conf = site.getConfig().getMarkConfig();if (mark == null){mark = conf.getOn();}// 上传文件名String origName = file.getOriginalFilename();String ext =FilenameUtils.getExtension(origName).toLowerCase(Locale.ENGLISH);try{if (site.getConfig().getUploadToDb()){String dbFilePath = site.getConfig().getDbFileUri();if (!StringUtils.isBlank(filename)){filename = filename.substring(dbFilePath.length());if (mark)File tempFile = mark(file, conf);fileUrl = dbFileMng.storeByFilename(filename, new FileInputStream(tempFile));tempFile.delete();}else{fileUrl = dbFileMng.storeByFilename(filename,file.getInputStream());}}else{if (mark){File tempFile = mark(file, conf);fileUrl = dbFileMng.storeByExt(site.getUploadPath(), ext, new FileInputStream(tempFile));tempFile.delete();}else{fileUrl = dbFileMng.storeByExt(site.getUploadPath(), ext, file.getInputStream());// 加上访问地址fileUrl = request.getContextPath() + dbFilePath + fileUrl;}}else if (site.getUploadFtp() != null){Ftp ftp = site.getUploadFtp();String ftpUrl = ftp.getUrl();if (!StringUtils.isBlank(filename)){filename = filename.substring(ftpUrl.length());if (mark){File tempFile = mark(file, conf);fileUrl = ftp.storeByFilename(filename, newFileInputStream(tempFile));tempFile.delete();}else{fileUrl = ftp.storeByFilename(filename, file.getInputStream());}}else{if (mark){File tempFile = mark(file, conf);fileUrl = ftp.storeByExt(site.getUploadPath(), ext, new FileInputStream(tempFile));tempFile.delete();}else{fileUrl = ftp.storeByExt(site.getUploadPath(), ext, file.getInputStream());}// 加上url前缀fileUrl = ftpUrl + fileUrl;}}else{String ctx = request.getContextPath();if (!StringUtils.isBlank(filename)){filename = filename.substring(ctx.length());if (mark){File tempFile = mark(file, conf);fileUrl = fileRepository.storeByFilename(filename, tempFile);tempFile.delete();}else{fileUrl = fileRepository.storeByFilename(filename, file);}}else{if (mark){File tempFile = mark(file, conf);fileUrl = fileRepository.storeByExt(site.getUploadPath(), ext, tempFile);tempFile.delete();}else{fileUrl = fileRepository.storeByExt(site.getUploadPath(), ext, file);// 加上部署路径fileUrl = ctx + fileUrl;}}fileMng.saveFileByPath(fileUrl, origName, false); uploadPaths.add(fileUrl);model.addAttribute("uploadNum", uploadNum);}catch (IllegalStateException e){model.addAttribute(ERROR, e.getMessage());log.error("upload file error!", e);}catch (IOException e){model.addAttribute(ERROR, e.getMessage());log.error("upload file error!", e);}catch (Exception e){model.addAttribute(ERROR, e.getMessage());log.error("upload file error!", e);}// model.addAttribute("uploadPaths", uploadPaths); return fileUrl;}。

springMVC的多文件的异步上传实现

springMVC的多⽂件的异步上传实现 springMVC的MultipartFile与传统的ajax⽂件上传兼容性不好，采⽤如下的ajax⽅法，后台⽆法获取⽂件。

$.ajax({ url: '/upload', type: 'POST', cache: false, data: new FormData($('#uploadForm')[0]), processData: false, contentType: false}).done(function(res) { }).fail(function(res) {}); 服务器端代码需要使⽤从查询参数名为file获取⽂件输⼊流对象，因为<input>中声明的是name="file"，但是上述⽅式，只能传递⼀般的参数，上传⽂件的⽂件流是⽆法被序列化并传递的。

------------------------------------------------------------------------------------分割线------------------------------------------------------------------------------------采⽤以下⽅式完美解决：1.引⼊需要的js⽂件<script type="text/javascript" src="../lycaen/js/jquery/jquery.min.js"></script><script type="text/javascript" src="../lycaen/js/jquery/jquery-ui.min.js"></script><script type="text/javascript" src="../lycaen/js/jquery/jquery-form.js"></script>2.web.xml引⼊MultiFileUpload<?xml version="1.0" encoding="UTF-8"?><web-app version="2.4" xmlns="/xml/ns/j2ee"xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/xml/ns/j2ee/xml/ns/j2ee/web-app_2_4.xsd"> <servlet><servlet-name>MultiFileUpload</servlet-name><servlet-class>org.hi.framework.lycaen.servlet.MultiFileUpload</servlet-class></servlet><servlet-mapping><servlet-name>MultiFileUpload</servlet-name><url-pattern>/MultiFileUpload</url-pattern></servlet-mapping>3.spring容器定义multipartResolver<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "/dtd/spring-beans.dtd"><beans><bean id="multipartResolver" class="org.hi.framework.HiMultipartResolver"><property name="excludeUrls" value="lycaenMultipleFileUpload"/><property name="maxUploadSize" value="100000000"/><property name="defaultEncoding" value="UTF-8"/></bean></beans>4.前台demo<!DOCTYPE html><head><meta charset="UTF-8"><title>Title</title></head><body><style type="text/css">div.mainContener{padding-top: 10px;padding-right: 10px;padding-bottom: 10px;padding-left: 10px;}#submit_click { text-align:center;margin-top:32px; height:40px;}#submit_click a{text-decoration:none;background:#0a6dbe;color:#f2f2f2;padding: 10px 30px 10px 30px;font-size:16px;font-family:微软雅⿊,宋体,Arial,Helvetica,Verdana,sans-serif; font-weight:bold;border-radius:3px;-webkit-transition:all linear 0.30s;-moz-transition:all linear 0.30s;transition:all linear 0.30s;}#submit_click a:hover { background:#385f9e; }.upload_click { text-align:center;margin-top:32px; height:40px;} .uoload_click a{text-decoration:none;background:#2f435e;color:#f2f2f2;padding: 10px 30px 10px 30px;font-size:16px;font-family:微软雅⿊,宋体,Arial,Helvetica,Verdana,sans-serif; font-weight:bold;border-radius:3px;-webkit-transition:all linear 0.30s;-moz-transition:all linear 0.30s;transition:all linear 0.30s;}table.gridtable {font-family: Microsoft YaHei;font-size:14px;color:#333333;border-width:1px;border-color:#666666;border-collapse: collapse;padding-top: 10px;padding-right: 10px;padding-bottom: 10px;padding-left: 10px;}table.gridtable .title {font-weight:bold;background-color:#f2f5f7;text-align:center;}table.gridtable th {border-width: 1px;padding: 8px;border-style: solid;border-color: #ced9e0;background-color: #e0ecff;}table.gridtable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #ced9e0;background-color: #ffffff;}input[type=button]{height:30px;width:236px;background-color:#d7ebf9;border:1px solid #99D3F5;border-radius:3px;font-size:14px;color:#0078de;}td.leftHead{text-align: center;}</style><div class="mainContener"><table class="gridtable" align = "center" width="98%"><tr class="title"><th width="15%">考核要点（分值）</th><th width="60%">考核内容</th><th width="25%">附件材料要求</th><th width="5%">附件上传</th><th width="10%">⾃评评分</th><th width="10%">上级评分</th></tr><tr><td class="leftHead" rowspan = 7>1.<br>部<br>署<br>⼯<br>作<br>（<br>8<br>分<br>）</td><td>（1）政府⼯作报告对⾷品安全⼯作有明确要求，得0.5分，否则不得分</td><td>2017年省级政府⼯作报告</td><td><form id= "uploadForm111" name="uploadForm111" enctype="multipart/form-data"><input name="messageContent" type="hidden"/><p><input type="file" name="file"/></p><p><div style="text-align:center"><input type="button" value="上传" onclick="doUpload($(this))"/></div></p></form></td><td><input type="number" width="98%"/></td><td><input type="number" width="98%"/></td></tr><tr><td>（2）组织制定并向社会公布⾷品安全重点⼯作安排。

SpringMVC单文件上传与多文件上传实例

SpringMVC单⽂件上传与多⽂件上传实例⼀、简述⼀个javaWeb项⽬中，⽂件上传功能⼏乎是必不可少的，本⼈在项⽬开发中也时常会遇到，以前也没怎么去理它，今天有空学习了⼀下这⽅⾯的知识，于是便将本⼈学到的SpringMVC中单⽂件与多⽂件上传这部分知识做下笔记。

⼆、单⽂件上传1、页⾯这⾥以⼀个简单的表单提交为例⼦，⽂件上传需要将表单的提交⽅法设置为post，将enctype的值设置为"multipart/form-data"。

<form action="${pageContext.request.contextPath}/test/upload.do" method="post" enctype="multipart/form-data"><input type="file" name="img"><br /><input type="submit" name="提交"></form>2、控制器在Controller的处理⽅法中，使⽤MultipartFile对象作为参数接收前端上传过来的⽂件，具体说明请看代码注释。

@Controller@RequestMapping("/test")public class MyController {@RequestMapping(value = "/upload.do", method = RequestMethod.POST)// 这⾥的MultipartFile对象变量名跟表单中的file类型的input标签的name相同，所以框架会⾃动⽤MultipartFile对象来接收上传过来的⽂件，当然也可以使⽤@RequestParam("img")指定其对应的参数名称 public String upload(MultipartFile img, HttpSession session)throws Exception {// 如果没有⽂件上传，MultipartFile也不会为null，可以通过调⽤getSize()⽅法获取⽂件的⼤⼩来判断是否有上传⽂件if (img.getSize() > 0) {// 得到项⽬在服务器的真实根路径，如：/home/tomcat/webapp/项⽬名/imagesString path = session.getServletContext().getRealPath("images");// 得到⽂件的原始名称，如：美⼥.pngString fileName = img.getOriginalFilename();// 通过⽂件的原始名称，可以对上传⽂件类型做限制，如：只能上传jpg和png的图⽚⽂件if (fileName.endsWith("jpg") || fileName.endsWith("png")) {File file = new File(path, fileName);img.transferTo(file);return "/success.jsp";}}return "/error.jsp";}}3、springmvc.xml配置使⽤MultipartFile对象接收前端上传过来的⽂件，还需要在springmvc的配置⽂件中进⾏如下配置：<?xml version="1.0" encoding="UTF-8"?><beans xmlns="/schema/beans"xmlns:mvc="/schema/mvc" xmlns:xsi="/2001/XMLSchema-instance"xmlns:aop="/schema/aop" xmlns:tx="/schema/tx"xmlns:context="/schema/context"xsi:schemaLocation="/schema/beans/schema/beans/spring-beans.xsd/schema/tx/schema/tx/spring-tx.xsd/schema/mvc/schema/mvc/spring-mvc.xsd/schema/aop/schema/aop/spring-aop.xsd/schema/context/schema/context/spring-context.xsd">...<bean id="multipartResolver" class="monsMultipartResolver"><property name="defaultEncoding" value="utf-8"/><property name="maxUploadSize" value="1048576"/><property name="maxUploadSizePerFile" value="1048576"/></bean><bean class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver"><property name="defaultErrorView" value="/error.jsp"/></bean></beans>上⾯配置⽂件中的CommonsMultipartResolver下的属性值配置不是必须的，你也可以全部不写。

springmvc_文件上传

<propertyname="maxUploadSize"value="104857600"/>
<propertyname="maxInMemorySize"value="40960"/>
<propertyname="defaultEncoding"value="UTF-8"></property>
@RequestMapping("/upload")
publicStringfileUpload(@RequestParam("file")CommonsMultipartFilefile,HttpServletRequestrequest)throwsException{
//获e =file.getOriginalFilename();
intlen=0;
byte[]buffer=newbyte[400];
while((len=is.read(buffer))!=-1){
os.write(buffer, 0,len);
}
os.close();
is.close();
}catch(Exceptione) {
e.printStackTrace();
SpringMVC实现文件上传
1.通过commons-fileupload来实现
1）导入jar包，commons-fileupload-1.2.1.jar，
commons-io-2.0.1.jar
2）配置springmvc的配置解析器
<beanid="multipartResolver"class="monsMultipartResolver">

jQuery实现异步上传一个或多个文件

jQuery实现异步上传⼀个或多个⽂件本⽂实例为⼤家分享了jQuery实现异步上传⼀个或多个⽂件的具体代码，供⼤家参考，具体内容如下⾸先使⽤SpringMvc⽂件上传，需要引⼊第三⽅上传⽂件的jar：<dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.4</version></dependency>响应json需要导⼊的包：<dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.9.0</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-core</artifactId><version>2.9.0</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-annotations</artifactId><version>2.9.0</version></dependency>接下来看jsp⽂件：<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head><title>⾸页</title></head><body><p>同步上传⼀个⽂件</p><form action="upload/testUpload" method="post" enctype="multipart/form-data"><input type="file" name="upload"><br><input type="submit" value="上传"></form><hr><p>异步上传⼀个⽂件</p><form id="formData" method="post" enctype="multipart/form-data"><input type="file" name="upload"><br><input id="sub" type="button" value="上传"></form><hr><p>异步上传⼀个⽂件,且表单有其他数据</p><form id="formData2" method="post" enctype="multipart/form-data">编&emsp;号:<input type="text" name="id"><br>账户名:<input type="text" name="name"><br>⾦&emsp;额:<input type="text" name="money"><br><input type="file" name="upload"><br><input id="sub2" type="button" value="上传"></form><hr><p>异步上传多个⽂件,且表单有其他数据</p><form id="formData3" method="post" enctype="multipart/form-data">编&emsp;号:<input type="text" name="id"><br>账户名:<input type="text" name="name"><br>⾦&emsp;额:<input type="text" name="money"><br><input type="file" name="upload" multiple="multiple"><br><input id="sub3" type="button" value="上传"></form><script type="text/javascript" src="js/jquery-3.3.1.js"></script><script>$(function () {//异步上传⼀个⽂件$("#sub").click(function () {var file = new FormData($("#formData")[0]);$.post({url:'upload/testUpload',contentType:false, //jQuery不要去设置Content-Type请求头processData:false, //jQuery不要去处理发送的数据cache:false, //不缓存dataType:'json', //返回类型jsondata:file, //⽂件数据success:function (res) {console.log(res);}});});//异步上传⼀个⽂件，带表单参数$("#sub2").click(function () {//将form表单转换为FormData对象var data = new FormData(document.querySelector("#formData2")); $.post({url:'upload/testUpload2',contentType:false, //jQuery不要去设置Content-Type请求头processData:false, //jQuery不要去处理发送的数据cache:false, //不缓存dataType:'json', //返回类型jsondata:data, //表单数据success:function (res) {console.log(res);},error:function (error) {console.log(error);}});});//异步上传多个⽂件，带表单参数$("#sub3").click(function () {//将form表单转换为FormData对象var data = new FormData(document.querySelector("#formData3")); $.post({url:'upload/testUpload3',contentType:false, //jQuery不要去设置Content-Type请求头processData:false, //jQuery不要去处理发送的数据cache:false, //不缓存dataType:'json', //返回类型jsondata:data, //表单数据success:function (res) {console.log(res);},error:function (error) {console.log(error);}});});});</script></body></html>下⾯是controller：@Controller@RequestMapping("/upload")public class FileController {/*** 同步⽂件⼀个上传和异步上传⼀个⽂件，共同使⽤这⼀个控制器⽅法* @param request* @param upload* @return* @throws IOException*/@RequestMapping(value = "/testUpload",method = RequestMethod.POST)public String upload(HttpServletRequest request, MultipartFile upload) throws IOException {//获取⽂件的保存路径String path = request.getServletContext().getRealPath("/uploads");//获取上传⽂件的名称String filename = upload.getOriginalFilename();//获取随机字符串String prefix = UUID.randomUUID().toString().replaceAll("-", "");filename = prefix + "_" + filename;//创建⽂件对象File file = new File(path);//判断路径是否存在，不存在则创建if(!file.exists()){file.mkdir();}//上传⽂件upload.transferTo(new File(file,filename));return "success";}/*** 异步⽂件上传和表单数据* @param request* @param upload* @return* @throws IOException*/@RequestMapping(value = "/testUpload2",method = RequestMethod.POST)public @ResponseBody Account upload2(HttpServletRequest request, MultipartFile upload, Account account) throws IOException { //获取⽂件的保存路径String path = request.getServletContext().getRealPath("/uploads");//获取上传⽂件的名称String filename = upload.getOriginalFilename();//获取随机字符串String prefix = UUID.randomUUID().toString().replaceAll("-", "");filename = prefix + "_" + filename;//创建⽂件对象File file = new File(path);//判断路径是否存在，不存在则创建if(!file.exists()){file.mkdir();}//上传⽂件upload.transferTo(new File(file,filename));return account;}/*** 异步多个⽂件上传和表单数据* @param request* @param upload 采⽤数组接收* @return* @throws IOException*/@RequestMapping(value = "/testUpload3",method = RequestMethod.POST)public @ResponseBody Account upload3(HttpServletRequest request, MultipartFile[] upload, Account account) throws IOException { //获取⽂件的保存路径String path = request.getServletContext().getRealPath("/uploads");//创建⽂件对象File file = new File(path);//判断路径是否存在，不存在则创建if(!file.exists()){file.mkdir();}for (MultipartFile multipartFile : upload) {//获取上传⽂件的名称String filename = multipartFile.getOriginalFilename();//获取随机字符串String prefix = UUID.randomUUID().toString().replaceAll("-", "");filename = prefix + "_" + filename;//上传⽂件multipartFile.transferTo(new File(file,filename));}return account;}}public class Account implements Serializable {private int id;private String name;private float money;//getter or setter....}注意事项：上传⽂件时，表单的 enctype 修改为：multipart/form-data；后端使⽤ MultipartFile upload 对象接收，upload 必须和 <input> 的name属性⼀致；上传多个⽂件，给 <input> 添加：multiple=“multiple”效果：更多精彩内容请参考专题，和进⾏学习。

[二十]SpringBoot之（多）文件上传

[⼆⼗]SpringBoot之（多）⽂件上传（1）新建maven Java project新建⼀个名称为spring-boot-fileuploadmaven java项⽬（2）在pom.xml加⼊相应依赖；<project xmlns="/POM/4.0.0" xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/POM/4.0.0 /xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>me.shijunjie</groupId><artifactId>spring-boot-fileuploadmaven</artifactId><version>0.0.1-SNAPSHOT</version><packaging>jar</packaging><name>spring-boot-fileuploadmaven</name><url></url><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding></properties><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>1.3.4.RELEASE</version></parent><dependencies><dependency><groupId>junit</groupId><artifactId>junit</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin </artifactId></plugin><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><configuration><source>1.8</source><target>1.8</target><encoding>UTF-8</encoding></configuration></plugin></plugins></build></project>（3）新建⼀个表单页⾯（这⾥使⽤thymeleaf）在src/main/resouces新建templates(如果看过博主之前的⽂章，应该知道，templates是spring boot存放模板⽂件的路径)，在templates下新建⼀个file.html:<!DOCTYPE html><html xmlns="/1999/xhtml"xmlns:th=""xmlns:sec="/thymeleaf-extras-springsecurity3"><head><title>Hello World!</title></head><body><form method="POST" enctype="multipart/form-data" action="/upload"><p>⽂件：<input type="file" name="file"/></p><p><input type="submit" value="上传"/></p></form></body></html>（4）编写controller;package me.shijunjie.controller;import java.io.BufferedOutputStream;import java.io.File;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;import java.util.List;import javax.servlet.http.HttpServletRequest;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;import org.springframework.web.multipart.MultipartHttpServletRequest;@Controllerpublic class FileUploadController {//访问路径为：http://127.0.0.1:8080/file@RequestMapping("/file")public String file(){return "/file";}@RequestMapping("/mutifile")public String mutifile(){return "/mutifile";}@RequestMapping("/upload")@ResponseBodypublic String handleFileUpload(@RequestParam("file")MultipartFile file){if(!file.isEmpty()){try {BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(new File(file.getOriginalFilename()))); out.write(file.getBytes());out.flush();out.close();}catch(FileNotFoundException e) {e.printStackTrace();return "上传失败,"+e.getMessage();}catch (IOException e) {e.printStackTrace();return "上传失败,"+e.getMessage();}return "上传成功";}else{return "上传失败，因为⽂件是空的.";}}/*** 多⽂件具体上传时间，主要是使⽤了MultipartHttpServletRequest和MultipartFile* @param request* @return*/@RequestMapping(value="/batch/upload", method=RequestMethod.POST)public @ResponseBodyString handleFileUpload(HttpServletRequest request){List<MultipartFile> files =((MultipartHttpServletRequest)request).getFiles("file");MultipartFile file = null;BufferedOutputStream stream = null;for (int i =0; i< files.size(); ++i) {file = files.get(i);if (!file.isEmpty()) {try {byte[] bytes = file.getBytes();stream =new BufferedOutputStream(new FileOutputStream(new File(file.getOriginalFilename()))); stream.write(bytes);stream.close();} catch (Exception e) {stream = null;return "You failed to upload " + i + " =>" + e.getMessage();}} else {return "You failed to upload " + i + " becausethe file was empty.";}}return "upload successful";}}（6）对上传的⽂件做⼀些限制；package me.shijunjie.spring_boot_fileuploadmaven;import javax.servlet.MultipartConfigElement;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;import org.springframework.boot.context.embedded.MultipartConfigFactory;import org.springframework.context.annotation.Bean;import ponentScan;@SpringBootApplication@ComponentScan(value="me.shijunjie")public class App{@Beanpublic MultipartConfigElement multipartConfigElement() {MultipartConfigFactory factory = new MultipartConfigFactory();//// 设置⽂件⼤⼩限制 ,超了，页⾯会抛出异常信息，这时候就需要进⾏异常信息的处理了;factory.setMaxFileSize("128KB"); //KB,MB/// 设置总上传数据总⼤⼩factory.setMaxRequestSize("256KB");//Sets the directory location wherefiles will be stored.//factory.setLocation("路径地址");return factory.createMultipartConfig();}public static void main( String[] args ){SpringApplication.run(App.class, args);}}。

SpringBoot+Vue项目多文件上传同时上传其他参数

} } let obj = {} //... 需要传入的参数 formData.append("obj",JSON.stringfy(obj)); this.$http({
url: this.$http.adornUrl("/xxx/resources/uploadFileAndData"), method: "POST" timeout: 1000 * 60 }) //... 请求后处理
还未实现后端直接接收一个对象？？？若有清楚的朋友，望告知，非常感谢！
具体实现根据业务而定，对文件的处理、Google有很多相关文章第二个参数obj,页面将对象转为字符串处理的,也可以分开传参
前端核心代码：
let formData = new FormData(); //... resources存文件的数组 if (this.resources) {
for (var i = 0; i < this.resources.length; i++) { formData.append("files", this.resources[i].raw);
您使用的浏览器不受支持建议使用新版浏览器
SpringBoot+Vue项目多文件上传同时上传其他参数
Java后端接收 POST
uploadFileAndData(@RequestParam(value = "files") List<MultipartFile> files, @RequestParam String obj)

Springboot实现多文件上传代码解析

Springboot实现多⽂件上传代码解析⼀说明spingMVC⽀持⽂件上传，我们通过Apach 的 commons-fileupload 包的CommonsMultipartResolver 去实现了spingMVC的MultipartResolver 。

本⽂章的⽰例是个简单的多⽂件上传，根据不同的业务⾃⾏修改。

⼆pom.xlm<dependencies><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.3</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency></dependencies>三 application.ymlspring:servlet:multipart:max-file-size: 200MB #单个⽂件上传⼤⼩max-request-size: 600MB #连续上传⽂件⼤⼩youku1327:file:root:path: "C:\\mydata\\generator\\version06\\" #存储路径四controller/*** @Author lsc* @Description <p> </p>* @Date 2019/10/2 20:58* @Version 1.0*/@RestControllerpublic class FileUploadController {@Value("${youku1327.file.root.path}")private String fileRootPath;@PostMapping("/file/upload")public String fileUpload(@RequestParam("files")MultipartFile[] files){String filePath = "";// 多⽂件上传for (MultipartFile file : files){// 上传简单⽂件名String originalFilename = file.getOriginalFilename();// 存储路径filePath = new StringBuilder(fileRootPath).append(System.currentTimeMillis()).append(originalFilename).toString();try {// 保存⽂件file.transferTo(new File(filePath));} catch (IOException e) {e.printStackTrace();}}return filePath;}}五启动类/*** @Author lsc* @Description <p> </p>* @Date 2019/10/2 20:54* @Version 1.0*/@SpringBootApplicationpublic class FileUploadApplication {public static void main(String[] args) {SpringApplication.run(FileUploadApplication.class,args);}}六测试发送http的post请求，使⽤表单形式，key为files需要与MultipartFile[] 的参数名称⼀致，挑选两个⽂件，发送成功后，会看到最后返回的⽂件路径；打开保存的⽂件路径可以发现已经实现⽂件上传。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

本文由我司收集整编，推荐下载，如有疑问，请与我司联系
JQuery 与springmvc 实现多个文件上传操作
1. 导入JQuery 相关JS 文件
script src=“ @full_path path=“js/jquery.js”/“type=“text/javascript” /script
script src=“ @full_path path=“js/ajaxfileupload.js”/“type=“text/javascript” /script
这边ajaxfileupload.js 有点特殊，请使用如下改造后的原文件内容：
jQuery.extend({ var frameId = ‘jUploadFrame’ + id; var iframeHtml = ‘ iframe id=“‘ + frameId + ‘“name=“‘+ frameId + ‘“‘;if(window.ActiveXObject) if(typeof uri==
‘boolean’){iframeHtml += ‘src=“‘+ ‘javascript:false’+ ‘“‘;else if(typeof uri==
‘string’){iframeHtml += ‘src=“‘+ uri + ‘“‘;iframeHtml += ‘/ jQuery(iframeHtml).appendTo(document.body); return jQuery(‘#’+ frameId).get(0); createUploadForm: function(id, fileElementId, data) //create form var formId = ‘jUploadForm’+ id; var fileId = ‘jUploadFile’+ id; var form = jQuery(‘form action=““method=“POST”name=“‘+ formId + ‘“id=“‘+ formId + ‘“enctype=“multipart/form-data” /form if (data) { for ( var i in data) { jQuery( ‘ input type=“hidden”name=“‘ + i + ‘“value=“‘+ data[i] + ‘“ / ‘).appendTo(form);for (var i
= 0; i fileElementId.length; i ++) { var oldElement = jQuery(‘#’+ fileElementId[i]); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr(‘id’, fileElementId[i]); jQuery(oldElement).attr(‘name’,fileElementId[i]); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); //set attributes jQuery(form).css(‘position’,‘absolute’);jQuery(form).css(‘top’,‘-1200px’); jQuery(form).css(‘left’,‘-1200px’);jQuery(form).appendTo(‘body’);return form; ajaxFileUpload: function(s) { // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout s = jQuery.extend({}, jQuery.ajaxSettings, s); var id = new Date().getTime() var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)==‘undefined’?false:s.data));。