html5 FileReader

(function($) {       
$.imageFileVisible = function(options) {     
     // 默认选项
    var defaults = {    
    //包裹图片的元素
    wrapSelector: null,    
    //<input type=file />元素
      fileSelector:  null ,
      width : '100%',
      height: 'auto',
      errorMessage: "不是图片"
     };        
     var opts = $.extend(defaults, options);     
     $(opts.fileSelector).on("change",function(){
    var file = this.files[0];
    var imageType = /image.*/;
    if (file.type.match(imageType)) {
        var reader = new FileReader();
        reader.onload = function(){
         var img = new Image();
         img.src = reader.result;
        $(img).width( opts.width);
        $(img).height( opts.height);
        $( opts.wrapSelector ).append(img);
      };
       reader.readAsDataURL(file);
      }else{
         alert(opts.errorMessage);
      }
    });
  };     
})(jQuery);

这是对 FileReader的进一步封装 html代码为：

<input type="file" id="file">
<div id="image-wrap"></div>

但是要事先引入jQuery和这个jq插件

传参方式如下：

<html>
    <meta charset="utf-8">
    <title>input标签选择file直接读取本地图片并显示</title>
<body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">        </script>
    <script src="image-file-visible.js">
    </script>
    <script>
    $(document).ready(function(){
        //图片显示插件
        $.imageFileVisible({wrapSelector: "#image-wrap",   
        fileSelector: "#file",
         100,
        height: 50
        });
    });
</script>
<input type="file" id="file">
<div id="image-wrap"></div>
</body>
</html>