Html5 uploads general code for image mobile and PC terminals,

Source: Internet
Author: User

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

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.