Html5 ajax multi-image preview Upload image example

Source: Internet
Author: User
Tags file upload

Recently is not particularly busy, I used HTML5 to write a upload image (or other documents) page, the main use is the HTML5 file API, this page is relatively simple, did not do style optimization, including upload picture preview, upload more pictures, Upload progress bar (using HTML5 progress tags), upload speed, etc., such as Delete selected photos, select Photos, continue to select photos and other simple features I did not write (directly in the logic of the code to modify the Uploadimgarr array), In addition can be based on the type of picture filetype, size file.size to limit the type of upload pictures.
PS: Due to my limited space flow, Gu did not put the online demo to tell you, oh, if there is a need for examples, you can leave a message to contact me.
HTML5 Ajax upload Image code is as follows:

The code is as follows Copy Code

<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
&LT;TITLE&GT;HTML5 Upload Pictures </title>
<style type= "Text/css" >
Li{list-style:none}
Li img{width:100px}
. tips{color:red}
</style>
<body>
<p> Note that the picture is too small to see the progress bar </p>
<input type= "File" id= "Filesinput" multiple/>
<br><br>
<a href= "javascript:;" id= "Btnupload" > Start uploading </a>
<p id= "Info" ></p>
<label> Read progress: </label><progress id= "Progress" value= "0" max= "></progress>"
<span id= "percent" ></span>
<p id= "Uploadspeed" ></p>
<ul id= "Imagebox" ></ul>
<script type= "Text/javascript" >
Define methods to get objects
function $ (ID) {
return document.getElementById (ID);
}
var filesinput = $ ("Filesinput"),
Info = $ ("info"),
Imagebox = $ ("Imagebox"),
Btnupload = $ ("Btnupload"),
Progress = $ ("Progress"),
Percent = $ ("percent"),
Uploadspeed = $ ("Uploadspeed");
Defines an array that holds picture objects
var uploadimgarr = [];
To prevent the image upload completed, and then click the Upload button to repeat the upload picture
var isupload = false;
Defines a function to get picture information
function GetFiles (e) {
Isupload = false;
E = e | | window.event;
Get a list of picture information in file input
var files = e.target.files,
Verify the regular of the picture file
reg =/image/.*/i;
Console.log (files);
for (var i = 0,f; f = files[i]; i++) {
After you remove this if, you can also upload other files
if (!reg.test (F.type)) {
imagebox.innerhtml = "<li> you selected" + F.name + "file is not a picture </li>";
Jump out of the loop
Continue
}
Console.log (f);
Uploadimgarr.push (f);
var reader = new FileReader ();
Similar to the Native JS implementation tab (Closure method), see http://www.css119.com/archives/1418
Reader.onload = (function (file) {
Get picture-related information
var fileSize = (file.size/1024). toFixed (2) + "K",
FileName = File.name,
FileType = File.type;
Console.log (FileName)
return function (e) {
Console.log (E.target)
Get the width and height of a picture
var img = new Image ();
Img.addeventlistener ("Load", imgloaded, false);
IMG.SRC = E.target.result;
function imgloaded () {
ImgWidth = Img.width;
ImgHeight = Img.height;
The picture is loaded to get imgwidth and ImgHeight
imagebox.innerhtml + + <li> The name of the picture is: "+ FileName +"; The size of the picture is: "+ fileSize +"; The type of picture is: "+ FileType +"; The size of the picture is: "+ imgwidth +" X "+ imgheight +" </l I> ";
}
}
}) (f);
Read File contents
Reader.readasdataurl (f);
}
Console.log (Uploadimgarr);
}
if (window. File && window. FileList && windows. FileReader && windows. Blob) {
Filesinput.addeventlistener ("Change", GetFiles, false);
} else {
info.innerhtml = "Your browser does not support HTML5 long passes";
Info.classname= "Tips";
}
Start uploading photos
function Uploadfun () {
var j = 0;
function Fun () {
if (uploadimgarr.length > 0 &&!isupload) {
var singleimg = uploadimgarr[j];
var xhr = new XMLHttpRequest ();
if (xhr.upload) {
progress bar (see http://www.css119.com/archives/1476)
Xhr.upload.addEventListener ("Progress",
Function (e) {
if (e.lengthcomputable) {
Progress.value = (e.loaded/e.total) * 100;
percent.innerhtml = Math.Round (e.loaded * 100/e.total) + "%";
Calculate speed
var nowdate = new Date (). GetTime ();
var x = (e.loaded)/1024;
var y = (nowdate-startdate)/1000;
uploadspeed.innerhtml = "Speed:" + (x/y). toFixed (2) + "k/s";
} else {
percent.innerhtml = "Cannot calculate file size";
}
},
FALSE);
File upload success or failure
Xhr.onreadystatechange = function (e) {
if (xhr.readystate = = 4) {
if (Xhr.status = && eval ("+ Xhr.responsetext +")). Status = = True) {
Info.innerhtml + + singleimg.name + "upload complete;";
Because the progress event is to return the data for a certain period of time, so the individual progress cannot be 100%, forcing the setting after this setting is passed 100%
Progress.value = 100;
percent.innerhtml = "100%";
Isupload = true;
} else {
info.innerhtml + = Singleimg.name + "upload failed;";
}
Upload a successful (or failed) one, call the fun function again, simulate the loop
if (J < uploadimgarr.length-1) {
j + +;
Isupload = false;
Fun ();
}
}
};
var formdata = new Formdata ();
Formdata.append ("Filedata", singleimg);
Start uploading
Xhr.open ("POST", "upload.php", true);
Xhr.send (Formdata);
var startdate = new Date (). GetTime ();
}
}
}
Fun ();
}
Btnupload.addeventlistener ("Click", Uploadfun, false);
</script>
</body>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.