<!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. ASP.NET【2】

    从上一节我们了解到ASP.NET是一种动态网页技术,在服务器端运行.Net代码,服务器端接收处理动态生成HTML代码,然后发送给浏览器,再由浏览器解析HTML代码将数据呈现给用户. 那么,下面我来介绍 ...

  2. hibernate.Session简介

    ★→→SessionFactory (org.hibernate.SessionFactory) 包含已经编译的映射(mappings),是制造session的工厂,可能含有一些可以在各个事务(tra ...

  3. switch语法中break,default作用说明

    转自:http://cjhbest999.iteye.com/blog/1137124 关于java中switch使用的一些说明 switch(表达式) { case 常量表达式1:语句1; .... ...

  4. Unity3D延迟回调的封装

    最近,整理项目框架逻辑时,无意中翻到n年前封装的延迟回调管理器,就拎出来说道说道: 先说一下系统提供的几种常用的延迟回调方式: 1)Invoke(Invoke.CancelInvoke):首先需要继承 ...

  5. FontCombobox 和FontSizeCombobox

    附件:http://files.cnblogs.com/xe2011/WindowsFormsFontCombox.rar 自定义组件字体组合框 自定义组件字体组合框如何使用 自定义组件字体大小组合框 ...

  6. stackoverflow上关于iOS的票数最多（最常见）的15个问题

    搞编程做项目的,没碰到bug.遇到问题,基本不可能.stackoverflow就是一个大型的开放的FAQ平台,你是问题制造者,也是答案提供者.本文列出至今stackoverflow上关于iOS的票数最 ...

  7. git的一些基础命令

    Git常用命令 请确保已经安装里git客户端 一般配置 git --version //查看git的版本信息 git config --global user.name //获取当前登录的用户 git ...

  8. [转载]js中__proto__和prototype的区别和关系

          首先,要明确几个点:1.在JS里,万物皆对象.方法(Function)是对象,方法的原型(Function.prototype)是对象.因此,它们都会具有对象共有的特点.即:对象具有属性_ ...

  9. SQL Server中建立外键的方法

    在SQL中建立外键约束,可以级联查询表中的数据,在C#代码生成器中,也能根据外键关系生成相应的外键表数据模型.外键也可防止删除有外键关系的记录,一定程度上保护了数据的安全性. 步骤: 1.要建立外键关 ...

  10. java 百分比显示

    DecimalFormat percent = new DecimalFormat("0.00%"); completed_num = (double) involvedTask_ ...