<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>图片上传</title>

<script src="test.js" language="javascript"></script>

</head>

<body>

     <input type="file" name="doc" id="doc" onchange="setImagePreview('doc','preview','localImag');"/>

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

</body>

</html>
function setImagePreview(fileObj, previewObj, localImg) {

    var docObj=document.getElementById(fileObj);

    var imgObjPreview=document.getElementById(previewObj);

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

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

        imgObjPreview.style.display = 'block';

        imgObjPreview.style.width = '120px';

        imgObjPreview.style.height = '80px';

        //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(localImg);

        //必须设置初始大小

        localImagId.style.width = "120px";

        localImagId.style.height = "80px";

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

        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;

}

上传图片带预览功能兼容IE和火狐等主流浏览器的更多相关文章

  1. Js 日期选择，可以的一个页面中重复使用本JS日历，兼容IE及火狐等主流浏览器，而且界面简洁、美观，操作体验也不错。

    <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...

  2. js上传图片及预览功能

    详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...

  3. nodejs实现本地上传图片并预览功能（express4.0+）

    Express为:4.13.1  multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片 ...

  4. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  5. [转]单据套打WINFORM实现，带预览功能

    本文转自:https://blog.csdn.net/lyflcear/article/details/22795053 昨天公司要打单子而不是以前的手写 为了实现这样的功能上网搜索了一下 http: ...

  6. html上传图片的预览功能实现

    表单代码(仅取上传文件部分): <input class="selectImg" style="position:absolute;opacity: 0;width ...

  7. jquery 上传图片即时预览功能

    <script type="text/javascript">        jQuery.fn.extend({            uploadPreview: ...

  8. URL.createObjectURL() 实现本地上传图片 并预览功能

    URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL.这个 URL 的生命周期和创建它的窗口中的 document 绑定.这个新 ...

  9. 模拟微信上传图片（带预览，支持预览gif）

    一.Html <style type="text/css"> #previewDiv{width:50px;height:50px;overflow:hidden;po ...

随机推荐

  1. patch与diff的恩怨

    一.概述 diff和patch是一对相辅相成的工具,在数学上来说,diff类似于对两个集合的差运算,patch类似于对两个集合的和运算.diff比较两个文件或文件集合的差异,并记录下来,生成一个dif ...

  2. mysql 备份与还原

    http://dev.yesky.com/281/35291281.shtml 每一种逻辑错误发生的概率都极低,但是当多种可能性叠加的时候,小概率事件就 放大成很大的安全隐患,这时候备份的必要性就凸显 ...

  3. 记录：Ubuntu下配置java

    使用的Ubuntu版本为:Ubunyu Kylin 14.04 >>下载JDK 网页链接:http://www.oracle.com/technetwork/java/javase/dow ...

  4. 在CentOS搭建Git服务器 转

    在CentOS搭建Git服务器 来自 :http://www.jianshu.com/p/69ea5ded3ede 前言 我们可以GitHub发布一些开源代码的公共仓库,但对于私密仓库就需要收费了.公 ...

  5. (3/18)重学Standford_iOS7开发_Objective-C_课程笔记

    第三课: 本节课主要是游戏实现的demo,因此我将把课程中简单的几个编程技巧提取出来,重点介绍如何自己实现作业中的要求. 纸牌游戏实现: ①游戏的进行是模型的一部分(理解什么是模型:Model = W ...

  6. SEO为什么要求网页设计师用DIV+CSS布局网页?

    问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...

  7. Sysinternals Suite实用程序工具包

    Sysinternals Suite是微软出品的一套集成数十个绿色软件的实用程序工具包.就在2014年1月29日(官方日期),迎来了2014新版本 AccessChk为了确保创建安全的环境,Windo ...

  8. malloc()与calloc差别

    Both the malloc() and the calloc() functions are used to allocate dynamic memory. Each operates slig ...

  9. InstallShield12豪华版破解版下载|InstallShield下载|软件打包工具

    InstallShield 12 豪华版+破解版 下载 下载速度:220kb/s InstallShield 12为软件发行方提供率先的安装程序解决方式,可以制作强大可靠的Windows Instal ...

  10. linux IO 内核参数调优 之 原理和参数介绍

    1.  page cache linux操作系统默认情况下写都是有写缓存的,可以使用direct IO方式绕过操作系统的写缓存.当你写一串数据时,系统会开辟一块内存区域缓存这些数据,这块区域就是我们常 ...