多图上传+springMVC简单实现

页面（jsp）引用

<script type="text/javascript" src="${pageContext.request.contextPath}/system/crm/diyUpload/js/jquery-1.7.2.js"></script>      <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/system/crm/diyUpload/css/webuploader.css">      <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/system/crm/diyUpload/css/diyUpload.css">      <script type="text/javascript" src="${pageContext.request.contextPath}/system/crm/diyUpload/js/webuploader.html5only.min.js"></script>      <scripttype="text/javascript"src="${pageContext.request.contextPath}/system/crm/diyUpload/js/diyUpload.js"></script>

创建DIV标签

<div id="demo">          <div id="as" ></div>      </div>

设置样式

<style>         *{ margin:0; padding:0;}         #box{ margin:50px auto; width:540px; min-height:400px; background:#FF9}         #demo{ margin:50px auto; width:540px; min-height:800px; background:#DFFFDF}     </style>

js

<script type="text/javascript">     /*     * 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯;     * 其他参数同WebUploader     */     $('#as').diyUpload({         url:'${pageContext.request.contextPath}/uploadImgMany.do',         success:function( data ) {             console.info( data );         },         error:function( err ) {             console.info( err );            },         buttonText : '选择合同图片',         chunked:true,         // 分片大小         chunkSize:512 * 1024,         //最大上传的文件数量, 总文件大小,单个文件大小(单位字节);         fileNumLimit:10,         fileSizeLimit:500000 * 1024,         fileSingleSizeLimit:50000 * 1024,         accept: accept: {extensions:"jpg,jpeg,bmp,png"}//图片格式     }); </script>

diyUpload 属性可在diyUpload.js中看到。

Spring mvc接收

注意：这个插件是一个一个图片往后台传。

/**      * 图片上传      * @param request      * @param response      * @throws Exception      */     @RequestMapping("/uploadImgMany.do")     public void uploadImgMany(HttpServletRequest request,HttpServletResponse response) throws Exception {         String id = request.getParameter("msContractId");//得到合同号         String path = request.getSession().getServletContext().getRealPath("upload/concartImg");//图片保存路径         MultipartHttpServletRequest multipart= (MultipartHttpServletRequest)request;         //List<MultipartFile> files = multipart.getFiles("file");//         //for (MultipartFile multipartFile : files) {         //  String filename = multipartFile.getOriginalFilename();//获得文件名         //  String fileNameNew=UUID.randomUUID().toString().replaceAll("-", "")+filename.substring(filename.lastIndexOf("."));//设置图像名称         //  File file = new File(path,fileNameNew);//创建新的文件         //  multipartFile.transferTo(file);//转存文件         /// list.add(fileNameNew);//添加到list集合         //}         MultipartFile multipartFile = multipart.getFile("file");         String filename = multipartFile.getOriginalFilename();//获得文件名         String fileNameNew=UUID.randomUUID().toString().replaceAll("-", "")+filename.substring(filename.lastIndexOf("."));//设置图像名称         File file = new File(path,fileNameNew);//创建新的文件         multipartFile.transferTo(file);//转存文件         //contractService.uoloadImg(id, fileNameNew);              }