一个带展示的jsp上传控件模型

带展示上传控件的基本模型,无样式

jsp部分:

  <td>
    <form id="form1" enctype="multipart/form-data" method="post">
      <input type="file" name="filePic" id="doc" style="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=" 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;
    }
原文地址:https://www.cnblogs.com/jiangyi666/p/6274050.html