HTML5+ajax上传图片/文件以及FormData使用简单讲解

教程分享 > Java教程 (5443) 2023-03-28 11:29:14

HTML5+ajax上传图片/文件以及FormData使用简单讲解

HTML5中FormData的使用,解决ajax上传文件/图片难题
1.FormData的创建和使用方式一
创建一个空的 FormData

var fd= new FormData();

使用 append() 方法向该对象里添加字段

fd.append("username", "Groucho");
fd.append("userfile", fileInputElement.files[0]);

2.FormData的创建和使用方式二
使用HTML表单来初始化一个FormData对象

<form id="test-form">
<input type="text" name="name"/>
<input type="password" name="pwd"/>
</form>

var formElement = document.getElementById("test-form");

var newFormData = new FormData(formElement);

在有了FormData对象之后使用ajax（这里简单引用的jQuery的ajax）

$.ajax({
    url:'Your Post Url',
    type:'POST',//上传文件必须为POST,查看解释一
    data:newFormData,//FormData对象
    processData:false,//不转换请求数据
    contentType:false,//contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符
    success:function(data){
        //成功回调
    },
    error:function(ex){
        //错误回调
    }
});

解释一:这里我们就要先说说在 http 中传输文件的问题。起初，http 协议中没有上传文件方面的功能，直到 rfc1867 为 http 协议添加了这个功能。当然在 rfc1867 中限定 form 的 method 必须为 POST ， enctype = “multipart/form-data” 以及<input type = "file">.