JS单图片上传编写

单图片上传要点：

<p class="em-rec" id="previewPicture"><i class="iconfont">&#xe651;</i></p>
<p class="file-btn"><input type="file" name="Picture" class="em-btn" accept="image/jpeg,image/x-png,image/png" data-img-preview="previewPicture"/>选择照片</p>

input[file]是隐藏不可见的，手动设置一个按钮来让用户点击，并且这个按钮和对应的input[file] 有一个联动关系，就是input[file] 有一个自定义属性 data-img-preview 这个值和按钮的ID是相同的，当点击时候，通过ID去执行input的click( ),就调用了input[file]的事件，input 还有一个属性accept，可以设置选择文件可接受的类型：
图片类型：
accept=”image/jpeg,image/x-png,image/png”
excel xls xlsx类型
accept=”application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel”、

$(document).ready(function() {
    window.previewLocalImageFile = function(source, previewContainer) {
        console.info(previewContainer.attr("id"));
        console.info(source.files[0]);
        if (source.files) {
            if(source.files[0]) {
                $(source).data("has-file", true);
                previewContainer.html("");
                var img = document.createElement("img");
                previewContainer.append(img);
                img.onload = function() {
                    img.style.width = "100%";
                    img.style.height = "100%";
                }
                var reader = new FileReader();
                reader.onload = function(evt) {
                    img.src = evt.target.result;
                }
                reader.readAsDataURL(source.files[0]);
            }
        } else { //兼容IE
            source.select();
            source.blur();
            var src = document.selection.createRange().text;
            if(src) {
                $(source).data("has-file", true);
                previewContainer.html("");
                var img = document.createElement("img");
                previewContainer.append(img);

                var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
                img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
                previewContainer.html("<div style='width:100%;height:100%;" + sFilter + src + "\"'></div>");
            }
        }
    };

    function _init() {
        $("input[type='file']").each(function() {
            var containerId = $(this).data("img-preview");
            if (containerId) {
                var $this = this;
                console.info($this.name);
                var previewContainer = $("#" + containerId);
                previewContainer.click(function() {
                    $this.click();
                });
                $($this).change(function() {
                    previewLocalImageFile(this, previewContainer);
                });
            }
        });
    }
    _init();
});

IE可能兼容性不是特别好，见谅。