移动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. Project interpreter not specified(eclipse+pydev)

    [小记] 近期由于想配置Android的开发环境,把原来的MyEclipse5.5删了,下载了最新的Eclipse3.7版本号,由于之前在进行Python开发,就下载了最新的Pydev2.4版本号,安 ...

  2. SVN的配置与调试

  3. URAL - 1736 - Chinese Hockey

    题意:n支队伍打比赛,每2队只进行1场比赛,规定时间内胜得3分,败得0分,若是打到了加时赛,那么胜得2分,败得1分,给出n支队伍最后的总得分,问这个结果是否是可能的,是的话输出“CORRECT”及各场 ...

  4. careercup-数学与概率 7.6

    7.6 在二维平面上,有一些点,请找出经过点数最多的那条线. 解法: 类似于leetcode:Max Points on a Line 我们只需在任意两点之间“画”一条无限长的直线(也即不是线段),并 ...

  5. TCP/IP 中的二进制反码求和算法

    对于这个算法,很多书上只是说一下思路,没有具体的实现.我在这里举个例子吧 以4bit(计算方便一点,和16bit是一样的)做检验和来验证. 建设原始数据为 1100 , 1010 , 0000(校验位 ...

  6. secureCRT常用设置

    一.快捷键: 1. ctrl + a : 移动光标到行首[常用] 2. ctrl + e :移动光标到行尾[常用] 3. ctrl + d :删除光标之后的一个字符 4. ctrl + w : 删除行 ...

  7. ASP.NET Mvc开发之EF延迟加载

    EF延迟加载:就是使用Lamabda表达式或者Linq 从 EF实体对象中查询数据时,EF并不是直接将数据查询出来,而是在用到具体数据的时候才会加载到内存. 一,实体对象的Where方法返回一个什么对 ...

  8. modelsim仿真时让状态机波形显示状态的名字

    在使用Verilog编写有限状态机等逻辑的时候,状态机的各个状态通常以参数表示(如IDLE等).当使用ModelSim仿真的时候,状态机变量在wave窗口中以二进制编码的形式显示,如下面所示,这种显示 ...

  9. (转)使用OpenVPN的一些注意事项

    原文地址:http://www.365mini.com/page/16.htm 本文介绍的只是OpenVPN连接或使用过程中的一些注意事项,如果你尚未下载安装OpenVPN,你可以点击查看OpenVP ...

  10. MFC 设置窗口背景图片

    //在Onpaint函数中加入如下代码 //----------给窗口设置背景图片---------------------------- CPaintDC dc(this); CRect myrec ...