html5读取本地文件,图片预览
2015-08-20 17:58
671 查看
这里只是写了方法的原型,可以根据需求设置上传的类型,大小。可能有不足的地方,希望大神指正!
案例1,实现本地图片预览(单张),URL.createObjectURL(file)
URL.createObjectURL()创建一个新的对象URL,该对象URL可以代表某一个指定的
html代码
js代码
[b]案例2,实现本地图片预览(单张),FileReader()[/b]
关于fileReader()的方法介绍
js 代码
[b]案例3,[b]实现本地图片预览(多张)[/b][/b]
方法和前两种一样,拿到的只不过是一个数组,原理都是一样的。
js代码
案例1,实现本地图片预览(单张),URL.createObjectURL(file)
URL.createObjectURL()创建一个新的对象URL,该对象URL可以代表某一个指定的
File对象或
Blob对象.
html代码
<input type="file" id="changeMore"> <div id="ImgCon"></div>
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 = $('<img>').attr('src',thisSrc);//创建img对象 //文件加载成功以后,渲染到页面 img.load(function(){ Con.append(img); URL.revokeObjectURL(thisSrc);//释放内存 }); }); }// changeM();
[b]案例2,实现本地图片预览(单张),FileReader()[/b]
关于fileReader()的方法介绍
<input type="file" id="changeMore"> <div id="ImgCon"></div>
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,//文件的大小 reader = new FileReader(); //readAsDataURL(file),读取文件,将文件以数据URL的形式保存在result的属性中 reader.readAsDataURL(file); //文件加载成功以后,渲染到页面 reader.onload = function(e) { var $img = $('<img>').attr("src", e.target.result); Con.append($img) } }); }//changeM end! changeM();
[b]案例3,[b]实现本地图片预览(多张)[/b][/b]
方法和前两种一样,拿到的只不过是一个数组,原理都是一样的。
<input type="file" id="changeMore" multiple="multiple"> <div id="ImgCon"></div>
js代码
function changeM(){ var inputJ = $("#changeMore"), input = inputJ[0], Con = $("#ImgCon"); inputJ.change(function(e){ var files = e.target.files,//拿到file数组 thisSrc = '';//当前的地址 for(var i = 0; i < files.length; i++ ){ thisSrc = URL.createObjectURL(files[i]); //文件加载成功后渲染 $('<img>').attr('src',thisSrc).load(function(){ Con.append( this ); URL.revokeObjectURL(thisSrc);//释放内存 }); } }); }// changeM();
相关文章推荐
- html5 使用FileReader对象的readAsDataURL方法来读取图像文件
- h5画圆
- html5泡泡龙游戏开发随笔
- HTML5 Boilerplate笔记(3)
- HTML5 Boilerplate笔记(2)(转)
- HTML5---Canvas-模拟地球-星球运行轨道
- HTML5---canvas 指针时钟-clock
- Webkit中HTML5 Video的实现分析-HTMLMediaElement & MediaPlayer
- 移动设备 h5屏幕适配
- HTML5---Canvas-画线,空心图,矩形,文字,三角形,旋转图片
- 后台模版第二季,真正好用漂亮,HTML5+CSS3搭建,下载即用,无需二次编写。
- HTML5----video ,audio常规操作
- HTML5标签
- H5上传图片
- HTML5 学习记录——1
- HTML5 boilerplate 笔记(转)
- HTML5+ 打开关闭侧滑窗口
- Chrome/Chromium HTML5 video 视频播放硬件加速
- html5+css3 权威指南阅读笔记(三)---表单及其他新增和改良元素
- 普元日记---HTML5底部遮罩层