<!doctype html>

<html lang="en">

 <head>

 <meta charset="UTF-8">

 <meta name="Generator" content="EditPlus?">

 <meta name="Author" content="">

 <meta name="Keywords" content="">

 <meta name="Description" content="">

 <title>Document</title>

 </head>

 <body>

 <script>

function setImagePreview() {

    var docObj = document.getElementById("doc");

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

    if (docObj.files && docObj.files[0]) {

    /*火狐下，直接设img属性*/

imgObjPreview.style.display = 'block';

    imgObjPreview.style.width = '150px';

    imgObjPreview.style.height = '120px';

    /*imgObjPreview.src = docObj.files[0].getAsDataURL();*/

    /*火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式*/

imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);

    } else {

    /*IE下，使用滤镜*/

docObj.select();

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

    var localImagId = document.getElementById("localImag");

    /*必须设置初始大小*/

localImagId.style.width = "150px";

    localImagId.style.height = "120px";

    /*图片异常的捕捉，防止用户修改后缀来伪造图片*/

try {

    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

    } catch (e) {

    alert("您上传的图片格式不正确，请重新选择!");

return false;

    }

    imgObjPreview.style.display = 'none';

    document.selection.empty();

    }

    return true;

}

</script>

<input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">

<p>

<div id="localImag">

<img id="preview" width=-1 height=-1 style="diplay: none" />

</div>

</p>

 </body>

</html>

javscript上传图片前预览的方法setPreViewImage()的更多相关文章

  1. uploadPreview 上传图片前预览 IE9 索引无效的问题

    最近公司的项目用到比较多的上传图片的操作,所以用到了基于jquery的上传前预览的插件 uploadPreview ,后来测试的时候发现在IE9下报索引无效的问题. 异常的产生方式 放一个file控件 ...

  2. js上传图片前预览方法（支持预览多个图片）

    运用js实现上传图片前的预览(支持多张图片),实现的例子如下: 1.源码例子: 1)Js脚本页面 <!doctype html> <html> <head> < ...

  3. uploadPreview上传图片前预览图片

    uploadPreview.js是一款图片上传前的预览插件.谷歌.火狐.IE都可以兼容,但是不支持safari. 相关的html代码: <!DOCTYPE html PUBLIC "- ...

  4. moviepy音视频剪辑：输出文件前预览剪辑和视频帧的preview和imdisplay方法

    ☞ ░ 前往老猿Python博文目录 ░ 一.引言 由于moviepy合成剪辑后,输出需要较多的时间,那么在输出前预览一下有助于提高处理效率.moviepy提供了预览的工具,这个工具是基于pygame ...

  5. FileReader与URL.createObjectURL实现图片、视频上传前预览

    之前做图片.视频上传预览常用的方案是先把文件上传到服务器,等服务器返回文件的地址后,再把该地址字符串赋给img或video的src属性,这才实现所谓的文件预览.实际上这只是文件“上传后再预览”,这既浪 ...

  6. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  7. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  8. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  9. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

随机推荐

  1. css控制父元素下的子元素自适应高度，且高度一致

    css代码: .wrap{width:600px;margin:0 auto; overflow:hidden;} .left{background:#ccc;width:300px;float:le ...

  2. JAVA Calendar详解（转）

    转自:http://blog.csdn.net/zerogotosum/article/details/1671314 (在文章的最后,将会介绍Date类,如果有兴趣,可以直接翻到最后去阅读) 究竟什 ...

  3. 菜鸟的jQuery源码学习笔记（前言）

    前言 相信任何一名前端开发人员或者是前端爱好者都对jQuery不陌生.jQuery简单易用,功能强大,特别是拥有良好的浏览器兼容性,大大降低了前端开发的难度,使得前端开发变得“平易近人起来”.自从本人 ...

  4. imagemagick 图像处理扩展

    做图像处理的一个工具. http://www.imagemagick.org/script/command-line-processing.php 支持命令行模式,支持接口调用.php 等等都可以,看 ...

  5. codevs 1922 骑士共存问题 网络流

    题目链接 给一个n*n的棋盘, 上面有障碍物, 有障碍物的不能放东西.然后往上面放马, 马不能互相攻击, 问最多可以放多少个马. 按x+y的奇偶来划分, 如果两个格子可以互相攻击, 就连一条权值为1的 ...

  6. python-凯撒密码

    凯撒密码 简介:凯撒密码(Caesar)是最早的代换密码,对称密码的一种 算法:将每个字母用字母表中它之后的第k(称作位移值)个字母替代 代码: #-*-coding:utf-8-*- __autho ...

  7. linux系统下安全管理

    1.引导程序安全 linux系统的root密码是很容易破解的,当然前提是你没有设置引导程序密码,如GRUB或LILO,为了防止通过引导程序破译root密码,强烈建 议设置GRUB或LILO的引导密码, ...

  8. Oracle EBS-SQL (BOM-9):检查系统BOM总数.sql

    SELECT      ITM.SEGMENT1                         物料编码     ,ITM.DESCRIPTION                     物料描述  ...

  9. 基于IAP和Keil MDK的远程升级设计

    写在前面:三个周之前,我突然想写一个远程升级的程序.那个时候我只是大概知道IAP的意思是在应用编程,但怎么编,我还一无所知.我给自己定下一个个阶段目标,从最基础的代码一点点写起,解决一个又一个的问题. ...

  10. SQL Server创建LinkServer

    USE [master] GO /****** Object: LinkedServer [xxx_LNK] Script Date: 2014/7/7 17:04:13 ******/ EXEC m ...