Giter Club home page Giter Club logo

preview's Introduction

preview v1.2.0

纯浏览器端的图片预览组件
支持IE5.5~IE11、Chrome、FF、Safari和Opera

Usage

<input type="file" id="icon1" accept="image/jpeg"/>&nbsp;<button onclick="pv1.reset()">重置</button>
<div class="preview" id="pv1"></div>
<input type="file" id="icon2" accept="image/jpeg"/>&nbsp;<button onclick="pv2.reset()">重置</button>
<div class="preview" id="pv2"></div>
<script type="text/javascript" src="./preview.js"></script>
<script type="text/javascript">
  var get = function(id){
  	return document.getElementById(id);
  };
  Preview.defaults.onlegal = false;
  Preview.defaults.onillegal = true;
  var pv1 = new Preview(get('icon1'), get('pv1'), {
  	onlegal: function(path, ext, accept){
      alert(pv1 === this);
      alert('文件路径:' + path);
      alert('文件后缀:' + ext);
      alert('期待的MIME类型:' + accept);
  		return true;
  	},
  	onillegal: false 
  });
  var pv2 = Preview(get('pv2'), get('icon2'));
</script>

v1.2.0

  1. Preview构造函数添加opts配置入参,具体配置项如下:
    onlegal,当路径后缀与file的accept属性值匹配时触发,返回true(默认值)时将预览图片,false则预览图片。
    onillegal,当路径后缀与file的accept属性值不匹配时触发,返回true时将预览图片,false(默认值)则预览图片。
  2. 添加Preview.defaults.onlegal=truePreview.defaults.onillegal=false默认配置项。

v1.1.0

  1. 图片预览实例添加reset()方法,用于重置组件;
  2. Preview构造函数入参由原来的顺序设置fileEl,previewEl改为无序设置。

v.1.0
全局重构

v.0.5
IE10+通过window.URL.createObjectURL替代FileReader,缩短Data URI Scheme长度从而提高性能。

v0.4
新增上传文件MIME类型筛选。默认值为image/*,通过input的accept属性值设置。

v0.3
修复FF3.0不支持FileReader的bug。

v0.2
修复IE11下当document.documentMode < 10时无法预览图片的bug。

v0.1
通过滤镜和FileReader实现图片预览功能。

preview's People

Contributors

fsjohnhuang avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

preview's Issues

sb

What the hell are you writing about

一个关于URL的小问题

var URL = (function(URL){
    if (!URL) return;

    return {
        createObjectURL: function(blob){
            return URL.createObjectURL(blob);
        },  
        revokeObjectURL: function(url){
            URL.revokeObjectURL(url);
        }
    };
}(window.webkitURL || window.URL));

这里的兼容方法用(window.URL || window.webkitURL)更合适。

chrome控制台提示:'webkitURL' is deprecated. Please use 'URL' instead.

实际上也就是说,任何方法的兼容,最好是把标准的名称放在最前面。。。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.