移动web

<body>

<form enctype="multipart/form-data" name="form1">

上传文件：<input id="f" type="file" name="f" onchange="change()" />

预览：<img id="preview" alt="" name="pic" width="300" height="150" />

</form>

<script>

function change() {

     var pic = document.getElementById("preview");

     var file = document.getElementById("f");

     var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();//js获取文件名的后缀

     html5Reader(file);

 }

 function html5Reader(file){

     var file = file.files[0];

     var reader = new FileReader();

     reader.readAsDataURL(file);

     reader.onload = function(e){

         var pic = document.getElementById("preview");

         pic.src=this.result;

     }

 }

</script>

</body>

</html>

兼容ie版本

function change() {

     var pic = document.getElementById("preview");

     var file = document.getElementById("f");

     var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();

     // gif在IE浏览器暂时无法显示

     if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){

         alert("文件必须为图片！"); return;

     }

     // IE浏览器

     if (document.all) {

         file.select();

         var reallocalpath = document.selection.createRange().text;

         var ie6 = /msie 6/i.test(navigator.userAgent);

         // IE6浏览器设置img的src为本地路径可以直接显示图片

         if (ie6) pic.src = reallocalpath;

         else {

             // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现

             pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";

             // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片

             pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';

         }

     }else{

         html5Reader(file);

     }

 }

 function html5Reader(file){

     var file = file.files[0];

     var reader = new FileReader();

     reader.readAsDataURL(file);

     reader.onload = function(e){

         var pic = document.getElementById("preview");

         pic.src=this.result;

     }

 }

js在本地预览图片的更多相关文章

  1. 本地预览图片html和js例子

    本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

  2. js 本地预览图片和得到图片实际大小

    //填充预览图片 function adpter(file, upfile) { var imgName = new Date().getTime() + file.name.substr(file. ...

  3. FileReader本地预览图片

    <body> <p><label>请选择一个图像文件:</label><input type="file" id=" ...

  4. H5实现本地预览图片

    我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  5. js本地预览图片

    废话不说  直接上代码 <script type="text/javascript" src="http://code.jquery.com/jquery-late ...

  6. 浏览器 本地预览图片 window.url.createobjecturl

    第一种方式 <script type="text/javascript"> function setImagePreview() { var docObj = docu ...

  7. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  8. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

  9. js实现图片上传本地预览

    演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html> <head> & ...

随机推荐

  1. NoSQL 数据库产品学习总结（一）

    NoSQL 数据库产品学习总结(一) 本篇文章共分为四个章节,会陆续整理下 Memcached.Redis.tair.mongodb.hbase.SequoiaDB. Cassandra的相关知识. ...

  2. Linux crontab 命令格式与具体样例

    基本格式 : * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示0点) 第3列表示日期1-31 第4列表示 ...

  3. PureMVC(JS版）源码解析：总结

    PureMVC源码中设计到的11个类已经全部解析完了,回首想想,花了一周的时间做的这点事情还是挺值得的,自己的文字组织表达能力和对pureMVC的理解也在写博客的过程中得到了些提升.我也是第一次写系列 ...

  4. 鼠标单击事件--JavaScript

    <html> <head> <title></title> </head> <script type="text/javas ...

  5. IPv6 neighbor discovery

    IPv6 neighbor discovery By stretch | Thursday, August 28, 2008 at 5:03 a.m. UTC Neighbor Discovery P ...

  6. Java基础知识强化之IO流笔记46：IO流练习之 把文本文件中数据存储到集合中的案例

    1.  把文本文件中数据存储到集合中      需求:从文本文件中读取数据(每一行为一个字符串数据)到集合中,并遍历集合. 分析:      通过题目的意思我们可以知道如下的一些内容,      数据 ...

  7. centos6.5 apache+tomcat结合 负载均衡

    一. 负载均衡:根据 uri 表达式把请求分发给各个服务器处理.如:/*.jsp = lb_s  就是说把所有jsp请求交给lb_s , 当然它是个Tomcat. 二. 安装配置mod_jk    m ...

  8. 关于“VS2010语法检查红线不见了”的解决方案

    操作步骤:工具=>导入导出设置=>重置所有设置=>重置C#(一般选择这个,其他没试过) 等待1分钟,over.

  9. Atom编辑器入门到精通(一) 安装及使用基础

    为什么选择使用Atom Atom是GitHub推出的一款编辑器,被称为21世纪的黑客编辑器,主要的特点是现代,易用,可定制.我之前用过多款编辑器,现在来总结一下个人对各编辑器的看法: Vim是我用的时 ...

  10. 百思不得其解—这些年做Web开发遇到的坑？

     请教一个问题:Bootstrap 模态框modal里面的嵌入 iframe ,然后iframe 里面载入的是优酷的视频 ,现在的问题是:这个模态框在谷歌浏览器上面可以播放出视频,而在ff浏览器里面无 ...