<!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. 【最小费用最大流】【HDU1533】【Going Home】

    题意 给你一个类似这样的图 ...H.... ...H.... ...H.... mmmHmmmm ...H.... ...H.... ...H.... 问所有H移动到所有m上花费最少的步数 以所有H ...

  2. 利用gridview实现计时消费，有点复杂，谁有好的方法可以讨论一下...

    这是前段时间做项目遇到的一个问题,做出来的效果图如下, 由会员id查询出会员来,然后开始计费.然后点击结束消费,传到别的页面,主要就是结束时间和开始时间的一个时间差. 用到的数据表设计视图如下, 为了 ...

  3. JSON 解析第三方框架

    常见的 JSON 解析第三方框架 JSONKit(最快) SBJson TouchJSON 以上三个框架的性能依次降低! 介绍 JSONKit 第三方框架的目的 JSON 的解析并不是表面上那么简单 ...

  4. 【Android】Fragment如何获取子Fragment

    今天搞了个嵌套的Fragment,通过外部的Fragment获取的子Fragment代码: this.navigationBar = (HXKJCargoNavigationView) getFrag ...

  5. HTML5新元素

    <figure> 标签规定独立的流内容(图像.图表.照片.代码等等). <figure> 元素的内容应该与主内容相关,同时元素的位置相对于主内容是独立的.如果被删除,则不应对文 ...

  6. Python爬虫实战（2）：爬取京东商品列表

    1,引言 在上一篇<Python爬虫实战:爬取Drupal论坛帖子列表>,爬取了一个用Drupal做的论坛,是静态页面,抓取比较容易,即使直接解析html源文件都可以抓取到需要的内容.相反 ...

  7. 无良教程-破解SublimeText3

    这教程实际上并不是倡导大伙儿去破解软件然后传播出去以侵犯作者的权益,纯粹是技术分享,如果大伙儿觉得Low了,可立马删除. sublime text是我非常喜欢的一款编辑器,在ubuntu上,之前用的一 ...

  8. Apache Spark2.0正式发布

    Apache Spark2.0正式发布 7月26日起Databricks开始提供Apache Spark 2.0的下载,这个版本是基于社区在过去两年的经验总结而成,不但加入了用户喜爱的功能,也修复了之 ...

  9. Linux--本地yum库

    Linux配置本地yum云: 第一步:把cd 挂载到目录树 mount /dev/cdrom /mnt/media 第二步:增加/etc/yum.repo.d/local.repo touch /et ...

  10. linux 进程(二) --- 进程的创建及相关api

    一.进程的创建fork()函数  由fork创建的新进程被称为子进程(child process).该函数被调用一次,但返回两次.两次返回的区别是子进程的返回值是0,而父进程的返回值则是 新子进程的进 ...