需求

在頁面端可以在頁面不重新整理情況下上傳多個有大小限制的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");
    }