zoukankan      html  css  js  c++  java
  • 上传本地图片

    input type=file可以用来上传文件。

    DOM(input)有files属性(一个数组),用来存放file对象。file对象有size(byte unit),name,type3个属性

    可以用fileReader这个东西把数据读出来再显示到img标签中。

    弄个id为preview的dom,把每个上传的img都显示在里

        var file = files[i];
        var imageType = /^image//;
        //只能传image的
        if ( !imageType.test(file.type) ) {
          continue;
        }
        
        var img = document.createElement("img");
        img.classList.add("obj");
        img.file = file;
        // Assuming that "preview" is the div output where the content will be displayed
        preview.appendChild(img);
        
        var reader = new FileReader();
        reader.onload = (function(aImg) { 
          return function(e) { 
            aImg.src = e.target.result; 
          }; 
        })(img);
    reader.readAsDataURL(file);

    创建一个文件读取器的实例,把上传过来的东西读成 data: URL,读好只好,reader.result就会存一个data:base64 的一段代码,直接赋给img.src就好了。

    另外IE要做滤镜,这个是JQ的一个兼容版本。
    http://www.oschina.net/code/snippet_1049351_26784


    https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications
  • 相关阅读:
    vue-nuxtjs
    mongodb4.0支持事务
    promisify,promisifyAll,promise.all实现原理
    nodejs, 阿里oss上传下载图片
    数据库备份与还原
    SQL 数据类型、约束、索引及视图
    数据库的查询
    数据库(增、删、改、查)
    数据库基础知识
    C#语言小结
  • 原文地址:https://www.cnblogs.com/wz0107/p/4985444.html
Copyright © 2011-2022 走看看