html图片读取本地图片,html5读取本地图片多张图片并预览

我们在做开发的时候，会遇到读取本地图片并显示在页面上，那么用h5如何实现呢？

方法一：实现本地图片预览(单张)，URL.createObjectURL(file)

URL.createObjectURL()创建一个新的对象URL,该对象URL可以代表某一个指定的File对象或Blob对象.

html代码

js代码

function changeM(){

var inputJ = $("#changeMore"),

input  = inputJ[0],

Con    = $("#ImgCon");

inputJ.change(function(e){

var file     = e.target.files[0],//拿到原始对象

thisType = file.type,//获取到表面的名称，可判断文件类型

thisSize = file.size,//文件的大小

thisSrc  = URL.createObjectURL(file),//当前对象的地址

img      = $('').attr('src',thisSrc);//创建img对象

//文件加载成功以后，渲染到页面

img.load(function(){

Con.append(img);

URL.revokeObjectURL(thisSrc);//释放内存

});

});

}//

changeM();

方法2ÿ