Home > Developer > Web Develop
<! DOCTYPE html>
<title>html5 Ajax upload file </title>
<body>
<progress id= "ProgressBar" value= "0" max= "n";
</progress>
<span id= " Percentage "></SPAN>
<br/>
<input type=" file "id=" file "Name=" Filedata "onchange=" Handlefiles (This) "/>
<input type=" button "onclick=" Upladfile () "value=" submit "/>
<div id=" FileList "style=" width:200px;height:200px; " ></div>
<script type= "text/javascript";
function Handlefiles (obj) {
var files = obj.files;
var img = new Image ();
var reader = new FileReader ();
Reader.readasdataurl (files[0]);
Reader.onload = function (e) {
Alert (files[0].name + "," +e.total + "bytes");
IMG.SRC = This.result;
Img.width = 200;
Filelist.appendchild (IMG);
}
}
function Upladfile () {
var fileobj = document.getElementById ("file"). Files[0];//JS Get File Object
// FormData Object
var form = new FormData ();
Form.append ("Author", "Hooyes"); You can increase the form data
Form.append ("file", fileobj); File Object
XMLHttpRequest Object
var xhr = new XMLHttpRequest ();
Xhr.open ("Post", "upload.php", true);
Xhr.onload = function () {
Alert ("Success");
};
Xhr.upload.addEventListener ("Progress", progressfunction, false);
Xhr.send (form);
}
function Progressfunction (evt) {
var ProgressBar = document.getElementById ("ProgressBar");
var percentagediv = document.getElementById ("percentage");
if (evt.lengthcomputable) {
Progressbar.max = Evt.total;
Progressbar.value = evt.loaded;
percentagediv.innerhtml = Math.Round (evt.loaded/evt.total * 100) + "%";
}
}
</script>
</body>
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
