码迷,mamicode.com
首页 > Web开发 > 详细

上传本地图片

时间:2015-11-22 11:09:04      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:

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就好了。

https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications

上传本地图片

标签:

原文地址:http://www.cnblogs.com/wz0107/p/4985444.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!