js实现图片实时预览
注: 此博客转自 http://www.cnblogs.com/goody9807/p/6064582.html 转载请注明出处
<body>
上传图片: <input type="file" name="file"
style="width: 200px; height: 20px;" onchange="PreviewImage(this)" id="upload" />
<div id="imgPreview" style="width:120px; height:100px;margin-left: 280px;">
</div>
</body>
</html>
<script type="text/javascript">
function PreviewImage(imgFile) {
var filextension = imgFile.value.substring(imgFile.value.lastIndexOf("."), imgFile.value.length);
filextension = filextension.toLowerCase();
if ((filextension != '.jpg') && (filextension != '.gif') && (filextension != '.jpeg') && (filextension != '.png') && (filextension != '.bmp')) {
alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
imgFile.focus();
}
else {
var path;
if (document.all)//IE
{
imgFile.select();
path = document.selection.createRange().text; document.getElementById("imgPreview").innerHTML = "";
document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果
}
else//FF
{
path = window.URL.createObjectURL(imgFile.files[0]);
document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='" + path + "'/>";
// document.getElementById("img1").src = path;
}
}
}
</script>
js实现图片实时预览的更多相关文章
- js 实现图片实时预览
<body> 上传图片: <input type="file" name="file" style="width: 200px; h ...
- RunJS推荐用于个人使用（使用方便JS、css实时预览、编辑、管理等功能）
RunJS,在线编写.展示html.js.css代码,拥有实时预览.分享.Fork.代码高亮.自己主动完毕等多项特性,提供文件上传.多种登录方式. 地址:http://runjs.cn/ waterm ...
- node.js平台下，cropper.js实现图片裁剪预览并转换为base64发送至服务端。
一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...
- cropper.js实现图片裁剪预览并转换为base64发送至服务端。
一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...
- 图片实时预览JSP加js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS上传图片本地实时预览缩略图
HTML 代码如下 <body> <table width="100%" border="0" cellspacing="0&quo ...
- pdf.js实现图片在线预览
项目需求 前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器 ...
- MWeb 1.4 新功能介绍一：引入文件夹到 MWeb 中管理，支持 Octpress、Jekyll 等静态博客拖拽插入图片和实时预览
之前在 MWeb 中打开非文档库中的 Markdown 文档,如果文档中有引用到本机图片,是没办法在 MWeb 中显示出来和预览的.这是因为 Apple 规定在 Mac App Store(MAS) ...
- JS实现图片base64转blob对象，压缩图片，预览图片，图片旋转到正确角度
base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...
随机推荐
- Sublime Text 3 中文乱码的解决方法
Sublime Text 3 中文乱码表现如下图: 解决方法很简单,三步搞定: 步骤一: 下载ConvertToUTF8,下载地址:http://pan.baidu.com/s/1gd5SWmB 步骤 ...
- python cmd下运行中文乱码 策略
如我运行一个脚本,执行后输出中文看不懂 然后呢在文件头加上 from __future__ import unicode_literals 注意:需要去掉所有字符串前的 u, 这样所有字符串均默认为u ...
- SQL数据库，使用事务执行增删改操作，给自己一个后悔的机会
内容并不复杂,使用起来也比较简单. 主要使用以下3条SQL语句: 开始事物:BEGIN TRAN(全拼 TRANSACTION 亦可)提交事物:COMMIT TRAN回滚事务:ROLLBACK TRA ...
- mySql 基本语法学习笔记
create database if not exists yang; drop database if exists yang; show databases; show dat ...
- 开启GZIP(转)
因为在做一个项目,项目里面服务器主要提供数据,但是数据多了文件就大了,比较浪费流量和时间,我们便用Gzip来处理.我在本机上是apache,服务器上是IIS6.0,用的是php,那么我就在这里分享一下 ...
- freeswitch：error C2220: 警告被视为错误 - 没有生成“object”文件
项目 -> 属性-> 配置属性 -> c/c++ -> 将警告视为错误 -> 否 参考: http://www.cnblogs.com/kex1n/archive/201 ...
- 到入百度LSS framework Reason: image not found
dyld: Library not loaded: @rpath/VideoCore.framework/VideoCore Referenced from: /var/containers/Bund ...
- MySQL数据库5 - 插入数据，修改数据，删除数据
一.插入数据 1. 所有列都插入值 INSERT [INTO] TABLE_NAME VALUES(V1,V2....Vn); 特点:列值同数,列值同序 eg: insert into users v ...
- 进程间通信 System V 消息队列
1.msgget (key_t ket,int flag) ; //创建一个新的消息队列或者访问一个已存在的消息队列 2.msgsnd(int msid, const void *ptr ,size_ ...
- 4 多表代替密码之Hill 密码 2实现
该解密方法的KEY 不是一个数或者一段字符串,而是一个矩阵, 比如有个3*3的KEY: 那么如果我们要加密一个长度为N的字符串, 那么把N除以3,分成M个3个字母组成的小段, 对每个小段尽心加密: 1 ...