一个带展示的jsp上传控件模型
带展示上传控件的基本模型,无样式
jsp部分:
<td>
<form id="form1" enctype="multipart/form-data" method="post">
<input type="file" name="filePic" id="doc" style="width:300px;" onChange="javascript:setImagePreviews();" accept="image/*" />
</form>
<input type="button" value="上传" onclick="uploadPic();" style="margin-right: 3px;margin-top: 4px;float:right;line-height: 16px;" />
</td>
<td width="100px" height="100px" >
<div id="dd" style=" width:100px;"></div>
</td>
1 <script type="text/javascript"> 2 //下面用于多图片上传预览功能 3 function setImagePreviews(avalue) { 4 var docObj = document.getElementById("doc"); 5 var dd = document.getElementById("dd"); 6 dd.innerHTML = ""; 7 var fileList = docObj.files; 8 for (var i = 0; i < fileList.length; i++) { 9 dd.innerHTML += "<div style='float:left' ><img id='img" + i + "' /> </div>"; 10 var imgObjPreview = document.getElementById("img"+i); 11 if (docObj.files && docObj.files[i]) { 12 //火狐下,直接设img属性 13 imgObjPreview.style.display = 'block'; 14 imgObjPreview.style.width = '100px'; 15 imgObjPreview.style.height = '100px'; 16 //imgObjPreview.src = docObj.files[0].getAsDataURL(); 17 //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式 18 imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); 19 } 20 else { 21 //IE下,使用滤镜 22 docObj.select(); 23 var imgSrc = document.selection.createRange().text; 24 alert(imgSrc) 25 var localImagId = document.getElementById("img" + i); 26 //必须设置初始大小 27 localImagId.style.width = "100px"; 28 localImagId.style.height = "100px"; 29 //图片异常的捕捉,防止用户修改后缀来伪造图片 30 try { 31 localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; 32 localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; 33 } 34 catch (e) { 35 alert("您上传的图片格式不正确,请重新选择!"); 36 return false; 37 } 38 imgObjPreview.style.display = 'none'; 39 document.selection.empty(); 40 } 41 } 42 return true; 43 } 44 45 function uploadPic(){ 46 var formData = new FormData(); 47 formData.append("filePic",$("#doc")[0].files[0]); 48 $.ajax({ 49 url : 'farmfind/uploadfarmfindPics?kind=thumbnail', 50 type : 'POST', 51 data : formData, 52 // 告诉jQuery不要去处理发送的数据 53 processData : false, 54 // 告诉jQuery不要去设置Content-Type请求头 55 contentType : false, 56 beforeSend:function(){ 57 console.log("正在进行,请稍候"); 58 }, 59 success : function(responseStr) { 60 if(responseStr.status===0){ 61 console.log("成功"+responseStr); 62 }else{ 63 console.log("失败"); 64 } 65 }, 66 error : function(responseStr) { 67 console.log("error"); 68 } 69 }); 70 71 72 } 73 </script>
controller层:
//图片上传 @RequestMapping(value="/uploadfarmfindPics") // 处理上传的缩略图 @ResponseBody public Map uploadfarmfindPics(@RequestParam(value = "filePic", required=false) MultipartFile[] mfs , @RequestParam(value = "kind", required=false) String kind) throws Exception{ // 从CommonConfig里面去取, 默认这个路劲不能错 String PicturePath= CommonConfig.PicturePath.endsWith("/") ? CommonConfig.PicturePath : (CommonConfig.PicturePath +"/"); System.out.println("i get the kind="+kind); System.out.println("i get the PicturePath===="+PicturePath); Map<String,Object> map = new HashMap<String,Object>(); String uuid=null; for(MultipartFile mf : mfs){ //文件非空才能上传 否者会报异常 if(!mf.isEmpty()){ uuid=farmfindService.saveUploadThumbnailFile(mf,PicturePath); //调用上传方法,上传方法 System.out.println("controller层的上传文件的文件名:" + mf.getName()); System.out.println("controller层的上传文件的原始文件名:" + mf.getOriginalFilename()); } } String errInfo=null; if(null == uuid){ errInfo= "fail"; }else{ errInfo = "success"; } map.put("result", errInfo); map.put("uuid", uuid); map.put("PicturePath",PicturePath); return map; }
service层:
public String get32UUID(){ return UuidUtil.get32UUID(); } public void showMF(MultipartFile mf) { System.out.println("内容类型是:" + mf.getContentType()); System.out.println("上传文件的文件名:" + mf.getName()); System.out.println("上传文件的原始文件名:" + mf.getOriginalFilename()); System.out.println("上传文件的大小:" + mf.getSize()); System.out.println("上传文件是空的吗:" + mf.isEmpty()); } public String saveUploadThumbnailFile(MultipartFile mf, String PicturePath){ showMF(mf); System.out.println("----------"); String defaultUploadPath=PicturePath; String uuid=this.get32UUID(); String filePath=defaultUploadPath+uuid; String arr[]=(mf.getOriginalFilename()).split("\\."); String type=arr[arr.length-1]; uuid+="."+type; filePath+="."+type; System.out.println("filePath=="+filePath); try { System.out.println("go into try"); mf.transferTo(new File(filePath)); //执行上传方法 } catch ( IOException e) { e.printStackTrace(); }catch(IllegalStateException ee){ ee.printStackTrace(); } return uuid; }