【JavaScript】图片上传预览
上传文件实时显示【一张图片】：
个人理解：给img的src传值：这个值就是input[type='file']的value；
不过你要判断浏览器类型【很多】：IE6.0，IE7/8/9，Fixfox7.0以下，Firefox7.0+ ，Chrome。。。。。
直接贴代码【网上找的，记不得是哪位大神写的了】
function PreviewImage(obj, imgPreviewId, divPreviewId) {
var allowExtention = ".jpg,.bmp,.gif,.png"; //,允许上传文件的后缀名
var extention = obj.value.substring(obj.value.lastIndexOf(".") + 1).toLowerCase();
var browserVersion = window.navigator.userAgent.toUpperCase();
if (allowExtention.indexOf(extention) > -1) {
if (browserVersion.indexOf("MSIE") > -1) {
if (browserVersion.indexOf("MSIE 6.0") > -1) {//ie6
document.getElementById(imgPreviewId).setAttribute("src", obj.value);
} else {//ie[7-8]、ie9
obj.select();
var newPreview = document.getElementById(divPreviewId + "New");
if (newPreview == null) {
newPreview = document.createElement("div");
newPreview.setAttribute("id", divPreviewId + "New");
newPreview.style.width = 160;
newPreview.style.height = 170;
newPreview.style.border = "solid 1px #d2e2e2";
}
newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
var tempDivPreview = document.getElementById(divPreviewId);
tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);
tempDivPreview.style.display = "none";
}
} else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
if (firefoxVersion < 7) {//firefox7以下版本
document.getElementById(imgPreviewId).setAttribute("src", obj.files[0].getAsDataURL());
} else {//firefox7.0+
document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(obj.files[0]));
}
} else if (obj.files) {
//兼容chrome、火狐等，HTML5获取路径
if (typeof FileReader !== "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
}
reader.readAsDataURL(obj.files[0]);
} else if (browserVersion.indexOf("SAFARI") > -1) {
alert("暂时不支持Safari浏览器!");
}
} else {
document.getElementById(divPreviewId).setAttribute("src", obj.value);
}
} else {
alert("仅支持" + allowExtention + "为后缀名的文件!");
obj.value = ""; //清空选中文件
if (browserVersion.indexOf("MSIE") > -1) {
obj.select();
document.selection.clear();
}
obj.outerHTML = obj.outerHTML;
}
}
Html调用
<body>
<form name="form5" id="form5">
<img id="imgView" src="" alt="" height="170" style="border:1px solid red" /><br>
<input type="file" name="file5" id="file5" onchange="PreviewImage(this,'imgView','divNewPreview')" />
<div id="divNewPreview"></div>
</form>
</body>
【JavaScript】图片上传预览的更多相关文章
- ASP.NET工作笔记之一：图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
- Javascript之图片上传预览
使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- Jquery图片上传预览效果
uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...
- HTML5 图片上传预览
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- html 图片上传预览
Html5 upload img 2012年12月27日 20:36 <!DOCTYPE HTML> <html> <head> <meta http-equ ...
- js前端实现多图图片上传预览
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转
文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...
- 模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
随机推荐
- ios 开发之单例模式
在iOS开发中,有很多地方都选择使用单例模式.有很多时候必须要创建一个对象,并且不能创建多个,用单例就为了防止创建多个对象.单例模式的意思就是某一个类有且只有一个实例.单例模式确保某一个类只有一个实例 ...
- OpenGL FrameBufferCopy相关Api比较（glCopyPixels,glReadPixels,glCopyTexImage2D,glFramebufferTexture2D）
OpenGL FrameBufferCopy相关Api比较 glCopyPixels,glReadPixels,glCopyTexImage2D,glFramebufferTexture2D 标题所述 ...
- Mac 下安装Jenkins
Mac 下安装Jenkins 开始 Jenkins是一个基于Java开发的一种持续集成工具,用于建工持续重复的工作,功能包括: 持续的软件版本发布/测试项目 监控外部调用执行的工作. 近期打算搭建自动 ...
- 2016年4月21百度iOS实习生在线笔试题&编程题
1.一个人上台阶可以一次上1个,2个,或者3个,问这个人上32层的台阶,总共有几种走法? 思路:先建立数学模型,设3步的走 i 次,2步的走 j 次, 1步的走 k 次,上了3*i + 2*j + 1 ...
- LinkedList 浅析示例
package com.smbea.demo; import java.util.Iterator; import java.util.LinkedList; import java.util.Lis ...
- 在 CentOS7 上安装 Tomcat9
在 CentOS7 上安装 Tomcat9 1 通过 SecureCRT 连接到阿里云 CentOS7 服务器: 2 进入到目录 /usr/local/ 中: cd /usr/local/ 3 创建目 ...
- 转载文章-----Rational Rose2007（v7.0）下载地址、安装及激活详解教程（图）
转载地址:http://www.cnblogs.com/leaven/p/3718361.html 最近需要画uml图,之前用的是Rose 2003版的,由于好久没进去了,结果发现原来的激活又失效了, ...
- ORACLE动态采样分析
td {border:solid #9ec9ec; border-width:0px 1px 1px 0px; padding:4px 0px;} table {border:1px solid #9 ...
- Hive基本语法操练
建表规则如下: CREATE [EXTERNAL] TABLE [IF NOT EXISTS] table_name [(col_name data_type [COMMENT col_comment ...
- C# 注册表Regedit读写
注册表的读写 1.读 public static string GetRegeditData() { //Win10 读写LocalMachine权限,没有访问权限 RegistryKey hkml ...