Home > Developer > Web Develop
<?Php
If (Isset($_post[' Upload '])) {
Var_dump($_files);
Move_uploaded_file($_files[' Upfile '][' Tmp_name '], ' up_tmp/'.Time().'. Dat ');
Header (' location:test.php ');
Exit;
}
?>
<!doctype html>
Lang="EN">
<meta CharSet="Utf-8">
<title>HTML5 Ajax Uploader</title>
<script Src="Jquery-2.1.1.min.js"></script>
<body>
<p><input Type="File" Id="Upfile"></P>
<p><input = "button" id=< Span class= "ATV" > "Upjs" value= with native JS upload "></P>
<p> <input type= "button" id= "upjquery" value= "upload with jquery" ></P>
<SCRIPT>
/* native JS version */
document. "Upjs" = function () Span class= "pun" >{
/* FormData is the form data class */
var fd = new FormData();
var ajax = new XMLHttpRequest();
FD. Append("Upload", 1);
/* Add the file to the form */
Fd.Append("Upfile",Document.getElementById("Upfile").Files[0]);
Ajax.Open("POST", "Test.php", True);
Ajax.OnLoad= function () {
Console.Log(Ajax.ResponseText);
};
Ajax.Send(Fd);
}
/* JQuery Edition */
$(' #upJQuery ').On(' Click ', function() {
var fd = new FormData ($ (' #form1 ') [0]); This way, pictures and text can be transferred
$.Ajax({
Url: "Test.php",
Type: "POST",
ProcessData: False contenttype: data: Fd success: function (d) {
consolelog (d }
});
</SCRIPT>
</BODY>
/span>
remarks
HTML5 has been able to upload files with Ajax, and the code is very simple, with the help of the FormData class to send file data.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
