文档章节

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

D
 DailyDiary
发布于 2017/07/20 16:33
字数 990
阅读 2
收藏 0

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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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" onclick="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()判断,所以每进入一次都应判断,且每次只能判断一个,否则在替换时会出现重复上传。

© 著作权归作者所有

D
粉丝 0
博文 19
码字总数 4467
作品 0
私信 提问
前端实现axios以表单方式上传文件,优化上传速度

一、背景 最近在开发过程中,遇到的需要是需要上传高清图片,必须原图上传。由于在移动端应用,上传网络问题有很大的坑。当初的方案是直接采用将文件转化为,再进行上传,由于文件转化为后,...

bayi_lzp
06/11
0
0
iOS 制作framework (含三方.a和AFNetworking)

该小结只是简单总结制作自己私有库的步骤总结,关于什么是framework 与系统framework区别 , .a , dylb,tdb 静态库 动态库等,以及它们的区别 可以百度看下 制作过程中的参考链接(非常感谢)...

春夏love雨雪
03/23
0
0
Retrofit上传文件的参数设置疑问以及URL的坑

一些题外话... 很久没写过什么东西了,上一篇文章还要追溯到去年八月份。那时我还是单身,而现在,我他娘的还是单身。自从去年9月份以来,各种事情缠身算是彻底了我17年上半年无所事事的无聊...

RunningBun
2018/01/12
0
0
input type="file"使用

问题: 在实际开发过程中,会遇到上传文件的一些需求。但是使用原生的在使用中存在一些问题 在未上传文件时,显示"no file choosen",用户界面不友好,不可配置 上传同一个文件,不会触发事件...

深蓝一人
02/18
0
0
关于uploadify使用的一些小问题

项目中需要上传文件,找了蛮久对比之后选择了uploadify插件。但是遇到了一些小的问题,找了解决办法,记录一下。 在我自己的电脑上上传没有什么问题,但是在别人电脑出现了302错误,查找发现...

swide
2016/01/13
75
0

没有更多内容

加载失败,请刷新页面

加载更多

CQRS与AXON

CQRS 看了蛮多文章,只会CRUD,却不懂CQRS,CQRS是遵循DDD思想而产生的一种模式,Command and Query Responsibility Segregation 命令与查询隔离。查询就直接通过正常的模式service调dao层。...

无极之岚
35分钟前
4
0
OSChina 周三乱弹 —— 欢迎你来做产品经理

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :10多次劲歌金曲获奖,更多叱咤歌坛排名,黎明才应该是四大天王之首,只可惜拍的电影太少。单曲循环一个多月的歌,力荐 《无名份的...

小小编辑
49分钟前
99
7
500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。 帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!...

上海小胖
今天
8
0
关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
7
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部