Uploader

  
            <div class="mx-cells mx-cells_form">
                <div class="mx-cell">
                    <div class="mx-cell__bd">
                        <div class="mx-uploader">
                            <div class="mx-uploader__hd">
                                <p class="mx-uploader__title">图片上传</p>
                                <div class="mx-uploader__info">0/2</div>
                            </div>
                            <div class="mx-uploader__bd">
                                <ul class="mx-uploader__files" id="uploaderFiles">
                                    <li class="mx-uploader__file" style="background-image:url(../../images/pic_160.png)"></li>
                                    <li class="mx-uploader__file" style="background-image:url(../../images/pic_160.png)"></li>
                                    <li class="mx-uploader__file" style="background-image:url(../../images/pic_160.png)"></li>
                                    <li class="mx-uploader__file mx-uploader__file_status" style="background-image:url(../../images/pic_160.png)">
                                        <div class="mx-uploader__file-content">
                                            <i class="mx-icon-warn"></i>
                                        </div>
                                    </li>
                                    <li class="mx-uploader__file mx-uploader__file_status" style="background-image:url(../../images/pic_160.png)">
                                        <div class="mx-uploader__file-content">50%</div>
                                    </li>
                                </ul>
                                <div class="mx-uploader__input-box">
                                    <input id="uploaderInput" class="mx-uploader__input" type="file" accept="image/*" multiple/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
             $(function(){
                    var tmpl = '<li class="mx-uploader__file" style="background-image:url(#url#)"></li>',
                        $gallery = $("#gallery"), $galleryImg = $("#galleryImg"),
                        $uploaderInput = $("#uploaderInput"),
                        $uploaderFiles = $("#uploaderFiles");
                    $uploaderInput.on("change", function(e){
                        var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
                        for (var i = 0, len = files.length; i < len; ++i) {
                            var file = files[i];
                            if (url) {
                                src = url.createObjectURL(file);
                            } else {
                                src = e.target.result;
                            }
                            $uploaderFiles.append($(tmpl.replace('#url#', src)));
                        }
                    });
                    $uploaderFiles.on("click", "li", function(){
                        $galleryImg.attr("style", this.getAttribute("style"));
                        $gallery.fadeIn(100);
                    });
                    $gallery.on("click", function(){
                        $gallery.fadeOut(100);
                    });
                });
        </script>