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

需求

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

效果

解决方案

通过使用jquery中一款上传文件插件来实现。
下载地址： http://plugins.jquery.com/uploadfile/
帮助文档：http://hayageek.com/docs/jquery-upload-file.php#showold

准备

• 下载该插件
• 该插件依赖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");
    }