[Xiaoyue blog] Html5 uploads images to mobile terminals and PCs for general purposes,

[Xiaoyue blog] Html5 uploads images to mobile terminals and PCs for general purposes,

I have been registering an account in the blog garden for some days. I feel a little pleased that some people are reading what I wrote and others are very happy to comment on it. (Ps: satisfy your vanity !)

I will not talk much about it. I will share with you today that html5 uploads images. We use it on mobile terminals, but I only tested the General compatibility on pc. I used angular to write "Upload image preview with HTML5 File API". Today, we will share an html5 + js Image Upload case with angular. So let's take some steps today.

HTML upload Image

HTML

Step 1: Create html. We will place the input # upload selected for a file on the page (PS: lazy. Here we will not write the case again and copy our page directly)

<Div class = "con4"> <span class = "btn upload"> upload <input type = "file" class = "upload_pic" id = "upload"/> </span> </div>

 

CSS

Note: css is a bit messy. If you cannot understand it, you can ask me, or simply write it on your own.

.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 to determine the browser compatibility. If the browser does not support the FileReader interface, a prompt is provided and the input is disabled. Otherwise, the system listens to the change event of the input.

// Obtain the upload button var input1 = document. getElementById ("upload"); if (typeof FileReader = 'undefined') {// result. innerHTML = "sorry, your browser does not support FileReader"; input1.setAttribute ('Disabled ', 'Disabled');} else {input1.addEventListener ('change', readFile, false );}

 

Then, when the change event of file_input is triggered, the readFile () function is called (). In readFile, we first obtain the file object, and then use the type attribute of file to detect the file type. Of course, we can only select an image file, and then we create a new FileReader instance, call the readAsDataURL method to read the selected image file. In the onload event, obtain the successfully Read File Content and insert an img node to display the selected image.

Function readFile () {var file = this. files [0]; if (! /Image \/\ w +/. test (file. type) {alert ("the file must be an image! "); Return false;} var reader = new FileReader (); reader. readAsDataURL (file); // when the file is read successfully, you can retrieve the upload interface and where to upload it (PS: You can secretly send your photos to me !) Reader. onload = function (e) {var data = this. result. split (','); var tp = (file. type = 'image/png ')? 'Png ': 'jpg'; var a = data [1]; // you can upload the file to the server for ajax requests ......}};

Here we have completed the image upload function. If you are interested, please try it by yourself. If you do not understand it, or if I am wrong, please contact me.

 

FileReader methods and events

Parameter/event	Description
Method
Abort	Interrupted reading
ReadAsText (file, [encoding])	Read a file as text The method has two parameters, the second is the text encoding method, the default value is UTF-8. This method is very easy to understand. It reads the file as text, and the read result is the content in the text file.
ReadAsBinaryString (file)	Read Binary code from a file We usually send it to the backend. the backend can store files through this string.
ReadAsDataURL (file)	Read the file as DataURL Reads a file as a string of Data URLs and directly reads a small file into the page at a URL address in a special format. A small file is an image or html file.
Event
Onabort	Triggered when Data Reading is interrupted
Onerror	Triggered when a data read error occurs.
Onloadstart	Triggered when Data Reading starts.
Onload	Triggered when Data Reading is completed successfully.
Onloadend	Triggered when Data Reading is complete, no matter whether the operation fails

I wish you a pleasant learning experience! Finally, an estimate is still incorrect. If you have different opinions, please remember to leave me a message! [Xiaoyue blog]