模拟type=file;上传并预览图片

最近项目的会员中心，要做一个上传本地img并预览的效果。效果大概是这个样子。自己以前没做过；摸着石头过河总算完成了感觉有必要整理一下，写篇博客耍耍。

整体效果大概是这个样子的：

1.点击框框任何地方；弹出选择文件窗口；

2.选择后，再框框区域预览；

3.再次点击框框，更换图片。

下面说说整个实现的过程吧。

html代码的结构大概是这样的。

   <div class="imgitem secondImg">
       <div class="u-add-img-icon u-fileUploadContainer">   </div>
       <input id="fileImage2" type="file" multiple="" class="u-fileInput">
       <span class="imgcontainer"><img src=""  class="idImg"></span>
       <span class="backImg">***反面</span>
  </div>

步骤：

1.首选是要模拟type=file；点击之后选择文件的效果。

最外层的imgitem设置固定宽高，postion：realative；

然后就是加一张上传图片的图标；告诉用户可以上传预览图片

最后，input  type="file"位置绝对定位；设置透明度为0；位置刚好铺满外层的框框。这样点击框框里面任何位置就可以弹窗选择文件的框框了。

Css代码如下：

.imgitem {
  width: 240px;
  height: 160px;
  display: inline-block;
  border: 1px #d5d4d4 dotted;
  text-align: center;
  line-height: 160px;
  position: relative;//相对定位
  }
 .u-fileInput{
  width: 240px;
  height: 160px;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;//透明度为0
  filter: alpha(opacity=0);;//透明度为0，兼容IE8
  cursor: pointer;
  }
  //add-img图标
  .u-add-img-icon {
  width: 74px;
  height: 61px;
  background: url(../images/member/add-img-icon.png) no-repeat;
  display: inline-block;
  vertical-align: middle;

2.选择后预览；这个地方的实现比较巧妙；因为我们知道type=file；选择文件后，选择会返回一个file对象；而createObjectURL(file)可以接受一个文件对象；并返回文件的url；然后指定img的src围着url；就可以实现预览图片了。

这个地方稍微复杂；代码如下：

首选封装了一个上传预览的小插件：叫uploadPreview

有关createObjectURL的东东，不了解的百度，看一下。不是本文的重点；略过。

/*
*名称:图片上传本地预览
*作者:贾襄俊
*时间:2015年9月11日
*介绍:基于JQUERY扩展,图片上传预览插件

*参数说明: imgObj:图片jquery对象;type:支持文件类型;callback:选择文件显示图片后回调方法;
*使用方法: 
<div>
<img id="temp"/></div>
<input type="file" id="up" />
把需要进行预览的IMG标签外 套一个DIV 然后给上传控件ID给予uploadPreview事件
$("#up").uploadPreview({ imgObj: $("#temp"), type: ["gif", "jpeg", "jpg", "bmp", "png"], callback: function () { }});
*/
jQuery.fn.extend({
    uploadPreview: function (opts) {
        var _self = this,
            _this = $(this);
        opts = jQuery.extend({
            imgObj: null,
            type: ["gif", "jpeg", "jpg", "bmp", "png"],
            callback: function () {}
        }, opts || {});
        _self.getObjectURL = function (file) {
            var url = null;
            if (window.createObjectURL != undefined) {
                url = window.createObjectURL(file)
            } else if (window.URL != undefined) {
                url = window.URL.createObjectURL(file)
            } else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(file)
            }
            return url
        };
        _this.change(function () {
            if (this.value) {
                if(!opts.imgObj){
                    return;
                }
                if (!RegExp("\.(" + opts.type.join("|") + ")$", "i").test(this.value.toLowerCase())) {
                    alert("文件格式错误,必须是" + opts.type.join("，") + "中的一种");
                    this.value = "";
                    return false
                }
                if (document.selection) {
                    try {
                       opts.imgObj.attr(‘src‘, _self.getObjectURL(this.files[0]))
                    } catch (e) {
                        var src = "";
                        var obj = opts.imgObj;
                        var div = obj.parent("div")[0];
                        _self.select();
                        if (top != self) {
                            window.parent.document.body.focus()
                        } else {
                            _self.blur()
                        }
                        src = document.selection.createRange().text;
                        document.selection.empty();
                        obj.hide();
                        obj.parent("div").css({
                            ‘filter‘: ‘progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)‘
                        });
                        div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
                    }
                } else {
                    opts.imgObj.attr(‘src‘, _self.getObjectURL(this.files[0]))
                }
                opts.callback()
            }
        })
    }
});

然后就是input type =file的元素调用：

    //图片添加预览效果
    $(".u-fileInput").each(function(){
        var $this = $(this);
        $this.uploadPreview({imgObj:$this.next().find("img"), callback:uploadHandler});
        //获取url设置img src成功后，回调，隐藏add-icon；显示图片
        function uploadHandler() {
            $this.next().show();
            $this.prev().hide();
        }
    });

3.最后点击框框更换图片就比较简单了，这里就不多赘言了。

每天进步一点点。