Html5 uploads general code for image mobile and PC terminals,

Html5 uploads general code for image mobile and PC terminals,

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.

 HTMLStep 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)

Copy the content to the clipboard using CSS Code.

1. <Div class = "con4">
2. <Span class = "btn upload"> upload <input type = "file" class = "upload_pic" id = "upload"/> </span>
3. </Div>

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

Copy the content to the clipboard using CSS Code.

1. Con {
2. Width: %;
3. Height: auto;
4. Overflow: hidden;
5. Margin: % auto;
6. Color: # FFFFFF;
7. }
8. Con. btn {
9. Width: %;
10. Height: px;
11. Line-height: px;
12. Text-align: center;
13. Background: # dbc;
14. Display: block;
15. Font-size: px;
16. Border-radius: px;
17. }
18. Upload {
19. Float: left;
20. Position: relative;
21. }
22. Upload_pic {
23. Display: block;
24. Width: %;
25. Height: px;
26. Position: absolute;
27. Left :;
28. Top :;
29. Opacity :;
30. Border-radius: px;
31. }

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.

Copy the content to the clipboard using JavaScript Code

1. // Obtain the upload button
2. Var input = document. getElementById ("upload ");
3. If (typeof FileReader === 'undefined '){
4. // Result. innerHTML = "sorry, your browser does not support FileReader ";
5. Input. setAttribute ('Disabled ', 'Disabled ');
6. } Else {
7. Input. addEventListener ('change', readFile, false );
8. }

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.

Copy the content to the clipboard using JavaScript Code

1. Function readFile (){
2. Var file = this. files [];
3. If (! /Image \/\ w +/. test (file. type )){
4. Alert ("the file must be an image! ");
5. Return false;
6. }
7. Var reader = new FileReader ();
8. Reader. readAsDataURL (file );
9. // When the file is read successfully, you can retrieve the upload interface and specify the path to upload (PS: You can secretly send your photos to me !)
10. Reader. onload = function (e ){
11. Var data = this. result. split (',');
12. Var tp = (file. type = 'image/png ')? 'Png ': 'jpg ';
13. Var a = data [];
14. // Ajax requests can be made here for uploads to the server
15. ......
16. }
17. };

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