Home > Developer > Web Develop
Original address: http://blog.sina.com.cn/s/blog_5d64f7e3010127ns.html
Use of two objects
First object:FormData
Second object:XMLHttpRequest
Currently the new version of Firefox and Chrome and other support HTML5 browser perfect support these two objects, but IE9 has not supported FormData objects, still using IE6? Can only be a deep sigh ....
With these two objects, we can actually upload the file in Ajax mode.
Example code:
<! DOCTYPE html>
<TITLE>HTML5 Ajax Uploading Files </title>
<script type= "Text/javascript" >
function Upladfile () {
var fileobj = document.getelementbyidx_x_x ("file"). Files[0]; Get File Object
var Filecontroller = ".. /file/save "; Receive the background address of the uploaded file
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", Filecontroller, True);
Xhr.onload = function () {
Alert ("Upload complete!");
};
Xhr.send (form);
}
</script>
<body>
<input type= "File" id= "file" name= "MyFile"/>
<input type= "button" onclick= "Upladfile ()" value= "Upload"/>
</body>
Very concise code, you can achieve the Ajax way to upload files, the above code using <input type= "file"/> This traditional method of selecting files to produce file objects, HTML5 also support the use of a variety of more flexible ways, such as drag and drop files to the specified element.
Ajax has successfully uploaded the file, but then we will think of a problem, how to display the progress bar? With this problem, the brain will think, Flash? Browser plugin?.
No, I don't need these things now.
Get started, make a progress bar, the progress bar is also very simple, using HTML5 new tags:
<progress id= "ProgressBar" value= "0" max= ">" </progress>
This in the browser will be presented a progress bar, now we have to do is in the upload, real-time to change its value, and then the progress of the problem presented to it.
We do not need to modify the server side, only need to xhr the object in JS plus an event.
Xhr.upload.addEventListener ("Progress", progressfunction, False)
When Progressfunction is called, it is passed into an event object, which has two properties, one of which is loaded, which is total, which represents the uploaded value, and the value to be uploaded.
That's exactly what we need, so this method can be written like this:
function Progressfunction (evt) {
var ProgressBar = document.getelementbyidx_x_x ("ProgressBar");
if (evt.lengthcomputable) {
Progressbar.max = Evt.total;
Progressbar.value = evt.loaded;
}
}
This will be done and the upload progress is displayed.
Make an adjustment as follows for the first example code above:
Example code 2, with progress display:
<! DOCTYPE html>
<TITLE>HTML5 Ajax Uploading Files </title>
<script type= "Text/javascript" >
function Upladfile () {
var fileobj = document.getelementbyidx_x_x ("file"). Files[0]; JS Get File Object
var Filecontroller = ".. /file/save "; Receive the background address of the uploaded file
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", Filecontroller, True);
Xhr.onload = function () {
Alert ("Upload complete!");
};
Xhr.upload.addEventListener ("Progress", progressfunction, false);
Xhr.send (form);
}
function Progressfunction (evt) {
var ProgressBar = document.getelementbyidx_x_x ("ProgressBar");
var percentagediv = document.getelementbyidx_x_x ("percentage");
if (evt.lengthcomputable) {
Progressbar.max = Evt.total;
Progressbar.value = evt.loaded;
percentagediv.innerhtml = Math.Round (evt.loaded/evt.total * 100) + "%";
}
}
</script>
<body>
<progress id= "ProgressBar" value= "0" max= ">"
</progress>
<span id= "Percentage" ></span>
<br/>
<input type= "File" id= "file" name= "MyFile"/>
<input type= "button" onclick= "Upladfile ()" value= "Upload"/>
</body>
Programs that receive files in the background can be written in any language (C#,php,python, etc.), using C # in the above example
It's simple, no need to make any changes to this progress bar.
var flist = request.files;
for (int i = 0; i < flist. Count; i++)
{
String FilePath = "E:\\hooyes\\files\\";
var c = Flist[i];
FilePath = Path.Combine (FilePath, c.filename);
C.saveas (FilePath);
}
Ajax File Upload
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
