博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js前台实现上传图片的预览
阅读量:6543 次
发布时间:2019-06-24

本文共 1685 字,大约阅读时间需要 5 分钟。

网上这样的插件一大堆,不过还是谈下js下代码的实现,加深这方面的理解。

当然也没有一种方式就可以完事的情形,主要就两种方面来处理;

1、file API的filereader接口完成(支持的浏览器:Internet Explorer: 10+ Firefox: 10+ Chrome: 13+ Opera: 12+ Safari: partial)

function show(obj_input){var files = this.files;var file = files[0];var reader = new FileReader(), htmlImage;reader.onload = function(e) {htmlImage = ''; // 这里e.target.result就是base64编码document.innerHTML=htmlImage;var img=document.getElementById('image');img.onload=function(){         img.style.width=220+"px";    img.style.height=120+"px";}}reader.readAsDataURL(file);//以DataURL格式读取文件内容}

这个方面网址()上面的介绍得比较详细,可以参考一下。

2、ie低版本用ie滤镜完成

1 function show(obj_input){ 2  3 //obj_input文件上传控件对象,obj_img图像对象,preview_div预览图装载div对象 4  5 obj_input.select(); 6  7 obj_input.blur();//让上传控件失去焦点,以免ie的安全机制拒绝document.selection.createRange().text的访问 8 //还有一种情况是,如果当前页面被嵌在框架中,则fileImg.blur()之后,file控件中原本被选中的文本将会失去选中的状态,因此,不能使用fileImg.blur()。 可以让当前页面上的其他元素,如div,button等获得焦点即可,如div_view.focus(),或者直接用window.parent.docuemnt.body.focus(). 9 var src = document.selection.createRange().text;10 11 var div_sFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + src + "')";  12             var img_sFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='" + src + "')";  13 14 document.selection.empty();15 16 obj_img.style.filter = img_sFilter;  17  18 obj_img.style.display = "none";19 20 obj_img.style.width = "100%";  21 22 obj_img.style.height = "100%"; 23 24 preview_div.style.width = 220 + 'px';25   26 preview_div.style.height = 120 + 'px'; 27  28 preview_div.style.filter = div_sFilter;29 }

ie6、7、8都可以用滤镜的方式完成预览。

 

转载于:https://www.cnblogs.com/chendc/p/5391033.html

你可能感兴趣的文章
python time 转换&运算tips
查看>>
使用jQuery的validation后,无法引发asp.net按钮的事件处理程序
查看>>
ios判断设备是iphone还是ipad
查看>>
checkbox
查看>>
Leetcode | Path Sum I && II
查看>>
BLOB
查看>>
hdu 5504 GT and sequence
查看>>
版本新特性
查看>>
借教室 Vijos 1782 NOIP2012 D2T2 Lazy 线段树
查看>>
[转载]如何使用eclipse 生成runnable jar包
查看>>
js实现刮刮卡效果
查看>>
使用迭代器逆置容器元素
查看>>
java Future模式核心思想(转)
查看>>
cursor的moveToNext()与moveToFirst()
查看>>
Go:类型断言
查看>>
(转)Android项目重构之路:架构篇
查看>>
CVM 单节点集群配置
查看>>
自定义UICollectionViewLayout(适用于多个section)
查看>>
面试题①
查看>>
每个Java初学者都应该搞懂的问题
查看>>