文档章节

js支持全浏览器的文件上传预览

 开源小秦胡
发布于 2016/11/07 10:41
字数 168
阅读 41
收藏 0

<!DOCTYPE html>

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

  <style type="text/css">

  #preview,

  .img,

  img {

    width: 200px;

    height: 200px;

  }

   

  #preview {

    border: 1px solid #000;

  }

  </style>

</head>

 

<body>

  <div id="preview"></div>

  <input type="file" onchange="preview(this)" />

  <script type="text/javascript">

  function preview(file) {

    var prevDiv = document.getElementById('preview');

    if (file.files && file.files[0]) {

      var reader = new FileReader();

      reader.onload = function(evt) {

        prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';

      }

      reader.readAsDataURL(file.files[0]);

    } else {

      prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';

    }

  }

  </script>

</body>

</html>

实现要点 
● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。 
● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现。
测试了一下IE8+都没有问题。但是IE7下file.value被浏览器去掉了文件路径分割线从而显示不出来 

本文转载自:http://www.jb51.net/article/91182.htm

粉丝 0
博文 13
码字总数 369
作品 0
海淀
私信 提问
原创jquery图片上传预览插件uploadView

勾国印原创jquery图片上传前预览插件uploadView,支持自定义允许上传图片的最大尺寸、允许上传图片的格式、预览图片的宽度和高度以及上传成功后回调函数,兼容手机端和PC端。 大家在开发网站...

够过瘾
2015/10/24
5.5K
0
12 个开发人员的实用代码编辑器

Compilr Compilr 是一个在线的集成开发怀集(IDE),目前支持9种编程语言:C、C++、C#、Java、JavaScript、PHP、Python、Ruby 和 Visual Basic。 Compilr 由坐落于加拿大新斯科舍省的 Ninja ...

ChildhoodAndy
2012/12/28
788
1
如何用不到200行代码写一款属于自己的js框架

前言 JavaScript 的核心是支持面向对象的,同时它也提供了强大灵活的 OOP 语言能力。本文将使用面向对象的方式,来教大家用原生js写出一个类似jQuery这样的框架。我们将会学到如下知识点: ...

徐小夕
07/05
0
0
YUI 3.2.0 发布第一个预览版

Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证 ...

红薯
2010/07/28
759
2
几款极好的 JavaScript 文件上传插件

jQuery File Uploader 这是最受欢迎的 jQuery 文件上传组件,支持批量上传,拖放上传,显示上传进度条以及校验功能。 支持预览图片、音频和视频,支持跨域上传和客户端图片缩放,支持的服务端...

hoojo
2013/09/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0
简述TCP的流量控制与拥塞控制

1. TCP流量控制 流量控制就是让发送方的发送速率不要太快,要让接收方来的及接收。 原理是通过确认报文中窗口字段来控制发送方的发送速率,发送方的发送窗口大小不能超过接收方给出窗口大小。...

鏡花水月
今天
10
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
1K
11
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部