zoukankan      html  css  js  c++  java
  • HTML5图片上传预览

    HTML5实现图片的上传预览,需要使用FileReader对象。

    FileReader: The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.

    也就是说,使用FileReader对象先读取用户需要上传的图片,这个时候,图片是保存在浏览器中的,然后通过设置img元素的src,来预览图片,方法很简单。

    在使用FileReader时需要先弄明白其Event handlers和方法。

    Event handlers
    Event handler描述
    FileReader.onabort A handler for the abort event. This event is triggered each time the reading operation is aborted.
    FileReader.onerror A handler for the error event. This event is triggered each time the reading operation encounter an error.
    FileReader.onload A handler for the load event. This event is triggered each time the reading operation is successfully completed.
    FileReader.onloadstart A handler for the loadstart event. This event is triggered each time the reading is starting.
    FileReader.onloadend A handler for the loadend event. This event is triggered each time the reading operation is completed (either in success or failure).
    FileReader.onprogress A handler for the progress event. This event is triggered while reading a Blob content.
    Metchods
    Method描述
    FileReader.abort() Aborts the read operation. Upon return, the readyState will be DONE.
    FileReader.readAsArrayBuffer() Starts reading the contents of the specified Blob, once finished, the result attribute contains an ArrayBuffer representing the file's data.
    FileReader.readAsBinaryString() Starts reading the contents of the specified Blob, once finished, the result attribute contains the raw binary data from the file as a string.
    FileReader.readAsDataURL() Starts reading the contents of the specified Blob, once finished, the result attribute contains a data: URL representing the file's data.
    FileReader.readAsText() Starts reading the contents of the specified Blob, once finished, the result attribute contains the contents of the file as a text string.

    所以只需要使用readAsDataURL()方法读取图片,绑定FileReader的onload事件,将读取的result中的url设置到img的src上

     1 <div><input id="upload" type="file"></div>
     2 <div><img id="pic" src=""></div>
     3 <script>
     4     var reader = new FileReader();
     5     reader.onload = function(e){
     6         document.getElementById('pic').setAttribute('src', e.target.result);
     7     };
     8     function readURL(input) {
     9         if (input.files && input.files[0]) {
    10             reader.readAsDataURL(input.files[0]);
    11         }
    12     };
    13     document.getElementById('upload').onchange = function(){
    14         readURL(this);
    15     };
    16 </script>
  • 相关阅读:
    makefile基础(GNU)
    7z命令行工具
    使用getopt函数对windows命令行程序进行参数解析
    在iMac机os x上装win7双系统经验心得
    windows操作技巧
    【SpringBoot】SpringBoot 整合RabbitMQ(二十)
    【RabbitMQ】 RabbitMQ 基本概念及测试
    【SpringBoot】SpringBoot 整合Redis缓存(十九)
    【SpringBoot】SpringBoot 自定义starter(十七)
    【SpringBoot】SpringBoot 事件监听机制(十六)
  • 原文地址:https://www.cnblogs.com/zfy0098/p/5310506.html
Copyright © 2011-2022 走看看