Ajax实现文件(图片)的上传下载

我们知道表单提交实现文件上传时,需要将表单的enctype值设置为multipart/form-data

<form enctype="multipart/form-data">
    <input type="file" name="icon" id="iconFile">
</form>

但是表单提交无法做到页面无刷新,我们知道让页面无刷新请求可以使用ajax
那么我们就来说说利用ajax如何实现文件的上传

$('#iconFile').change(function () {
    var formData=new FormData();
    formData.append("iconFile", document.getElementById("iconFile").files[0]);
    $.ajax({
        url:"${pageContext.request.contextPath}/uploadServlet",
        processData:false,      //默认为true,对请求传递的参数(formData)不做编码处理
        contentType : false,       //不对请求头做处理
        data:formData,
        type:"post",
        async:true,
        success:function (status) {
            if(status=='200'){
                alert("文件上传成功!");
            }else{
                alert("文件上传失败!");
            }
        },
        error:function (data) {
            alert("文件上传失败!");
        }
    });
});

processData:

类型:Boolean
默认值:true,在使用ajax发送请求时,会把data传递进来的参数转换成一个字符串。如果不希望转换为其他的信息可以设置为false。例如上面的文件上传传递的是一个iconFile的DOM树。

contentType:

post提交默认为"application/x-www-form-urlencoded",get方式提交默认为null,
文件上传提交方式为"multipart/form-data",在文件提交时,设置为false,避免JQuery对其进行操作。

猜你喜欢

转载自blog.csdn.net/Bb15070047748/article/details/88621030
0条评论
添加一条新回复
  
今日推荐