ajax上传文件

Posted 2020-08-09

之前用的ajax都是用来传json格式的数据，用ajax传文件还是第一次，因为这个也是第一次尝试，不知道这个方法是不是最好的，如果之后有更好的再进行修改吧。

我找的时候没有在原生的ajax找到，找到了一个上传文件的插件，就是一个封装的ajax的方法，利用这个就能实现ajax上传文件。

下面是总结的一点点代码。

$.ajaxFileUpload({
            url: ‘<%=basePath %>drawingUpload/uploadOneFile.htm‘, 
            type: ‘post‘,
            secureuri: false, //一般设置为false
            fileElementId: ‘files‘, // 上传文件的id、name属性名
            dataType: ‘text‘, //返回值类型，一般设置为json、application/json
            data: { 
                drawingCatalogId: drawingCatalogId,
                 documentNumber: documentNumber,
                 documentName: documentName,
                remark: remark
            },
            success: function(data, status){  
                
                data = data.replace("<PRE>", ‘‘);  //ajaxFileUpload会对服务器响应回来的text内容加上<pre>text</pre>前后缀
            data = data.replace("</PRE>", ‘‘);
            data = data.replace("<pre>", ‘‘);
            data = data.replace("</pre>", ‘‘); //本例中设定上传文件完毕后,服务端会返回给前台[0`filepath]
            //将String字符串转换成json
            var dataset = $.parseJSON(data);
            
            alert(dataset.message);
            window.location.href = "drawingUpload/show.htm";

            },
            error: function(data, status, e){ 
                //alert(e);
            }
        });

 

<input id="files" name="files" type="file">

<script type="text/javascript" src="<%=path%>/resources/js/ajaxfileupload.js"></script>

    @RequestMapping(value="/uploadOneFile.htm", method=RequestMethod.POST)
    public @ResponseBody JSONObject uploadOneFile(HttpServletRequest request,
            int drawingCatalogId,String documentNumber,String documentName,String remark,MultipartFile files)
    {

//TODO

}

备注：测试发现，ajaxfileupload对jQuery版本是有要求的，在使用中ajaxfileupload和jQuery对应的js版本要一致，不然会导致异常发生，可以从ajaxfileupload官网下载，避免版本冲突。