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 ...
随机推荐
- How to create your own custom 404 error page and handle redirect in SharePoint 分类： Sharepoint 2015-07-08 00:22 4人阅读 评论(0) 收藏
1. In your MOSS server, make a copy of %systemdrive%\Program Files\Common Files\Microsoft Shared\Web ...
- 从新 开始学习java
今天备受打击了,群里 发一个段 招租的代码.挺火的,一时没想出来.就亲测了一遍.做了两遍才看出来原因,对此感觉基础不扎实,从新学习,当做复习. 群里传的代码 亲测,代码. 了解缘由. package ...
- 一次线上http接口调用不通相关的解决过程
2016-05-25 08:58:34 昨天线上小白系统因为调用外部http接口,超时不释放,导致页面反应很慢,时间一长,报502错误. 上网查了下,502错误是因为服务对于客户的请求没有得到及时的反 ...
- php序列化和反序列化
一 使用系统函数serialize和unserilazie <?php class A { public $a = "aa"; public $b = 10; functio ...
- Python 3.x 使用csv模块写入数据
with open(fileName,'w',newline='') as f: self.fileNames = ['timestamp','elapsedtime'] writer = csv.D ...
- Win7下Hyenae的安装
(1)下载 链接:http://sourceforge.net/projects/hyenae/ 资源:hyenae-0.36-1_fe_0.1-1-win32.exe (2)README --- ...
- Dotspatial 创建面状图层
using DotSpatial.Controls;using DotSpatial.Data;using DotSpatial.Data.Forms;using DotSpatial.Plugins ...
- 2016 - 2 - 19 ARC内存管理知识总结（一，arc基本概念及alloc等方法的实现）
一. ARC的基本概念 1. 在objc中采用automatic reference counting 机制, 让编译器来进行内存管理.在降低程序崩溃,内存管理泄漏等风险的同时,很大程度减少了程序员的 ...
- sync_with_stdio
/* The synchronization referred to is @e only that between the standard * C facilities (e.g., stdout ...
- 虚机centos和本机Windows之间文件的拷贝无法用xftp时用FileZilla也行
步骤如下: 1.如果Centos没有安装ssh,则需要先安装: 2.查看虚拟机中IP地址,命令如下: ifconfig 3.在windows中安装ftp软件 FileZilla启动软件如图: 6 这 ...