1,图片预览

越来越多的浏览器为了安全,都不能获得文件的,全路径,实现图片预览实现起来有点麻烦。有人选择复制图片到服务器的某个路径下,然后从服务器端找到路径,实现预览。但这不是最佳实现方案,如果用户一张一张的预览图片,最终服务器里的垃圾图片岂不泛滥了?

2,代码(以下代码兼容主流浏览器,请放心使用)

<!DOCTYPE html>
<html>
<head>
<title>图片预览</title> <meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#main {
width: 900px;
height: 600px;
margin: 10px auto 0;
} #preview_text {
width: 900px;
height: 40px;
} #preview_wrapper{
width: 900px;
height: 500px;
border: 1px solid gray;
}
</style>
<script type="text/javascript">
var DIV_ID = "preview";// div
var PREVIEW_ID = "preview_wrapper"; var PIC_WIDTH = 900;// 展示图片的宽度
var PIC_HEIGHT = 500;// 展示图片的高度
var FILE_NAME = "fileName";
var IMAGE_FILE = "imageFile"; function $$(id){// 为了方便起见,统一定义一个函数
return document.getElementById(id);
} function toShowPic(){
doPreview();
setImageName();
} // 设置图片名称
function setImageName(){
var name = $$(IMAGE_FILE).value;
$$(FILE_NAME).value = name.substring(name.lastIndexOf('\\')+1,name.lastIndexOf("."));
} // 预览
function doPreview(){
var sender = $$(IMAGE_FILE);
var allowExtention = ".jpg,.bmp,.gif,.png";// 图片支持的格式
var extention = sender.value.substring(sender.value.lastIndexOf(".") + 1).toLowerCase();// 文件的扩展名
var browserVersion = window.navigator.userAgent.toUpperCase();// 浏览器版本 if(allowExtention.indexOf(extention)!=-1){// 包含指定的几种文件类型
if (browserVersion.indexOf("MSIE") > -1) {// IE 浏览器
if (browserVersion.indexOf("MSIE 6.0") > -1) {// ie6
$$(DIV_ID).setAttribute("src",sender.value);
} else {// ie[7-8]、ie9
sender.select();
var newPreview = $$(PREVIEW_ID+ "New");
if (newPreview == null) {
newPreview = document.createElement("div");
newPreview.setAttribute("id", PREVIEW_ID + "New");
newPreview.style.width = PIC_WIDTH;
newPreview.style.height = PIC_HEIGHT;
newPreview.style.border = "solid 1px gray";
}
newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='"+ document.selection.createRange().text + "')";
var tempDivPreview = $$(PREVIEW_ID); tempDivPreview.parentNode.insertBefore(newPreview,tempDivPreview);
tempDivPreview.style.display = "none";
}
}else if (browserVersion.indexOf("FIREFOX") > -1) {// 火狐浏览器
var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]); if (firefoxVersion < 7) {// firefox7以下版本
$$(PREVIEW_ID).setAttribute("src",sender.files[0].getAsDataURL());
} else {//firefox7.0+
$$(DIV_ID).setAttribute("src",window.URL.createObjectURL(sender.files[0]));
}
}else if (sender.files) {
//兼容chrome、火狐等,HTML5获取路径
if (typeof FileReader != "undefined") {
var reader = new FileReader(); reader.onload = function(e) {
$$(DIV_ID).setAttribute("src", e.target.result);
$$(DIV_ID).setAttribute("width", PIC_WIDTH);
$$(DIV_ID).setAttribute("height", PIC_HEIGHT);
};
reader.readAsDataURL(sender.files[0]);
} else if (browserVersion.indexOf("SAFARI") > -1) {
alert("暂时不支持Safari浏览器!");
}
}else {
$$(PREVIEW_ID).setAttribute("src",sender.value);
}
}else{
sender.value = ""; // 清空选中文件
$$(FILE_NAME).value="";
alert("仅支持以"+allowExtention+"为后缀的文件!");
if (browserVersion.indexOf("MSIE") > -1) {// IE浏览器
sender.select();
document.selection.clear();
}
sender.outerHTML = sender.outerHTML;
}
} </script> </head> <body>
<div id="main"> <div id="preview_text" class="preview_text">
选择文件 : <input type="file" name="imageFile" id="imageFile" onChange="toShowPic()"/>
文件名 : <input type="text" name="fileName" id="fileName" value=""/>
</div> <div id="preview_wrapper">
<img id="preview" src="image/blank.gif" /><br/><!-- 图片占位符 -->
</div>
</div>
</body>
</html>

