<img src="" width="100px" height="100px"/>
<input type="file" onchange="showPreview(this)"/>
//图片预览的
function showPreview(source){
var file = source.files[0];
if(window.FileReader) {
var fr = new FileReader();
fr.onloadend = function(e) {
$(source).parent().children("img").attr("src",e.target.result);
};
fr.readAsDataURL(file);
}
}
相关文章
- 图片上传预览 支持html5的浏览器
- 分离与继承的思想实现图片上传后的预览功能:ImageUploadView
- 介绍一个比较了各种浏览器对于HTML5 等标准支持程度的网站
- 如何让低版本的IE浏览器(IE6/IE7/IE8)支持HTML5 header等新标签
- 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况
- js基础进阶--图片上传时实现本地预览功能的原理
- 努力学习 HTML5 (4)—— 浏览器对语义元素的支持情况
- form 表单 + HTML5(FileReader) +iframe 实现无刷新图片上传+图片预览效果
- 利用vue-cropper做的关于图片裁剪、压缩、上传、预览等做的一个公共组件
- 图片上传,支持同步/异步、预览(MVC、uploadify异步提交、js预览、ajaxSubmit异步提交)兼容大部分浏览器,含代码