1.页面上传标签
<t:formvalid formid="addImageForm" dialog="true" usePlugin="password" layout="table" tiptype="1" action="itemController.do?doAddImage" > <input name="itemId" value="${itemId}" type="hidden"> <input id="fileupload" type="file" name="files[]" accept="image/*" data-url="fileUploadController.do?upload" multiple> <div id="uploaded-files"> </div>
</t:formvalid>
2.上传后的操作
1 public LinkedList<FileMeta> upload(MultipartHttpServletRequest request, HttpServletResponse response) { 2 //1. build an iterator 3 Iterator<String> itr = request.getFileNames(); 4 MultipartFile mpf = null; 5 String path="";//上传文件的路径 6 String fileName="";//文件名 7 String newFileName="";//新文件名 8 String savePath="";//文件保存全路径 9 //2. get each file 10 while (itr.hasNext()) { 11 12 //2.1 get next MultipartFile 13 mpf = request.getFile(itr.next()); 14 //System.out.println(mpf.getOriginalFilename() + " uploaded! " + files.size()); 15 16 //2.2 if files > 10 remove the first from the list 17 if (files.size() >= 10) 18 files.pop(); 19 20 //2.3 create new fileMeta 21 fileMeta = new FileMeta(); 22 //fileMeta.setFileName(mpf.getOriginalFilename()); 23 fileMeta.setFileSize(mpf.getSize() / 1024 + " Kb"); 24 fileMeta.setFileType(mpf.getContentType()); 25 26 try { 27 fileMeta.setBytes(mpf.getBytes()); 28 // String path ="upload/"; 29 // String realPath = request.getSession().getServletContext().getRealPath("/") + "/" + path ;// 文件的硬盘真实路径 30 // String savePath = realPath + mpf.getOriginalFilename();// 文件保存全路径 31 fileName=mpf.getOriginalFilename(); 32 path=ResourceUtil.getConfigByName("tempPath"); 33 newFileName = NumberMaker.createFileName(fileName); 34 savePath = path + newFileName; // 文件保存全路径 35 // copy file to local disk (make sure the path "e.g. D:/temp/files" exists) 36 FileCopyUtils.copy(mpf.getBytes(),new File(savePath)); 37 fileMeta.setFileName(newFileName);//将新的随机数文件名赋给文件名属性 38 } catch (IOException e) { 39 e.printStackTrace(); 40 } 41 //2.4 add to files 42 files.add(fileMeta); 43 44 } 45 46 // result will be like this 47 // [{"fileName":"app_engine-85x77.png","fileSize":"8 Kb","fileType":"image/png"},...] 48 return files; 49 }
3.选择图片后获得选择的图片名称
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$( '#fileupload' ).fileupload({ maxChunkSize: 2000000, // 最大2MB dataType: 'json' , done: function (e, data) { var cc = 0; console.log( "in" ); $.each(data.result, function (index, file) { console.log( "index:" +index); $( "#uploaded-files" ).append( $( "<input name='filename' type='hidden' />" ).val(file.fileName) ) }); cc++; } |
4.引入js
<script src="plug-in/jquery-plugs/fileupload/js/vendor/jquery.ui.widget.js"></script> <script src="plug-in/jquery-plugs/fileupload/js/jquery.iframe-transport.js"></script> <script src="plug-in/jquery-plugs/fileupload/js/jquery.fileupload.js"></script>
5.提交表单
public AjaxJson doAddImage(ItemImageEntity image, HttpServletRequest request) { String itemId=request.getParameter("itemId"); String fileName=request.getParameter("filename"); String path=""; String imagePath=""; AjaxJson j = new AjaxJson(); String message = "添加成功"; try { path =ResourceUtil.getConfigByName("uploadPath"); String tempPath=ResourceUtil.getConfigByName("tempPath"); String oldPath = tempPath + fileName;// 获取temp文件下的指定文件路径 String newPath = path + fileName;//新目录 File filein=new File(oldPath); File fileout=new File(newPath); // 文件拷贝到指定硬盘目录 FileCopyUtils.copy(filein, fileout); //savePath = path + newFileName; // 文件保存全路径 imagePath="commonController.do?viewImg&imgUrl="+fileName; ItemEntity item=systemService.getEntity(ItemEntity.class, itemId); itemService.addImage(item, fileName, fileName,imagePath); systemService.addLog("图片名【"+image.getName()+"】"+message, Globals.Log_Type_INSERT, Globals.Log_Leavel_INFO); } catch (Exception e) { e.printStackTrace(); message = "图片添加失败"; systemService.addLog("图片名【"+image.getName()+"】"+e.getMessage(), Globals.Log_Type_INSERT, Globals.Log_Leavel_ERROR); throw new BusinessException(e.getMessage()); } j.setMsg(message); return j; }