一个带展示的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>

    <script type="text/javascript">
    //下面用于多图片上传预览功能
    function setImagePreviews(avalue) {
        var docObj = document.getElementById("doc");
        var dd = document.getElementById("dd");
        dd.innerHTML = "";
        var fileList = docObj.files;
        for (var i = 0; i < fileList.length; i++) {
            dd.innerHTML += "<div style='float:left' ><img id='img" + i + "'  /> </div>";
            var imgObjPreview = document.getElementById("img"+i); 
            if (docObj.files && docObj.files[i]) {
                //火狐下，直接设img属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '100px';
                imgObjPreview.style.height = '100px';
                //imgObjPreview.src = docObj.files[0].getAsDataURL();
                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
            }
            else {
                //IE下，使用滤镜
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                alert(imgSrc)
                var localImagId = document.getElementById("img" + i);
                //必须设置初始大小
                localImagId.style.width = "100px";
                localImagId.style.height = "100px";
                //图片异常的捕捉，防止用户修改后缀来伪造图片
                try {
                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                }
                catch (e) {
                    alert("您上传的图片格式不正确，请重新选择!");
                    return false;
                }
                imgObjPreview.style.display = 'none';
                document.selection.empty();
            }
        }  
        return true;
    }
    
   function  uploadPic(){
       var formData = new FormData();         
       formData.append("filePic",$("#doc")[0].files[0]);     
       $.ajax({ 
           url : 'farmfind/uploadfarmfindPics?kind=thumbnail', 
           type : 'POST', 
           data : formData, 
                   // 告诉jQuery不要去处理发送的数据
           processData : false, 
                   // 告诉jQuery不要去设置Content-Type请求头
           contentType : false,
           beforeSend:function(){
           console.log("正在进行，请稍候");
           },
           success : function(responseStr) { 
               if(responseStr.status===0){
               console.log("成功"+responseStr);
               }else{
               console.log("失败");
               }
           }, 
           error : function(responseStr) { 
               console.log("error");
           } 
       });
       

   }
</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;
    }