[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();
        }
    }