本地图片预览

第一种方法

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">

function change() {

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

        file = document.getElementById("f");

    //得到后缀名

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

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

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

         alert("图片的格式必须为png或者jpg或者jpeg格式！");

         return;

     }

     var isIE = navigator.userAgent.match(/MSIE/)!= null,

         isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;

     if(isIE) {

        file.select();

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

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

         if (isIE6) {

            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;

     }

 }

</script>

</head>

<body>

<form action="">

    <input type="file" multiple id="f" type="file" name="f" onchange="change()" >

    <img id="preview" alt="" src="" name="pic" class="file_img" style="margin-top: 5px;margin-left: 12px; width: 158px; height: 230px;"/>

</form>

</body>

</html>

第二种方法

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">

function previewFile() {

 var preview = document.querySelector('img');

 var file  = document.querySelector('input[type=file]').files[0];

 var reader = new FileReader();

 reader.onloadend = function () {

  preview.src = reader.result;

 }

 if (file) {

  reader.readAsDataURL(file);

 } else {

  preview.src = "";

 }

}

</script>

</head>

<body>

    <input type="file" onchange="previewFile()"><br>

    <img src="" height="200" width="300" alt="Image preview..."/>

</body>

</html>

html中图片上传预览的实现的更多相关文章

  1. 关于html中图片上传预览的实现

    本地图片预览 第一种方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type& ...

  2. Ext中图片上传预览的问题，困扰了好几天终于解决了，记录下

    { columnWidth:.50, xtype:'textfield', style:"padding-top:5px", name:'goodsMainPhoto', id:' ...

  3. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  4. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  5. Javascript之图片上传预览

    使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...

  6. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  7. 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转

    文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...

  8. 模拟QQ心情图片上传预览

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

  9. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

随机推荐

  1. BZOJ 4460 [Jsoi2013]广告计划 ——Bitset 后缀自动机

    发现n比较小,直接枚举答案,然后发现连续的一段是确定的,然后我们只需要判断每个位置是否有这个连续的一段就好了 发现起点不同,最后的位置可能会有差距,所以DP一下就好了 然后用0表示未折返,1表示从最下 ...

  2. BZOJ3772 精神污染 【主席树 + dfs序】

    题目 兵库县位于日本列岛的中央位置,北临日本海,南面濑户内海直通太平洋,中央部位是森林和山地,与拥有关西机场的大阪府比邻而居,是关西地区面积最大的县,是集经济和文化于一体的一大地区,是日本西部门户,海 ...

  3. idea工具开发注意事项

    pom.xml中不需要有包 <dependency> <groupId>javax</groupId> <artifactId>javaee-api&l ...

  4. MAC电脑安装Mysql服务器和Navicat for mysql客户端

    1.下载链接 Navicat for mysql客户端 链接: https://pan.baidu.com/s/1dGbzgbR 密码: i43g Mysql服务器 链接: https://pan.b ...

  5. ios 瀑布流的那些事情

    转载: 屎壳郎情调-成长日记 首先要知道:瀑布流的核心就是要获取到图片的长宽 网上的很多例子都是加载本地图片的 对于新手而言 改成加载网络图片的确是有点压力的  因为本地的图片 我们是很容易就能获取到 ...

  6. *LOJ#2134. 「NOI2015」小园丁与老司机

    $n \leq 5e4$个平面上的点,从原点出发,能从当前点向左.右.上.左上或右上到达该方向最近的给定点.问三个问:一.最多经过多少点:二.前一问的方案:三.其所有方案种非左右走的边至少要开几辆挖掘 ...

  7. linux下解压zip文件

    linux下解压zip文件 linux自带的unzip命令可以解压windows下的zip格式的压缩文件. unzip命令 语法:unzip ［选项］ 压缩文件名.zip 各选项的含义分别为: -x ...

  8. Ubuntu备份设置与恢复

    打开家目录,按CTRL+H,显示所有隐藏文件,把所有文件名前面带点的文件(比如 .config).目录备份即可下次有问题就覆盖它

  9. linux创建和查看用户命令

    1.创建一个叫做hadoop的用户,用户的目录是/home/hadoop useradd -d /home/hadoop hadoop 2.输入密码 passwd hadoop 3.删除用户 user ...

  10. win7 64位数据库连接问题：在指定的 DSN 中，驱动程序和应用程序之间的体系结构不匹配

    通过ODBC/JDBC连接程序和数据库时,异常报错“在指定的 DSN 中,驱动程序和应用程序之间的体系结构不匹配”的解决办法 本机:64位win7,64位JDK,做Web实验用32位myeclipse ...