ssm使用Ajax的formData進行異步圖片上傳返回圖片路徑,並限制格式和大小

以前整理過SSM的文件上傳,此次直接用代碼了。
前臺頁面和js前端

//form表單
    <form id= "uploadForm" enctype="multipart/form-data">
         <input type="file" name="uploadfile" id="uploadfile"/>
         <input type="button" value="上傳" onclick="doUpload()" class="btn btn-success fileinput-button"/>
         <input type="hidden" name="pictureCertificate" id="pictureCertificate" value="">
   </form>


//js代碼
 function doUpload() {
        /*var formData = new FormData();
        formData.append("uploadfile", document.getElementById("uploadfile").files[0]);*/
        var formData = document.getElementById("uploadfile").files[0]; // js 獲取文件對象
        if (typeof (formData) == "undefined" || formData.size <= 0) {
            alert("請選擇圖片!");
            return;
        } else {
            var formData = new FormData();
            formData.append("uploadfile", document.getElementById("uploadfile").files[0]);
        }
        //var formData = new FormData($( "#uploadForm" )[0]);
        //alert(formData);
        $.ajax({
            url: '<%=basePath%>/creditBill/fileUpload.do' ,
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (returndata) {
                //$("#pictureCertificate").val(returndata);
                if(returndata.code == "3") {
                    alert("上傳圖片格式不正確!");
                } else if (returndata.code == "0") {
                    alert("上傳文件不得大於500k!");
                } else if (returndata.code == "404" || returndata.code == "1") {
                    alert("上傳憑證失敗!");
                } else {
                    alert("上傳憑證成功!");
                    $("#pictureCertificate").val(returndata.path);
                }

            },
            error: function (returndata) {
                alert("上傳憑證失敗!");
            }
        });
    }

後臺代碼linux

/**
     * 圖片上傳
     * @param
     * @param uploadfile
     * @param request
     * @return
     */
    @RequestMapping("/fileUpload")
    @ResponseBody
    public UploadResult handleFormUpload(@RequestParam("uploadfile") List<MultipartFile> uploadfile,
                                   HttpServletRequest request) {
        UploadResult result = new UploadResult();

        //判斷上傳文件是否存在
        if (!uploadfile.isEmpty() && uploadfile.size() > 0) {
            //循環輸出上傳的文件
            for (MultipartFile file : uploadfile) {
                //獲取上傳文件的原始名稱
                String oringinalFilename = file.getOriginalFilename();
                //獲取源文件名後綴
                String prefixName = FilenameUtils.getExtension(oringinalFilename);

                int fileSize = 500000;
                //圖片限制在500k之內
                if(file.getSize() > fileSize) {
                    result.setCode("0");
                    return result;
                } else if(prefixName.equalsIgnoreCase("jpg")
                        || prefixName.equalsIgnoreCase("png")
                        || prefixName.equalsIgnoreCase("jpeg")
                        || prefixName.equalsIgnoreCase("pneg")) {
                    //設置上傳文件的保存地址目錄
                    String dirPath = request.getSession().getServletContext().getRealPath("/fileupload/");
                    //區分windows和linux的\ 和 /
                    //String dirPath = "E:"+System.getProperty("file.separator")+"uploadfile" + System.getProperty("file.separator");
                    //String dirPath = System.getProperty("file.separator") + "usr" + System.getProperty("file.separator") + "local"
                           // + System.getProperty("file.separator")+"imgbak"+System.getProperty("file.separator");
                    System.out.println("dirpath==" + dirPath);
                    File filePath = new File(dirPath);
                    //若是文件地址不存在 則建立目錄
                    if (!filePath.exists()) {
                        filePath.mkdirs();
                    }
                    //使用時間格式從新命名
                    String newFilename = VeDate.getNo(4) + "."+prefixName;
                    System.out.println("/fileupload/" + newFilename);
                    try {
                        //使用MultipartFilr接口的方法完成文件上傳到指定位置
                        file.transferTo(new File(dirPath + newFilename));
                        String filepath = "/fileupload/" + newFilename;
                        result.setPath(filepath);
                    } catch (IOException e) {
                        result.setCode("1");
                        return result;
                    }
                } else {
                    System.out.println("上傳圖片格式不正確");
                    result.setCode("3");
                    return result;
                }
            }
            //上傳成功
            return result;
        } else {
            result.setCode("404");
            return result;
        }
    }

UploadResult 實體類ajax

/**
 * @author 
 * @version V1.0
 * @Description:
 * @date 2018/1/23 17:03
 */
public class UploadResult {

    /**
     * 錯誤代碼
     */
    private String code;
    /**
     * 上傳文件路徑
     */
    private String path;
    //……
}

小結

工做總結,都是文件上傳,只是狀況不一樣,原本想用前端文件上傳的框架,結果半天都不行,就用了Ajax的上傳方式,結果還好。windows

相關文章
相關標籤/搜索