<!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. mysql binlog解析概要

    1,dump协议: 根据数据库的ip+port创建socket,如果创建成功,说明链接建立成功,接下来是使用dump协议订阅binlog 链接建立成功之后,服务端会主动向客户端发送如下问候信息gree ...

  2. Android布局（一）layout_gravity 属性和 gravity属性的区别

    安卓中的 layout_gravity 属性和 gravity属性 有啥区别? LinearLayout有两个非常相似的属性: android:gravity与android:layout_gravi ...

  3. 反编译C#的dll文件并修改，再重新生成dll

    1.把dll文件导入到ildasm工具中,ildasm是由微软提供的.net程序反编译工具,位于“C:\Program Files (x86)\Microsoft SDKs\Windows\v7.0A ...

  4. C指针--通过二级指针往回拉数据

    现在有这种需求,在main函数中建立一个二叉树的root结点的指针,在tree_create函数中malloc或者new一个二叉树结点,然后在main函数中能正常的访问这个新建的结点. 注:这里的tr ...

  5. accordion

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. HttpSQS

    http://goaheadtw.iteye.com/blog/1669682 http://zyan.cc/httpsqs/7/1/

  7. MacBook USB Type-C接口很美？其实是缩水的！

    苹果终于推出了12寸的全新MacBook,拥有2304×1440的高分辨率.蝶式结构全尺寸键盘.新的触摸板.14nm Core M处理器和无风扇设计,以及新的USB 3.1 Type-C接口.可以预料 ...

  8. 论山寨手机与Android联姻 【2】手机OS成为核心

    手机凭借通话和短信这两项基本功能,积累了用户,开拓了市场.但是用户的需求是永无止境的,对于手机制造商来说,紧跟用户需求,拓展手机功能,是机会也是挑战. 1988年第一款数码相机,在日本上市.数码相机的 ...

  9. Keil MDK下如何设置非零初始化变量

    一些工控产品,当系统复位后(非上电复位),可能要求保持住复位前RAM中的数据,用来快速恢复现场,或者不至于因瞬间复位而重启现场设备.而keil mdk在默认情况下,任何形式的复位都会将RAM区的非初始 ...

  10. docker 数据管理3

    实际应用: 第一个容器使用: docker run -itd -v /data/:/data1 centos  bash // -v 用来指定挂载目录, 后面的容器使用之前的容器数据卷 docker: ...