Home > Article > Backend Development > Using PHP and HTML5 FormData to implement refresh-free file upload tutorial, _PHP tutorial
Using PHP and HTML5 FormData to implement refresh-free file upload tutorial, _PHP tutorial
- WBOYOriginal
- 2016-07-13 10:19:26927browse
Refresh-free file upload tutorial using PHP and HTML5 FormData,
No-refresh file upload is a common and somewhat complicated problem. A common solution is to construct an iframe.
In HTML5, a FormData object API is provided. Through FormData, a form request can be easily constructed and sent through XMLHttpRequest. It is also possible to send files through the FormData object, so uploading without refreshing becomes very simple.
So how to use FormData? Below, Bangkejia will give a brief introduction to this.
1. Construct FormData object
If you want to get a FormData object, it’s very simple:
var fd = new FormData();
The FormData object only provides one method append, which is used to add form request parameters to the object.
In current mainstream browsers, FormData can be obtained or modified in the following two ways.
Method 1: Create an empty FormData object, and then use the append method to add key-value pairs one by one. Example:
var fd = new FormData();
fd.append("name", "帮客之家");
fd.append("blog", "http://jb51.net");
fd.append("file", document.getElementById("file"));
This method does not require the existence of HTML form objects.
Method 2: Get the form element object and pass it into the FormData object as a parameter. Example:
var formobj = document.getElementById("form");
var fd = new FormData(formobj);
Of course, you can also use the append method to continue adding other parameters to fd.
2. FormData sends request
Now that I have obtained the FormData object, how do I send a request? The FormData object is mainly used in the send method of the enhanced XMLHttpRequest object. Refer to the following example:
var xhr = new XMLHttpRequest();
xhr.open("POST" ,"http://jb51.net" , true);
xhr.send(fd);
xhr.onload = function(e) {
if (this.status == 200) {
alert(this.responseText);
}
};
3. Using FormData in jquery
In jQuery’s ajax method, you can also use the FormData method to achieve refresh-free upload. But please pay attention to the parameter settings, refer to the following:
$.ajax({
url: "http://jb51.net",
type: 'POST',
data: fd,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType:false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData:false
}).done(function(result){
console.log(result);
}).fail(function(err){
console.log(err);
});
4. A complete example (including PHP processing example):
<?php
//php 接收表单提交信息并打印
if( isset( $_REQUEST['do']) ){
var_dump($_REQUEST);
var_dump($_FILES);
die();
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>FormData Test - jb51.net</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<form id="form">
<input type="file" name="file" id="file" />
<input type="text" name="name" id="" value="帮客之家" />
<input type="text" name="blog" id="" value="http://jb51.net" />
<input type="submit" name="do" id="do" value="submit" />
</form>
<script>
$("form").submit(function(e){
e.preventDefault();
//空对象然后添加
var fd = new FormData();
fd.append("name", "帮客之家");
fd.append("blog", "http://jb51.net");
fd.append("file", document.getElementById("file"));
//fd.append("file", $(":file")[0].files[0]); //jQuery 方式
fd.append("do", "submit");
//通过表单对象创建 FormData
var fd = new FormData(document.getElementById("form"));
//var fd = new FormData($("form:eq(0)")[0]); //jquery 方式
//XMLHttpRequest 原生方式发送请求
var xhr = new XMLHttpRequest();
xhr.open("POST" ,"" , true);
xhr.send(fd);
xhr.onload = function(e) {
if (this.status == 200) {
alert(this.responseText);
};
};
return;
//jQuery 方式发送请求
$.ajax({
type:"post",
//url:"",
data: fd,
processData: false,
contentType: false
}).done(function(res){
console.log(res);
});
return false;
});
</script>
</body>
</html>