1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <title>By：DragonDean</title>
  7.     <script type="text/javascript">
  8.         //下面用于图片上传预览功能
  9.         function setImagePreview(avalue) {
  10.             var docObj = document.getElementById("doc");
  11.  
  12.             var imgObjPreview = document.getElementById("preview");
  13.             if (docObj.files && docObj.files[0]) {
  14.                 //火狐下，直接设img属性
  15.                 imgObjPreview.style.display = 'block';
  16.                 imgObjPreview.style.width = '150px';
  17.                 imgObjPreview.style.height = '180px';
  18.                 //imgObjPreview.src = docObj.files[0].getAsDataURL();
  19.  
  20.                 //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
  21.                 imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
  22.             } else {
  23.                 //IE下，使用滤镜
  24.                 docObj.select();
  25.                 var imgSrc = document.selection.createRange().text;
  26.                 var localImagId = document.getElementById("localImag");
  27.                 //必须设置初始大小
  28.                 localImagId.style.width = "150px";
  29.                 localImagId.style.height = "180px";
  30.                 //图片异常的捕捉，防止用户修改后缀来伪造图片
  31.                 try {
  32.                     localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
  33.                     localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
  34.                 } catch (e) {
  35.                     alert("您上传的图片格式不正确，请重新选择!");
  36.                     return false;
  37.                 }
  38.                 imgObjPreview.style.display = 'none';
  39.                 document.selection.empty();
  40.             }
  41.             return true;
  42.         }
  43.     </script>
  44. </head>
  45.  
  46. <body>
  47.     <table width="100%" border="0" cellspacing="0" cellpadding="0">
  48.         <tbody>
  49.             <tr>
  50.                 <td height="101" align="center">
  51.                     <div id="localImag">
  52.                         <img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;">
  53.                     </div>
  54.                 </td>
  55.             </tr>
  56.             <tr>
  57.                 <td align="center" style="padding-top:10px;">
  58.                     <input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();">
  59.                 </td>
  60.             </tr>
  61.         </tbody>
  62.     </table>
  63. </body>
  64.  
  65. </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. P2858 [USACO06FEB]奶牛零食Treats for the Cows

    P2858 [USACO06FEB]奶牛零食Treats for the Cows区间dp,级像矩阵取数, f[i][i+l]=max(f[i+1][i+l]+a[i]*(m-l),f[i][i+l- ...

  2. Angular 个人深究（一）【Angular中的Typescript 装饰器】

    Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...

  3. linux学习笔记-10.解压与压缩

    1.gzip压缩 gzip a.txt 2.解压 gunzip a.txt.gzgzip -d a.txt.gz 3.bzip2压缩 bzip2 a 4.解压 bunzip2 a.bz2bzip2 - ...

  4. [mysql] update……from……

    今天插入一条数据就像这样 limit ), , )) 然后报错: You can't specify target table 'categorys' for update in FROM claus ...

  5. gson Expected BEGIN_OBJECT but was BEGIN_ARRAY at line 1 column 2 path

    返回数据解析错误 com.google.gson.JsonSyntaxException: java.lang.IllegalStateException: Expected BEGIN_OBJECT ...

  6. Dos常用命令大全

    dos命令进入文件夹 输入 D: 回车,进入D盘的根目录,然后输入dir 回车 可以查看根目录下的文件和文件夹,  输入 cd空格文件夹的名字(不区分大小写) 进入文件夹根目录下, 依次输入dir 查 ...

  7. Codeforces Round #284 (Div. 1) A. Crazy Town 计算几何

    A. Crazy Town 题目连接: http://codeforces.com/contest/498/problem/A Description Crazy Town is a plane on ...

  8. java 实现生产者-消费者模式

    生产和消费者模式有很多种,现在介绍几种常见的方式 wait/notify实现生产和消费者模式 1.使用wait/notify实现生产和消费者模式: public class Depot { // 实际 ...

  9. spring data redis的配置类RedisConfig

    package com.tz.config; import org.springframework.context.annotation.Bean; import org.springframewor ...

  10. 使用 IntraWeb (13) - 基本控件之 TIWLabel、TIWLink、TIWURL、TIWURLWindow

    TIWLabel // TIWLink //内部链接 TIWURL //外部链接 TIWURLWindow //页内框架, 就是 <iframe></iframe> TIWLa ...