关于文件上传遇到的一些问题(二)

js:jquery-form.js

jsp:

<form id="form_serviceFile" action="javascript(0);" method="post"  enctype="multipart/form-data">
        <div class="div-box div-panel" style="padding-left:8px;" id="imagesList1">
            <div class="div-panel-title">内容</div>
            <div class="div-item" style="width:340px;height:160px;">
                <div style="width:140px;float:left;">
                    <p>文件1:</p>
                    <input value="${orderNo}" id="no_changService" hidden>
                    <input type="file" name="file_service0"/>
                    <input type="button" οnclick="delPic(10)" value="删除" style="width:60px;margin-top:8px;"/>
                </div>
                <img id="ser_imageId0" style="width:160px;height:160px;"/>
            </div>
            <div class="div-item" style="width:340px;height:160px;">
                <div style="width:140px;float:left;">
                    <p>文件2:</p>
                    <input type="file" id="file_service1" name="file_service1"/>
                    <input type="button" οnclick="delPic(11)" value="删除" style="width:60px;margin-top:8px;"/>
                </div>
                <img id="ser_imageId1" style="width:160px;height:160px;"/>
            </div>
            <div class="div-item" style="width:340px;height:160px;">
                <div style="width:140px;float:left;">
                    <p>文件3:</p>
                    <input type="file" name="file_service2"/>
                    <input type="button" οnclick="delPic(12)" value="删除" style="width:60px;margin-top:8px;"/>
                </div>
                <img id="ser_imageId2" style="width:160px;height:160px;"/>
            </div>
            <div class="div-item" style="width:340px;height:160px;">
                <div style="width:140px;float:left;">
                    <p>文件4:</p>
                    <input type="file" name="file_service3"/>
                    <input type="button" οnclick="delPic(13)" value="删除" style="width:60px;margin-top:8px;"/>
                </div>
                <img id="ser_imageId3" style="width:160px;height:160px;"/>
            </div>
            <div class="div-item" style="width:340px;height:160px;">
                <div style="width:140px;float:left;">
                    <p>文件5:</p>
                    <input type="file" name="file_service4"/>
                    <input type="button" οnclick="delPic(14)" value="删除" style="width:60px;margin-top:8px;"/>
                </div>
                <img id="ser_imageId4" style="width:160px;height:160px;"/>
            </div>
            <div class="div-item" style="width:340px;height:160px;">
                <div style="width:140px;float:left;">
                    <p>文件:</p><span id="serFile"></span>
                </div>
            </div>
            <div style="clear:both;"></div>
            <div><input type="button" οnclick="updateFile(1)" value="上传" style="width:120px;"/></div>
        </div>
    </form>

javascript:上传的数据是一个list,里面包含form里面的五个file,以及每个file的新旧地址(旧地址为 img的src 新地址为 file的路径)

el添加就图片的地址

$("#ser_imageId0").attr("src","${serviceFile0}");
        $("#ser_imageId1").attr("src","${serviceFile1}");
        $("#ser_imageId2").attr("src","${serviceFile2}");
        $("#ser_imageId3").attr("src","${serviceFile3}");
        $("#ser_imageId4").attr("src","${serviceFile4}");

替换时执行方法:

function updateFile(obj){
        var updateType;
        var imgList;
        if(obj==1){updateType=1;imgList = $("#imagesList1").find(".div-item");}
        if(obj==2){updateType=2;imgList = $("#imagesList2").find(".div-item");}
        if(obj==3){updateType=3;imgList = $("#imagesList3").find(".div-item");}
        var dataList = new Array();
        for(var i = 0; i < imgList.length; i++){
            var newdata = $($(imgList).find(":file")[i]).val();
            var olddata = $($(imgList).find("img")[i]).attr("src");
            dataList.push({"oldimg":olddata,"newimg":newdata});
        }
        var dataChangServiceNo = $("#no_changService").val();
        var jsonData = JSON.stringify(dataList);
        if(obj==1){
            $("#form_serviceFile").ajaxSubmit({  
                type:'post',  
                url:'<%=basePath %>uploadFile/updateFileDefService.do', 
                dataType:"json",
                data:{imgList:jsonData,data_no:dataChangServiceNo,changeFileType:updateType},
                success:function(data){ 
                    if(data.type=1){
                        openNewDig(dataChangServiceNo);
                    }
                } 
            });

        }
        }

controller:

