[Ajax]上傳檔案__Ajax

首先上傳檔案是基於兩個JS庫實現的 jQuery (本人使用的jquery-2.1.4.js) ajaxfileupload.js (有多個版本,可能存在版本BUG)

HTML部分

<!-- 必須要有name和id屬性--><input id="imgFile" type="file" name="fil"/>

JS部分

$(document).ready(function(){            /*                注意事項:                     1>input file 必須要有name屬性                    2>ajaxFileUpload 中 dataType必須大寫                        不然google瀏覽器報錯            */            //當file選擇檔案後            $("#imgFile").on('change',function(){                $.ajaxFileUpload({                    url:'fileController/fileUpload',//用於檔案上傳的伺服器端請求地址                    secureuri: false, //是否需要安全性通訊協定，一般設定為false                    fileElementId: 'imgFile', //檔案上傳域的ID                    dataType: 'JSON', //傳回值類型                     success: function (data, status){                        //伺服器成功響應處理函數                        alert(data);                    },                      error: function (data, status, e){                        //伺服器響應失敗處理函數                        //e 異常資訊                        alert(e);                    }                });            });        });

後台部分

    /**     * 注 : MultipartFile必須標註     *     @RequestParam("fil")      *     fil為前端file的name]     *          *     UploadUtil.uploadImg()為後台上傳方法,     *     內部會返回JSON資料,返回的為圖片地址     */    @RequestMapping("fileUpload")    public void fileUpload (HttpServletRequest request ,             HttpServletResponse response,            @RequestParam("fil") MultipartFile file){        try {            UploadUtil.uploadImg(request, response, file);        } catch (IOException e) {            e.printStackTrace();        }    }