1. <!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");
  2.  
  3.             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();
  4.  
  5. //火狐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;
            }
  6.  
  7.     </script>
    </head>
  8.  
  9. <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中 分析器错误:发现不明确的匹配

    这是一个不好的代码习惯引起的发布后运行时的问题.错误原因为.net2.0无法正确识别服务器控件和变量的大小写区别,但是这个错误只有在iis中体现,在文件系统的调试中没有发生. 错误信息 引发错误的参考 ...

  2. tableView创建方法调用的研究

    当两个section的cell数量都为5的时候,方法的调用顺序: -[ViewController numberOfSectionsInTableView:] -[ViewController tab ...

  3. Swift - 24 - switch语句的高级用法

    //: Playground - noun: a place where people can play import UIKit // 对区间进行判断 var score = 90 switch s ...

  4. AfxMessageBox("这里为提示框的内容");程序弹出一个提示窗口，可以做调试提示信息

    AfxMessageBox("这里为提示框的内容"); 同时AfxMessageBox(AFX_IDP_PARSE_INT);里面也可以系统宏定义的一些参数

  5. jquery ajax（4）.getjson（）

    .getJSON()实例 .each()实例 $(function(){ $('#send').click(function() { $.getJSON('test.json', function(d ...

  6. 钟表维修管理系统技术解析(一) MVC架构搭建

    钟表维修管理系统技术解析(一)  MVC架构搭建 1.1新建项目 第一步:打开VS2010界面,点击左上角文件,点击新建,选择项目 1.1(图1) 第二步:点击网站Web类型,选择ASP.net MV ...

  7. 驱动里执行应用层代码之KeUserModeCallBack（WOW64是由三个动态库wow64.dll wow64win.dll wow64cpu.dll来实现）

    在驱动层(ring0)里执行应用层(ring3)代码,这是个老生常谈的技术,而且方法也挺多. 这种技术的本质:其实就是想方设法在驱动层里把应用层代码弄到应用层去执行. 比如在APC异步调用中,KeIn ...

  8. chrome_php logger 的实现原理

    chrome_php是什么 1.chrome_php 是什么? 一款 Chrome 下用来配合调试 PHP 的工具,可以通过,console来查看php的信息 1.2用法 用法特别简单,有一个chro ...

  9. C# .NET开发Oracle数据库应用程序

    .NET Framework访问Oracle数据库至少有两种方式,一种是利用微软提供的ADO.NET,另一种是利用Oracle提供的ODP.NET. 安装VS的时候会附带ADO.NET,安装Oracl ...

  10. 信用卡/借记卡充值p2p平台

    第一部分信用卡/借记卡充值 首先信用卡尽量不要用于网贷,因为这样会有风险,对投资人和借款人都不利,况且银行的钱也不是那么好用的,对吧?但是也有很多朋友问我信用卡相关事宜,我在这里专门做个解答,信用卡用 ...