1. 认识FormData对象
FormData是Html5新加进来的一个类,可以模拟表单数据
| 构造函数 | 解释 |
|---|---|
| FormData (optional HTMLFormElement form) | (可选) 一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框. |
方法
void append(DOMString name,DOMString value)
- name 表单元素名称
- value 表单元素要传递的值
<form name="myForm" enctype="multipart/form-data">
<input type="text" name="userName">
<"file" name="img">
<"button" id="btn" value="submit">
</form>
2. 使用javascript简单实现
function upload() { var userName = document.myForm.userName.value; var img = document.myForm.img.files[0]; var fm = new FormData(); fm.append('userName',userName); fm.append('img',img); var request = new XMLHttpRequest(); request.open('POST','submitform.PHP'); request.send(fm); }'submitform.PHP'); request.send(fm); }3. 使用Ajax实现
$('#btn').click(function () { url: 'submitform.PHP',type: data: fm,contentType: false,//禁止设置请求类型 processData: false,161);">//禁止jquery对DAta数据的处理,默认会处理 //禁止的原因是,FormData已经帮我们做了处理 success: function (result) { //测试是否成功 //但需要你后端有返回值 alert(result); } } ); });$(//但需要你后端有返回值 alert(result); } } ); });4. ajaxfileupload.js插件实现Ajax文件上传
upload(){ $.ajaxFileUpload({ url: 'a.PHP',161);">//用于文件上传的服务器端请求地址 secureuri: false,161);">//一般设置为false fileElementId: 'file',161);">//文件上传空间的id属性 dataType: 'HTML',161);">//返回值类型 一般设置为json success: function (data,status) //服务器成功响应处理函数 { $("#img1").attr("src",data); addI(data); },error: 函数 { alert(e); } } ); }函数 { alert(e); } } ); }