<!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. 使用FileSystemWatcher捕获系统文件状态

    源代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sys ...

  2. （七）Android中AIDL的应用与理解

    一.跨应用启动Service Intent serviceIntent=new Intent();serviceIntent.setComponent(new ComponentName(" ...

  3. HTML7常用的类型刮刮乐 光棒效果

    常用的类型: 1.数学: Math.ceil():天花板数 Math.floor():地板数 Math.round():四舍五入取整数 Math.random():生成0-1之间的随机数   2.日期 ...

  4. python基础之 re(正则表达式)模块学习

    今天学习了Python中有关正则表达式的知识.关于正则表达式的语法,不作过多解释,网上有许多学习的资料.这里主要介绍Python中常用的正则表达式处理函数. re.match re.match 尝试从 ...

  5. mysql 查看mysql版本的四种方法

    1 命令行中使用status可以查看. mysql> status;--------------mysql  Ver 14.14 Distrib 5.5.25a, for Linux (x86_ ...

  6. redBag

    var redBag = (function () { var initialed = false, raining = true, createInterval, walkInterval, cre ...

  7. doT.js 模板引擎的使用

    dot.js是一个模板框架,在web前端使用. dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你 ...

  8. 自定义清除重复uses-permission申明的AS插件

    分享一个我刚到天下布医工作时,写的一个android studio插件. 做安卓项目时,经常继承一些第三方sdk,这些sdk都会申请权限,导致AndroidManifest.xml中的uses-per ...

  9. Oracle EBS-SQL (INV-5):检查期间拉式物料领用记录数.sql

    select         FU.description                                  操作者,         KK.DESCRIPTION           ...

  10. Delphi下重载窗体CreateParams翻转关闭按钮

    type  TForm1 = class(TForm)  private    { Private declarations }  public    { Public declarations }  ...