本地预览图片html和js例子,直接上代码吧。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>测试本地图片预览</title>
</head>
<body>
    <div>
        <div id="preview_div" style="width: 200px; height: 200px; border: 1px solid #b6ff00; cursor: pointer;" onclick="previewFunc();">
            <img id="preview_img" style="width:100%;height:200px;"/>
            <input id="upload_img" type="file" style="width:0px;height:0px;" />
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    function previewFunc()
    {
        document.getElementById("upload_img").click();
    }
 
    //值改变的话
    document.getElementById("upload_img").onchange = function () {
        var sender = this;
        if (!sender.value.match(/.jpg|.gif|.png|.bmp/i)) {
            alert('图片格式无效!');
            return false;
        }
 
        var objPreviewImg = document.getElementById('preview_img');
        var objPreviewDiv = document.getElementById('preview_div');
 
        if (navigator.userAgent.indexOf("MSIE") > -1) {
            //IE浏览器的话
            try {
                objPreviewImg.src = createFileObj(this.files[0]);
            }
            catch (e) {
                     //ie7中不兼容出错跳到这里
                this.select();                                  //选择的时候
                top.parent.document.body.focus();                //如果要嵌套到iframe中进行显示的话,需要加这个将焦点聚到iframe里面
                this.blur();                                   //必须要加这个
                var src = document.selection.createRange().text;          //IE 11中改为如下:document.selection ---》  window.getSelection  
                document.selection.empty();
                objPreviewImg.style.display = "none";                 //隐藏img控件
                objPreviewDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                objPreviewDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
            }
        } else {
            //chrome firfox都可以
            objPreviewImg.src = createFileObj(this.files[0]);
        }
    }
 
    function createFileObj(filePath)
    {
        var url = null;
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(filePath);
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(filePath);
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(filePath);
        }
        else {
 
        }
        return url;
    }
</script>
 
//----------------------------------------------------------------------
以上需要注意的地方是
 <input id="upload_img" type="file" style="width:0px;height:0px;" /> 
注意不能用display:none的样式进行隐藏,否则ie7中无论如何都不能获取到对应value值。
以上代码嵌套到iframe中也是可以进行预览的,如果自己想封装组件的朋友可以自己再封装一下,或者用jQuery重写一下就OK了。
 

本地预览图片html和js例子的更多相关文章

  1. js 本地预览图片和得到图片实际大小

    //填充预览图片 function adpter(file, upfile) { var imgName = new Date().getTime() + file.name.substr(file. ...

  2. H5实现本地预览图片

    我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  3. FileReader本地预览图片

    <body> <p><label>请选择一个图像文件:</label><input type="file" id=" ...

  4. js在本地预览图片

    移动web <body> <form enctype="multipart/form-data" name="form1"> 上传文件: ...

  5. js本地预览图片

    废话不说  直接上代码 <script type="text/javascript" src="http://code.jquery.com/jquery-late ...

  6. 浏览器 本地预览图片 window.url.createobjecturl

    第一种方式 <script type="text/javascript"> function setImagePreview() { var docObj = docu ...

  7. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

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

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

  9. js实现图片上传本地预览

    演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html> <head> & ...

随机推荐

  1. [MONGODB]: WHEN ARBITER REQUIRED FOR REPLICA SET

    October 27, 2015 · by Srinivas · in MongoDB   MongoDB replica sets provide a number of features that ...

  2. oracle监听程序无法启动(TNS-12560: TNS: 协议适配器错误,TNS-00530: 协议适配器错误)

    问题描述1:   C:\Users\Administrator>lsnrctl start LSNRCTL for 64-bit Windows: Version 11.2.0.1.0 - Pr ...

  3. 发现新大陆-JMX

    今天接触到这个东西,觉得好有趣,可以用很多第三方的显示层jar包直接在UI界面上操作指定的java对象,网上将这个东西的也挺多的,我个人觉得这个比webServer还强大了.webserver只是公布 ...

  4. [git]git add 增加文件,文件名乱码

    使用git add添加要提交的文件的时候,如果文件名是中文,会显示形如 274\232\350\256\256\346\200\273\347\273\223.png 的乱码. 解决方案: 在bash ...

  5. Sprint2演示分

    团队贡献分: 朱杰:22 蔡京航:21 华子仪:20 甄增文:17

  6. 点餐APP 冲刺三总结

    一转眼所有的冲刺都完成了,而今次的冲刺主要是完善数据库,而我们 也成功地实现了,虽然过程很艰辛,但是我们每一个人都学习到了很多新 知识,这是最好的收获.因为今学期没有软件工程的课程,所以大家都是 利用 ...

  7. 使用栈Stack对整数数值的运算表达式字符串进行运算C#

    这里如果对于形如字符串“((6+((7+8)-9)*9+8/2)-3)/2”的运算表达式进行运算.接触过此类的同学知道这种存在着运算符优先级的表达式,不能直接从左到右进行运算,我们使用OperandS ...

  8. .net多线程的发展

    APM和EAP是在async/await之前的两种不同的异步编程模式. APM如果不阻塞主线程,那么完成通知(回调)就会执行在另外一个线程中,从而给我们更新UI带来一定的问题. EAP的通知事件是在主 ...

  9. 做java工作整整1年了,看到了大牛的奋斗历程,我感觉自己又有目标了

    2014年6月,刚刚踏上社会那会儿,我记得我第一次面试啥都不知道,穿的也不修边幅去应聘一家4s销售,面试官看到我,我明细感觉到了对方厌恶的神色,这是我上社会的第一课,找工作不管是什么工作,衣着得体,是 ...

  10. linux2.4.18内核定时器的使用

    Linux2.4下驱动中定时器的应用 我的内核是2.4.18的.Linux的内核中定义了一个定时器的结构: #include<linux/timer.h> struct timer_lis ...