<!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>By：DragonDean</title>

    <script type="text/javascript">

        //下面用于图片上传预览功能

        function setImagePreview(avalue) {

            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 = '180px';

                //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 = "180px";

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

                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>

</head>

<body>

    <table width="100%" border="0" cellspacing="0" cellpadding="0">

        <tbody>

            <tr>

                <td height="101" align="center">

                    <div id="localImag">

                        <img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;">

                    </div>

                </td>

            </tr>

            <tr>

                <td align="center" style="padding-top:10px;">

                    <input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();">

                </td>

            </tr>

        </tbody>

    </table>

</body>

</html>

html input type=file 选择图片,图片预览 纯html js实现图片预览的更多相关文章

  1. input type=file 选择图片并且实现预览效果的实例

    为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...

  2. js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息

    文件名的传递 ---全路径获取 $('#file').change(function(){ $('#em').text($('#file').val()); }); 文件名的传递 ---只获取文件名 ...

  3. input type=file 选择图片并且实现预览效果

    通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否 ...

  4. js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...

  5. [置顶] js 实现 <input type="file" /> 文件上传

    在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...

  6. input[type='file']样式美化及实现图片预览

    前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...

  7. input[type=file]样式更改以及图片上传预览

    以前知道input[type=file]可以上传文件,但是没用过,今天初次用,总感觉默认样式怪怪的,想修改一下,于是折腾了半天,总算是小有收获. 以上是默认样式,这里我想小小的修改下: HTML代码如 ...

  8. input type=file实现图片上传，预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

  9. input[type="file"]的图片预览

    在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但 ...

随机推荐

  1. 【Java】 大话数据结构(17) 排序算法(4) （归并排序）

    本文根据<大话数据结构>一书,实现了Java版的归并排序. 更多:数据结构与算法合集 基本概念 归并排序:将n个记录的序列看出n个有序的子序列,每个子序列长度为1,然后不断两两排序归并,直 ...

  2. java学习之租车系统

    ​背景:有三种类型的车供给用户来租用​ ​要求:控制台用户交互界面,根据用户需求输出租车价格,结果如下: 创建租车类主要设计过程: 创建租车类 创建Car父类,包含四种属性成员,重写构造方法 创建三种 ...

  3. springmvc防止重复提交拦截器

    一.拦截器实现,ResubmitInterceptorHandler.java import org.apache.commons.lang3.StringUtils; import org.spri ...

  4. [Java]MyBatis框架

    在这里学习 >>mybatis 简介和入门[视频免费观看] >>http://legend2011.blog.51cto.com/3018495/908956[MyBatis学 ...

  5. oracle A用户访问B用户的表aa

    在B中:grant select on aa to A; (还可以配置insert,update,delete权限)

  6. Docker系列之（五）：使用Docker Compose编排容器

    1. 前言 Docker Compose 是 Docker 容器进行编排的工具,定义和运行多容器的应用,可以一条命令启动多个容器. 使用Compose 基本上分为三步: Dockerfile 定义应用 ...

  7. CentOS 7使用通过二进制包安装MySQL 5.7.18

    安装依赖 yum install -y libaio 下载 wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.18-linux- ...

  8. Project 03- STM32F4xx PID controller

    Project 03- STM32F4xx PID controller CMSIS files from ARM provides ARM Math functions. There are als ...

  9. Serial Wire Viewer (SWV)

    Being able to display values for counters, sensors and other debugging information is an important p ...

  10. 《Go语言实战》摘录：6.3 并发 - 竞争状态

    6.3 并发 - 竞争状态