本地图片预览

第一种方法

<!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. iOS UIFont 字体名字大全

    Font Family: American TypewriterFont: AmericanTypewriterFont: AmericanTypewriter-Bold Font Family: A ...

  2. egametang启动配置

    egametang的启动配置文件可以在Unity的Tools->命令行配置中修改保存然后启动 如果需要添加自定义的启动配置项目,只需要修改客户端的 ServerCommandLineEditor ...

  3. 通过修改注册表设置windows环境变量

    开发环境搭建每次都要设置很多环境变量, 一般是通过  [菜单]->[计算机]->[属性]->[高级设置]->[环境变量]进行设置,重装系统后,每次都要设置很多环境变量,很麻烦. ...

  4. Spring 依赖注入的理解

    首先: 1.依赖注入就是一种在一个需要使用它的类中定义一个接口,该类中不管这个接口是怎么实现的,只是执行这个方法 2.依赖注入可以让该类实现通用 代码: 1.定义一个饮料接口 package cn.l ...

  5. Spring实现无需注解实现自动注入

    xml配置 过程:设置自动装配的包-->使用include-filter过滤type选择为regex为正则表达式-->expression是表达是式也就是限制条件 <?xml ver ...

  6. PHP页面间的参数传递

    我们定义page01.php和page02.php两个php文件,将page01中的内容想办法传递到page02,然后供我们继续使用.--------------------------------- ...

  7. Java数字签名——RSA算法

    数字签名:带有密钥(公钥,私钥)的消息摘要算法. 验证数据的完整性,认证数据的来源,抗否性 OSI参考模型 私钥签名,公钥验证 签名算法:RSA,DSA,ECDSA 算法1 :RSA MD,SHA两类 ...

  8. CodeForces - 796C Bank Hacking

    思路:共有n-1条边连接n个点,即形成一棵树.一开始需要选择一个点hack--将这个点视为根结点,与它相邻的点防御值加1,与它相隔一个在线点的点的防御也加1.当根节点被hack,即这个点被删除,又变成 ...

  9. Sublime Text [Decode error - output not utf-8]

    改Sublime Text的python build的设置.将其编码设置为cp936. 打开Python.sublime-build文件,并添加”encoding”:”cp936″这一行,保存即可 S ...

  10. nginx重写rewrite的[emerg] unknown directive

    今天写nginx的重写规则.怎么写总是报这个错误.