zoukankan      html  css  js  c++  java
  • 获取上传图片路径方法(新旧方法)

    旧方法

    //获取上传图片路径1
    function fileComment(obj) {
        /*获取input=file图片路径*/
        var objUrl = getObjectURL(obj.files[0]);
        if (objUrl) {
            return objUrl;
        }
    }
    //获取上传图片路径2
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

    新:FileReader:

    自从有了HTML5的FileReader对象以后,预览图片变得简单多了,不再需要后台的配合,并且JS操作本地文件已经成为了可能。这种方法的思路是:通过FileReader.prototype.readAsDataURL()方法把图片文件转成base64编码,然后把base64编码替换到预览图片的src属性即可。如果想要了解更多关于FileReader对象的,可以看一下这里:FileReader https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
      下面是使用FileReader进行图片预览的简单demo:
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
    <input type="file"><br>
    <img src="" height="200" alt="Image preview area..." title="preview-img">
    <script>
      var fileInput = document.querySelector('input[type=file]'),
              previewImg = document.querySelector('img');
      fileInput.addEventListener('change', function () {
          var file = this.files[0];
          var reader = new FileReader();
          // 监听reader对象的的onload事件,当图片加载完成时,把base64编码賦值给预览图片
          reader.addEventListener("load", function () {
              previewImg.src = reader.result;
          }, false);
          // 调用reader.readAsDataURL()方法,把图片转成base64
          reader.readAsDataURL(file);
      }, false);
    </script>
    </body>
    </html>
  • 相关阅读:
    Infopath Notify 弹出提示信息
    window.showModalDialog 返回值
    【转】获得正文内容中的所有img标签的图片路径
    Json Datable Convert
    Sharepoint 列表 附件 小功能
    Surgey 权限更改
    SQL 触发器用于IP记录转换
    Caml语句 查询分配给当前用户及当前组
    jquery 1.3.2 auto referenced when new web application in VSTS2010(DEV10)
    TFS diff/merge configuration
  • 原文地址:https://www.cnblogs.com/AaronNotes/p/6526479.html
Copyright © 2011-2022 走看看