<!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>

input上传文件显示图片缩略图的更多相关文章

  1. Thinkphp 3.0版本上传文件加图片缩略图实例解析

    先看html加个表单,注意这里的action 路径要选 对. <div> <form action="__URL__/add_img" enctype=" ...

  2. ajax上传文件显示进度

    下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...

  3. django上传并显示图片

    环境 python 3.5 django 1.10.6 步骤 创建名为 testupload的项目 django-admin startproject testupload 在项目testupload ...

  4. 使用FormData上传文件、图片

    关于FormData XMLHttpRequest Level 2添加了一个新的接口  ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XM ...

  5. SpringMVC上传文件（图片）并保存到本地

    SpringMVC上传文件(图片)并保存到本地 小记一波~ 基本的MVC配置就不展示了,这里给出核心代码 在spring-mvc的配置文件中写入如下配置 <bean id="multi ...

  6. ueditor1.4.3配置过程(包含单独上传文件以及图片的使用)，ueditor1.4.3上传配置（转 http://www.bkjia.com/webzh/1001016.html）

    这里使用的是ueditor1.4.3的jsp版本的UTF-8版本. 首先下载相应的ueditor,将ueditor文件夹直接拷贝到项目中,文件结构如下所示: 然后将项目要用的jar包导入到lib目录下 ...

  7. 工作笔记——限定input上传文件对话框中能选取的文件的格式

    原文:http://www.dengzhr.com/frontend/1059 input[file]标签的accept属性可用于指定上传文件的 MIME类型 . 例如,想要实现默认上传图片文件的代码 ...

  8. input上传文件检测文件大小

    前几天在做 input[type='file'] 上传图片时,需要检测上传文件的内存大小,写了一个小demo,在此做一总结: <!DOCTYPE html> <html lang=& ...

  9. MVC与webservice上传文件（图片和视频），希望帮且到一些朋友

    最近做一个项目,要把图片和视频传到服务器上(网站与图片服务器分开),在网上找了好久,没找到完整的资料. 自己也折腾了半天,才把完整的代码实现完.可能好多朋友都有实现过,没分享代码吧,写得不好希望不要见 ...

随机推荐

  1. asp.net 微信公众平台我也来搞一搞（看看和大家的有什么不一样）

    去年10月份左右接触的微信,今年又要在上面做新的改动(好烦人,为什么我这么懒),小菜用了2天的工作日,做了一个微信解析器,方便大家调用. 好处: 1.屌丝们不用再去做微信验证. 2.屌丝们不用去解析x ...

  2. c - 根据首字母判断星期几

    #include <stdio.h> #include <ctype.h> /* 请输入星期几的第一个字母来判断一下是星期几,如果第一个字母一样,则继续判断第二个字母. */ ...

  3. AFNetworking使用详解

    导语: 众所周知,AFNetworking是目前IOS开发中非常受欢迎的第三方网络通信类库,同时AFNetworking对苹果官方NSURLConnection和NSURLSession进行了封装,使 ...

  4. JavaScript 字符串

    字符串属性 属性 描述 constructor 返回创建字符串属性属性的函数 length 返回字符串的长度 prototype 允许您向对象添加属性和方法 字符串方法 Method 描述 charA ...

  5. This system is not registered with RHN解决方法

    root@localhost ipvsadm-1.25]# yum install gcc Loading "security" plugin Loading "rhnp ...

  6. C#：装箱和拆箱相关知识整理

    1.装箱和拆箱是一个抽象的概念   2. 装箱是将值类型转换为引用类型 ;   拆箱是将引用类型转换为值类型   利用装箱和拆箱功能,可通过允许值类型的任何值与Object 类型的值相互转换,将值类型 ...

  7. adb server is out of date. killing... 解决方案

    忘了原文从哪来的了,过后查到补上链接 今天调试android的时候发现一个诡异的问题 C:\Users\xxxx>adb start-server   adb server is out of ...

  8. mybatis 学习笔记(4) —— 批量新增数据

    1.业务是从前台传入List<T> ,在controller层接受参数,并进行批量新增操作. 2.需要处理的细节 a) mybatis可以支持批量新增,注意数据表需要将主键设置成自增列. ...

  9. SASS type-of 函数

    今儿写个type-of,算是备忘录吧. 1.number type-of(0) // number type-of(1px) // number 2.string type-of(a) // stri ...

  10. LIKE匹配关键字

    1.% 匹配任意数目字符(包括零个字符) SELECT * FROM edo_user WHERE true_name LIKE '王%' 应用:关键字查询 WHERE u.true_name lik ...