本地图片预览

第一种方法

<!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. hdu 3874 树状数组

    思路:和求区间内有多少个不同的数一样,只不过改下权值. #include<iostream> #include<cstdio> #include<algorithm> ...

  2. 编程风格——UNIX 高手的 10 个习惯

    引言 当您经常使用某个系统时,往往会陷入某种固定的使用模式.有时,您没有养成以尽可能最好的方式做事的习惯.有时,您的不良习惯甚至会导致出现混乱.纠正此类缺点的最佳方法之一,就是有意识地采用抵制这些坏习 ...

  3. ionic2实战-使用Chart.js

    前言 Chart.js官网 Chart.js中文文档 安装Chart.js 执行cnpm install typings -g,全局安装Typings 执行typings search chart.j ...

  4. g2o安装

    1.安装依赖项 sudo apt-get install libeigen3-dev libsuitesparse-dev libqt4-dev qt4-qmake 2.安装依赖项  libqglvi ...

  5. 关于fixed定位的一些错误看法纠正

    之前由于一些误导,一直感觉fixed这个定位在ie8下面是会出现兼容问题的,今天发现这个想法太绝对了,它只是在ie7 8 的怪异模式下面会出现兼容问题 解决这个问题可以通过用absolute来模拟fi ...

  6. 虚拟 ​router 原理分析

    上一节我们创建了虚拟路由器“router_100_101”,并通过 ping 验证了 vlan100 和 vlan101 已经连通. 本节将重点分析其中的原理. 首先我们查看控制节点的 linux b ...

  7. struts2 package 属性说明

    package节点是整个配置的核心部分.每个package,从语义上讲,其实代表了每一个独立的模块.在这个模块中,你可以定义隶属于这个模块的行为方式,而与其他的模块没有关系.所以,每个package都 ...

  8. android基本控件学习-----Button

    Button讲解: 一.在我们实际的使用button的时候经常会对button不同状态会有不同的显示,在讲解Button前,首先对drawable下面的statelistdrawable的相关知识讲一 ...

  9. gitlab+gerrit+jenkins

    gitlab-repo 指在 gitlab 上的代码库, gerrit-repo 指在 gerrit 上的代码库: 从 gitlab-repo 上获取代码 本地修改, 提交 push 到 gerrit ...

  10. 静态变量(static)的特点

    静态变量(static):有局部变量,也有全局变量. 静态局部变量:在函数体内用static说明的变量称为静态局部变量,属于静态类别. 特点: (1)它占据一个永久性的存储单元.随着文件的存在而存在. ...