3,示例图

javascript 实现图片预览(未上传到服务器端)的更多相关文章

  1. 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现

    前言 图片上传是web项目常见的需求,我基于之前的博客的代码(请戳:formData批量上传的多种实现)里的第三种方法实现多图片的预览.上传,并且支持三种方式添加图片到上传列表:选择图片.复制粘贴图片 ...

  2. 原生js实现图片预览并上传

    最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...

  3. H5-FileReader实现图片预览&Ajax上传文件

    图片预览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  4. 前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome(学习到的知识)

    文章地址:http://www.cnblogs.com/rubylouvre/p/4597344.html 一.window.URL 在Chrome中,window.URL和window.webkit ...

  5. jquery+html5+canvas实现图片 预览 压缩 上传

    javascirpt (function($){ $.fn.extend({ aiiUpload:function(obj) { if(typeof obj !="object") ...

  6. vue组件利用formdata图片预览以及上传《转载》

    转载修改 在项目中直接新建一个单文件页,复制一下代码即可       upload组件: <template> <div class="vue-uploader" ...

  7. vue组件利用formdata图片预览以及上传

    转载修改 在项目中直接新建一个单文件页,复制一下代码即可       upload组件: <template> <div class="vue-uploader" ...

  8. 用js实现预览待上传的本地图片

    js实现预览待上传的本地图片,代码如下: <form name="form5" id="form5" method="post" ac ...

  9. 如何预览将要上传的图片-使用H5的FileAPI

    这篇将要说的东西已经不新鲜了. 参考资料: Reading files in JavaScript using the File APIs (鉴于作者在美国, 我姑且认为作者母语是英语, 当然链接中有 ...

随机推荐

  1. ADO.NET 快速入门(十四):使用 SQL Server 检索数据

    SqlDataReader 类提供了一种从数据源读取数据记录只进流的方法.如果想使用 OLE DB 接口的数据库或者 SQL Server7.0 之前的版本,请参考文章:使用 OLE DB 检索数据. ...

  2. Spring容器-ApplicationContext的单例设计

    Spring容器-ApplicationContext的单例设计   每次通过new创建一个ApplicationContext容器,都会执行refresh方法,看源代码了解到这个refresh方法会 ...

  3. Android ViewPager使用具体解释

    这是谷歌官方给我们提供的一个兼容低版本号安卓设备的软件包,里面包囊了仅仅有在安卓3.0以上能够使用的api.而viewpager就是当中之中的一个利用它,我们能够做非常多事情,从最简单的导航,到页面菜 ...

  4. Codeforces Gym 100002 D"Decoding Task" 数学

    Problem D"Decoding Task" Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com ...

  5. Ubuntu下多服务器 Rsync同步镜像服务配置

    主服务器:192.168.5.13_ubuntu 从服务器:192.168.5.11_centos ================== 1> 在两台主机上分别安装rsync========== ...

  6. UIDatePicker的时间选择器里的时区的问题

    转自:http://www.cocoachina.com/bbs/simple/?t70445.html 初始化代码: - (void)viewDidLoad { [super viewDidLoad ...

  7. C#多线程交替赋值取值

    static AutoResetEvent auto=new AutoResetEvent(false); ; ; static void Main() { Thread th1 = new Thre ...

  8. Python_爬虫2

    URLError异常处理 大家好,本节在这里主要说的是URLError还有HTTPError,以及对它们的一些处理. 1.URLError 首先解释下URLError可能产生的原因: 网络无连接,即本 ...

  9. jQuery Mobile 连接外部连接或切换动画

    jQuery Mobile不同网页之间的跳转问题 jQuery Mobile,一个新的手机终端脚本开发库,从名字可以看出,它是基于jQuery:目前支持很多种手机设备,包括IOS/Android/Bl ...

  10. PHP生成条形码

    前阵子在做一个商家优惠券的功能,需要用到条形码,于是将资料重新整理下. 1.什么是条形码? 百度百科定义:条形码(barcode)是将宽度不等的多个黑条和空白,按照一定的编码规则排列,用以表达一组信息 ...