"Xiao Yue Blog" Html5 upload pictures Mobile end, PC-side Universal

Registered in the blog Park account for some days, feel some Xu gratified, I write something someone is watching, someone in the comments is very happy. (PS: Meet vanity!) ）

Not much nonsense to say, say what we share today is HTML5 upload pictures. We are using it on the mobile side, but this is also universal compatibility on the PC I only tested it on Google. Previously used by the angular write "with the HTML5 file API upload picture preview can". Today abandon angular things to share a HTML5 + JS picture upload case. So today still follow a certain step.

HTML Upload Image

Html

The first step to create HTML, we put a file in the page selection of Input#upload (PS: lazy, here do not write the case again directly copied our page)

<Divclass= "Con4">     <spanclass= "Btn upload">Upload<inputtype= "File"class= "Upload_pic"ID= "Upload" /></span> </Div>

Css

Note: CSS is a bit of a mess to write, can not read to ask me, or write directly on the OK.

. Con4{width:80%;Height:Auto;Overflow:Hidden;margin:15% Auto 0 Auto;Color:#FFFFFF;}. Con4. BTN{width:45%;Height:40px;Line-height:40px;text-align:Center;background:#d8b49c;Display:Block;font-size:16px;Border-radius:5px;}. Upload{float: Left;position:relative;}. Upload_pic{Display:Block;width:100%;Height:40px;position:Absolute; Left:0;Top:0;Opacity:0;Border-radius:5px;}

Javascript

Get the node through getElementById, determine browser compatibility, for browsers that do not support the FileReader interface will give a hint and disable input, otherwise listen for the change event of input.

// Get the Upload button var input1 = document.getElementById ("Upload");   if (typeof filereader=== ' undefined ') {      //     input1.setattribute (' Disabled ', ' disabled '); }Else{      input1.addeventlistener (' Change ', ReadFile,false);}

Then, when File_input's change event is triggered, the function ReadFile () is called. In ReadFile, we first get the file object, and then we use the Type property to detect the files type, we only allow to select the image type of the file, then we new a FileReader instance, and calls the Readasdataurl method to read the selected image file, and finally in the OnLoad event, gets the contents of the file that was successfully read and displays the selected picture as an IMG node.

functionReadFile () {varFile = This. files[0]; if(!/image\/\w+/. Test (File.type)) {Alert ("The file must be a picture!" "); return false; }      varReader =NewFileReader ();      Reader.readasdataurl (file); //when the file read successfully can be transferred to upload the interface, want to preach where (PS: You can send your beautiful photos secretly sent to me!) )Reader.onload =function(e) {vardata = This. Result.split (', '); varTP = (File.type = = ' Image/png ')? ' PNG ': ' jpg '; varA = Data[1]; //needs to be uploaded to the server where AJAX requests can be made         ... ...     }};

Write here we have completed the image upload function, we are interested in their own hands to try, do not understand the place or I write the wrong place must find me oh.

FileReader Methods and Events

Parameters/Events	Describe
Method
Abort	Interrupt Read
Readastext (file, [encoding])	To read a file as text The method has two parameters, where the second parameter is the encoding of the text, and the default value is UTF-8. This method is very easy to understand, the file is read in text mode, the result of reading is the content of this text file.
Readasbinarystring (file)	To read a file into binary code Usually we send it to the back end, and the backend can store the file through this string
Readasdataurl (file)	Read the file as Dataurl Reads a file as a string of data URLs, and reads the small file directly into the page in a specially formatted URL address. Small files refer to files in the format of images and HTML.
Event
Onabort	Triggered when data read is interrupted
OnError	triggered when data read error occurs
Onloadstart	Trigger when data read starts
OnLoad	Trigger when data read completes successfully
Onloadend	Triggered when data read is complete, regardless of successful failure

I wish you all a happy study! Finally finished writing estimates still have a typo. People have different opinions remember to give me a message Oh! [Xiao Yue Blog]

"Xiao Yue Blog" Html5 upload pictures Mobile end, PC-side Universal