@ResponseBody
    @RequestMapping(value="/uploadFile/updateFileDefService.do",method=RequestMethod.POST)
    public ControllerBean updateFile(HttpServletRequest req,String imgList,String data_no,String changeFileType){
        String imgPath="";
        String newPath="";
        ControllerBean retValue = new ControllerBean(ControllerBean.TYPE_ERROR,"上传失败!");
        //取得数据库里的路径
        List<PqsNoticeHead> infoByNono = pqsNoticeHeadService.getInfoByNono(data_no);
        
        for (PqsNoticeHead pnh : infoByNono){
            if("1".equals(changeFileType)){imgPath=pnh.getServiceFile();}
            if("2".equals(changeFileType)){imgPath=pnh.getWpmEngineFile();}
            if("3".equals(changeFileType)){imgPath=pnh.getDefPhoto();}
        }
        String realPath = req.getServletContext().getRealPath("upload");
        File f = new File(realPath);
        if(!f.exists()){
            f.mkdir();
        }
        CommonsMultipartResolver resolver= new CommonsMultipartResolver(req.getServletContext());
        
        if(resolver.isMultipart(req)){
            MultipartHttpServletRequest multipartRequest=(MultipartHttpServletRequest)req;
            Iterator<String> fileNames = multipartRequest.getFileNames();
            while(fileNames.hasNext()) {
                MultipartFile file = multipartRequest.getFile(fileNames.next());
                SimpleDateFormat sf=new SimpleDateFormat("yyyyMMddHHmmssSSS");
                String time = sf.format(new Date());
                String originalFilename = file.getOriginalFilename();
                String timePath =time+originalFilename;
                JSONArray array = JSONArray.fromObject(imgList);
                String oldPath = getOldNameBy(array,originalFilename);
                
                File f1 = new File(realPath+File.separator+oldPath);
                int index=0;
                if(imgPath!=null){
                    //写个方法进行比较 如果为true 则 替换 否则 添加
                    boolean compareResult =comparePath(oldPath,imgPath); 
                    if(compareResult){
                        //删除原始图片,替换为新路径
                        f1.delete();
                        imgPath = imgPath.replace(oldPath,timePath);
                        saveImg(realPath, file, timePath);
                    }else{

                        //若图片不存在则在路径后面添加
                        newPath +=timePath+"*";
                        saveImg(realPath, file, timePath);
                    }
                }else{
                    if(index == 0){
                        newPath =timePath;
                        saveImg(realPath, file, timePath);
                    }else{
                        newPath +="*"+timePath;
                        saveImg(realPath, file, timePath);
                    }
                    index++;
                }
            }
        }
        return retValue;
    }

/**
     * 验证 文件是否为新上传文件 ,若存在,返回文件名
     * @param array
     * @param originalFilename
     * @return
     */
    private String getOldNameBy(JSONArray array, String originalFilename) {
        String oldimgname;
        String newimgname;
        for (int i = 0; i < array.size(); i++) {
            JSONObject str = (JSONObject) array.get(i);
            String oldimg= str.getString("oldimg");
            oldimgname = oldimg.split("/")[oldimg.split("/").length-1];
            String newimg= str.getString("newimg");
            newimgname = newimg.split("\\\\")[newimg.split("\\\\").length-1];
            if(!"".equals(newimgname)){
                if(originalFilename.equals(newimgname)){
                    return oldimgname;
                }
            }
        }
        return null;
    }

/**
     * 验证路径是否重复,即图片是否已存在
     * @param oldimgname
     * @param imgPath
     * @return
     */
    private boolean comparePath(String oldimgname, String imgPath) {
        String[] split = imgPath.split("\\*");
        for (int j = 0; j < split.length; j++) {
            if(oldimgname.equals(split[j])){
                return true;
            }
        }
        return false;
    }

/**
     *  保存文件到指定位置
     * @param realPath
     * @param file
     * @param newPath
     */
    private void saveImg(String realPath, MultipartFile file, String newPath) {
        //路径+日期重组文件名    File.separator相当于地址分隔符 / 
        String path = realPath+File.separator+newPath;
        try {
            //将文件存到指定目录
            file.transferTo(new File(path));
        }catch (Exception e) {
            e.printStackTrace();
        }
    }

总结:

读取文件时,有fileNames.hasNext()判断,所以每进入一次都应判断,且每次只能判断一个,否则在替换时会出现重复上传。

转载于:https://my.oschina.net/u/3229176/blog/1476488

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值