html5 多文件上传

文件上传后，预览，预览时，可删除

by jun wang

HTML

<div>
  <input type="file" multiple id="myfile">

  <div class="gallery-container" id="gallery"> </div>

  <div class="gallery-container" id="gallery2"> </div>

</div>

CSS

.gallery-container {
    width: 100%;
    padding: 10px;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    font-size: 0;
    display: none;
}

.gallery-center-part {
    width: 60%;
    height: 100px;
    overflow-x: hidden;
    overflow-y: hidden;
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    text-align: center;
    position: relative;
}

.gallery-img-container {
    display: inline-block;
    width: 100%;
    height: 100%;
    overflow: visible;
    position: relative;
}

.gallery-prev-part,
.gallery-next-part {
    display: inline-block;
    height: 100px;
    width: 20%;
}

.gallery-prev-part{
    text-align: right;
}

.gallery-next-part{
    text-align: left;
}

.gallery-prev-part span,
.gallery-next-part span {
    line-height: 100px;
    font-size: 50px;
    cursor: pointer;
}

.gallery-img-box {
    width: 30%;
    height: 100%;
    vertical-align: top;
    margin-left: 3%;
    position: relative;
    font-size: 12px;
    display: inline-block;
}

.gallery-img-box:nth-child(3n+0){
    margin-right: 1%;
}
.gallery-img {
    width: 100%;
    height: 100%;
    vertical-align: top;
    position: relative;
}

/*鼠标移上去的提示*/

.gallery-img-tip {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 12px;
    cursor: pointer;
    z-index: 99;
}

/*遮挡层*/

.gallery-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 19891116;
    background-color: #000;
    opacity: 0.9;
}

/*相册预览容器*/

.gallery-preview-img-container {
    position: absolute;
    font-size: 0;
    display: inline-block;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 19892016;

}

.gallery-preview-left ,
.gallery-preview-right{
    position: absolute;
    top: 50%;
    height: 44px;
    width: 27px;
    transform: translateY(-50%);
    display: none;
    cursor:pointer;
}

.gallery-preview-left {
    left: 10px;
    background:...

JavaScript

$(function() {
  $("#myfile").change(function(event) {
    var fileList = $(this)[0].files;
    for (var i = 0; i < fileList.length; i++) {
      console.log(fileList.item(i).name);
      //上传到服务器
    }
  });
});



//立刻执行函数
(function ($) {
    "use strict";

    var Gallery = function (element, option) {
        this.$element = $(element);
        this.option = option;
        this.init();
        this.bind();
    };

    Gallery.prototype = {
        constructor: Gallery,
        init: function (option) {
            var tempDiv = $("<div class='gallery-prev-part'>" + "<span>" + " <" + "</span>" + " </div>" + " <div class='gallery-center-part'>" + " <div class='gallery-img-container'>" + " </div>" + "</div>" + " <div class='gallery-next-part'>" + "  <span>" + " >" + " </span>" + " </div>");
            this.$element.append(tempDiv);
        },

        addImg: function (url, desc) {

            //如果允许替换，则删除之前的，替换为最新的
            if (this.option && this.option.canReplace) {
                this.$element.data("imgArr", []);
                this.$element.find(".gallery-img-container").empty();
            }

            //预览图片
            var tempImg = $("<img class='gallery-img'/>");
            tempImg.attr("src", url);
            var optionToolDiv = $("<div class='gallery-option-tool'></div>");
            if (this.option && this.option.cantDel) {
                optionToolDiv.css("display", "none");
                this.$element.siblings("input[type='file']").css("display", "none");
            }
            optionToolDiv.append($("<span></span>").text(desc)).append("<span style='margin-left:10px;cursor: pointer;'><a>删除</a></span>");
            this.$element.find(".gallery-img-container").append($("<div class='gallery-img-box'></div>").append(tempImg).append(optionToolDiv));

            //存储当前图片
            var imgArr = this.$element.data("imgArr");
            if (imgArr == null) {
                imgArr = [];
            }
            imgArr.push(url);
 ...