jquery-uploadfile的使用（多文件异步上传）

Posted 2020-11-26 xsd1

需求

在页面端可以在页面不刷新情况下上传多个有大小限制的word文件，并返回文件保存的路径，同时可以删除误上传的文件。

准备

• 下载该插件
• 该插件依赖jquery1.9.1版本（其它不清楚）
  *在jsp页面中引入样式文件和js文件

</script><link href="css/uploadfile.css" rel="stylesheet">  
<script src="js/jquery1.9.1/jquery.min.js"></script>
<script src="js/jquery.uploadfile.min.js"></script>

编写jsp页面

• 表单

<form id="newsform" method="post" action="control/news/add.action"  enctype="multipart/form-data" >    
        <input type="hidden" name="columnId" value="${columnId }">
        <input type="hidden" name="state" id="state" >
        <div id="fileuploader">上传附件</div>
    </form>  

• js函数
  我是直接写在了jsp页面中

<script>
$(document).ready(function() {

    $("#fileuploader").uploadFile({
        url:"control/news/upload.action", //后台处理方法
        fileName:"myfile",   //文件的名称，此处是变量名称，不是文件的原名称只是后台接收的参数
        dragDrop:true,  //可以取消
        abortStr:"取消",
        sequential:true,  //按顺序上传
        sequentialCount:1,  //按顺序上传
        autoSubmit :"false",  //取消自动上传
        acceptFiles:"application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/msword" , //限制上传文件格式
        extErrorStr:"上传文件格式不对",
        maxFileCount:10,       //上传文件数量
        maxFileSize:1024*1024, //大小限制1M
        sizeErrorStr:"上传文件不能大于1M", 
        dragDropStr: "<span><b>附件拖放于此</b></span>",
        showFileCounter:false,
        returnType:"json",  //返回数据格式为json
        onSuccess:function(files,data,xhr,pd)  //上传成功事件，data为后台返回数据
        {
            //将返回的上传文件id动态加入的表单中，用于提交表单时返回给后台。
            var newsform = $("#newsform");
           if( data.status==1){
                for( var i=0;i<data.data.length;i++){
                    var inputNode=‘<input type="hidden" id="‘+data.data[i].fileId+‘" name="fileIds" value="‘+data.data[i].fileId+‘" >‘;
                    newsform.append(inputNode);
                }
            }else{
                alert("上传失败");
            } 
        },
        showDelete: true,//删除按钮
        statusBarWidth:600,
        dragdropWidth:600,
            //删除按钮执行的方法
        deleteCallback: function (data, pd) {
             var fileId=data.data[0].fileId;
             $.post("control/news/deleteFile.action", {fileId:fileId},
                    function (resp,textStatus, jqXHR) {
                        alert("delete ok");
                        //alert(textSatus);
              }); 
            //删除input标签
            $("#"+fileId).remove();
            pd.statusbar.hide(); //You choice.
        }
    });
});
</script> 

 

/**
     * 上传新闻附件
     * @return
     * {
     *   "status":1,
     *    "message":"ok",
     *    "data":[
     *     {"fileId":"20164225567979423"}
     *     {"fileId":"20164225567979423"}
     *     {"fileId":"20164225567979423"}
     *     ...
     *    ]
     * }
     */
    @RequestMapping(value="upload", method=RequestMethod.POST)
    public String uploadFile(MultipartHttpServletRequest request,Model model,String name,String testName){

       MyStatus status = new MyStatus();
       JSONObject json= new JSONObject();

       Iterator<String> iterator = request.getFileNames();
       //遍历所有上传文件
       JSONArray jsonArray = new JSONArray();
        while (iterator.hasNext()) {
                String fileName = iterator.next();
                MultipartFile multipartFile = request.getFile(fileName);
                String originName=multipartFile.getOriginalFilename();

                //保存文件相对路径:files/
                String relativedir= SiteUtils.getRelativeSavePath("news.file");
                //保存文件名称
                String saveFileName = WebUtils.getFileSaveName(originName);
                try {
                    //保存文件
                    BaseForm.saveFile(relativedir, saveFileName, multipartFile);
                    //构造文件实体
                    NewsFile newsFile = new NewsFile();
                    newsFile.setOriginName(originName);
                    newsFile.setSaveName(saveFileName);
                    newsFile.setSavePath(relativedir+saveFileName);
                    newsFile.setExt(WebUtils.getExtFromFilename(saveFileName));
                    newsFile.setSize(multipartFile.getSize());
                    newsFileService.save(newsFile);
                    //构造json
                    JSONObject fileJson = new JSONObject();
                    fileJson.put("fileId", newsFile.getId());
                    jsonArray.add(fileJson);
                } catch (Exception e) {
                    e.printStackTrace();
                    status.setStatus(0);
                    status.setMessage(e.getMessage());
                    break;
                }
        }
        //返回json数据
        json.put("status", status.getStatus());
        json.put("message", status.getMessage());
        json.put("data", jsonArray);
        model.addAttribute("json", json.toString());
        return SiteUtils.getPage("json");
    }

编写后台删除文件方法

/**
     * 删除附件记录
     * @param fileId
     * @return
     */
    @RequestMapping(value="deleteFile")
    public String deleteNewsFile(String fileId,Model model){

        MyStatus status = new MyStatus();
        try {
            if( BaseForm.validateStr(fileId)){
                newsFileService.delete(fileId);
            }
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            status.setStatus(0);
            status.setMessage(e.getMessage());
        }
        JSONObject json = JSONObject.fromObject(status);
        model.addAttribute("json", json.toString());
        return SiteUtils.getPage("json");
    }  

相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期，如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决，对此我整理了一些资料 喜欢我的文章想与更多资深大牛一起讨论和学习的话 欢迎加入我的学习交流群907694362