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

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