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 "> <TITLE>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> |