本地预览图片html和js例子

本地预览图片html和js例子，直接上代码吧。

<!DOCTYPE html>

<head>

<title>测试本地图片预览</title>

</head>

<body>

<div>

</div>

</body>

</html>

function previewFunc()

{

document.getElementById("upload_img").click();

}

//值改变的话

document.getElementById("upload_img").onchange = function () {

var sender = this;

if (!sender.value.match(/.jpg|.gif|.png|.bmp/i)) {

alert('图片格式无效！');

return false;

}

var objPreviewImg = document.getElementById('preview_img');

var objPreviewDiv = document.getElementById('preview_div');

if (navigator.userAgent.indexOf("MSIE") > -1) {

//IE浏览器的话

try {

objPreviewImg.src = createFileObj(this.files[0]);

}

catch (e) {

//ie7中不兼容出错跳到这里

this.select(); //选择的时候

top.parent.document.body.focus(); //如果要嵌套到iframe中进行显示的话，需要加这个将焦点聚到iframe里面

this.blur(); //必须要加这个

var src = document.selection.createRange().text; //IE 11中改为如下:document.selection ---》 window.getSelection

document.selection.empty();

objPreviewImg.style.display = "none"; //隐藏img控件

objPreviewDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

objPreviewDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;

}

} else {

//chrome firfox都可以

objPreviewImg.src = createFileObj(this.files[0]);

}

function createFileObj(filePath)

{

var url = null;

if (window.createObjectURL != undefined) {

url = window.createObjectURL(filePath);

} else if (window.URL != undefined) {

url = window.URL.createObjectURL(filePath);

} else if (window.webkitURL != undefined) {

url = window.webkitURL.createObjectURL(filePath);

}

else {

}

return url;

}

</script>

//----------------------------------------------------------------------

以上需要注意的地方是

<inputid="upload_img"type="file"style="width:0px;height:0px;"/>

注意不能用display:none的样式进行隐藏，否则ie7中无论如何都不能获取到对应value值。

以上代码嵌套到iframe中也是可以进行预览的，如果自己想封装组件的朋友可以自己再封装一下，或者用jQuery重写一下就OK了。

来自为知笔记(Wiz)

转载于:https://www.cnblogs.com/workky/p/6061931.html

本地预览图片html和js例子相关推荐

js本地预览图片和转base64
用代码说话: <html> <head><meta charset="UTF-8"><title></title>< ...
JavaScript 实现图片上传前本地预览
JavaScript 实现图片上传前本地预览图片上传前预览,应该算是一个普遍的需求,很多时候可能选中的图片并不是想要的那张,所以需要上传前预览下. JS(浏览器中)是一门特殊的语言,它没有直接读写磁 ...
vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
H5开发：使用H5、CSS、JS、JQUERY实现从本地选择图片、预览图片、上传图片列表
需求描述使用H5.CSS.JS.JQUERY 点击添加图片按钮,从本地选择图片(同名图片不可重复选择),在页面预览选中的图片点击图片查看大图,点击图片右上角"×"删除此图点击 ...
js实现图片上传本地预览
演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html><head>< ...
JS实现图片上传时的本地预览，兼容IE和firefox谷歌
旁白: 一般来说如果要实现在上传前预览图片的话,用纯服务器端的语言必定是办不到的,需要先传到服务器上,哪怕是只是服务器上的临时文件,这也是个很麻烦的事情,不过可以用javascript来做这件事.下面 ...
搞清Image加载事件(onload)、加载状态(complete)后，实现图片的本地预览，并自适应于父元素内(完成)...
onload与complete介绍 complete只是HTMLImageElement对象的一个属性,可以判断图片加载完成,不管图片是不是有缓存:而onload则是这个Image对象的load事件回 ...
本地如何预览php文件上传,如何实现js上传图片本地预览同时支持预览截图的功能...
在项目中经常会用到js上传图片本地预览的效果,同时需要在预览图上直接预览截图的范围. 下面是我写的简单的demo,是用js结合cropper.js模拟实现此项前端的功能,后台则不考虑. 准备:引入文件 ...
element upload预览_vue element upload实现图片本地预览
vue使用element实现本地预览,最主要的是将图片路径转换为base64,供大家参考,具体内容如下 HTML class="avatar-uploader" action=&q ...

本地预览图片html和js例子

本地预览图片html和js例子相关推荐

最新文章

热门文章