zoukankan      html  css  js  c++  java
  • 实现图片上传预览效果

    FileReader是HTML5 File API的一部分。它实现了一种异步文件读取机制。可以把FileReader想象为XMLHttpRequest,区别只是它读取的是文件系统,而不是远程服务器。为了读取文件中的数据,FileReader提供了如下几个方法。

    • readAsText(file,encoding):以纯文本的方式读取文件,将读取到的文件保存到result属性中。
    • readAsDataURL(file):读取文件并将文件以数据URI的形式保存在result属性中。
    • readAsBinaryString(file):读取文件并将一个字符串保存在result属性中,字符串中的每个字符表示一个字节。
    • readAsArrayBuffer(file):读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中。
    • multiple 属性表示支持多张图片
    <div id="wrapper">       
      <input id="fileUpload" type="file" multiple /><br />
      <div id="image-holder"> </div>
    </div>
    $("#fileUpload").on('change', function () {
     
       //获取上传文件的数量
       var countFiles = $(this)[0].files.length;
     
       var imgPath = $(this)[0].value;
       var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
       var image_holder = $("#image-holder");
       image_holder.empty();
     
       if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
           if (typeof (FileReader) != "undefined") {
     
               // 循环所有要上传的图片
               for (var i = 0; i < countFiles; i++) {
     
                   var reader = new FileReader();
                   reader.onload = function (e) {
                       $("<img />", {
                           "src": e.target.result,
                               "class": "thumb-image"
                       }).appendTo(image_holder);
                   }
     
                   image_holder.show();
                   reader.readAsDataURL($(this)[0].files[i]);
               }
     
           } else {
               alert("你的浏览器不支持FileReader!");
           }
       } else {
           alert("请选择图像文件。");
       }
    });

    FileReader 可以支持 Internet Explorer 10+、FireFox,、Chrome 和Opera浏览器

  • 相关阅读:
    MT4系统自带指标代码
    [转载]一个鼠标键盘控制两台甚至多台主机的方法
    国内外证券交易系统开发平台比较
    Win8系统下MT4不能添加指标无法找到技术指标
    Unable to locate package错误解决办法
    ubuntu 常见错误--Could not get lock /var/lib/dpkg/lock
    ubuntu永久修改主机名
    Ant之build.xml详解
    Memory和Storage有什么区别?
    ubuntu下创建eclipse桌面快捷方式
  • 原文地址:https://www.cnblogs.com/qq735675958/p/7483090.html
Copyright © 2011-2022 走看看