移動端輕量級圖片Ajax上傳預覽，刪除

打包圖片數據，Ajax上傳，後臺處理與表單一致

效果圖：

 

上傳圖片

點擊圖片查看

點擊刪除圖片

HTML代碼：

<form id="classdynamics_form" action="javascript:void(0);"  class="form_post" method="post"  enctype="multipart/form-data">
    <div class="weui-cells__title">圖片</div>
    <div class="weui-gallery" id="gallery">
        <span class="weui-gallery__img" id="galleryImg"></span>
        <div class="weui-gallery__opr">
            <a href="javascript:" rel="external nofollow" class="weui-gallery__del">
                <i class="weui-icon-delete weui-icon_gallery-delete"></i>
            </a>
        </div>
    </div>

    <input type="hidden" name="user_data" value="{$user_data.user_id}">
    <input type="hidden" name="school_id" value="{$school_id}">

    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files" id="uploaderFiles">
                        </ul>
                        <div class="weui-uploader__input-box">
                            <input id="uploaderInput" class="weui-uploader__input zjxfjs_file" type="file" accept="image/*" multiple="" name="pic[]" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="weui-btn-area">
        <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">保存</a>
    </div>
</form>

css文件：weui.min.css（可以從https://weui.io/ 爬取，獲取不到可評論回覆）

js代碼：

$(function() {
    /*
     * 添加圖片
     */
    var img_files =new Array();
    var img_num = 0;
    var $tooltips = $('.js_tooltips');
    var tmpl = '<li class="weui-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;
        var img_num_ = img_num + files.length;
        console.log(img_num_);
        if(img_num_>9){
            alert("最多隻能上傳9張！");
            return false;
        }
        for (var i = 0, len = files.length; i < len; ++i) {
            img_files[img_num] = files[i];
            img_num  = img_num + 1;
            var file = files[i];

            if (url) {
                src = url.createObjectURL(file);
            } else {
                src = e.target.result;
            }

            $uploaderFiles.append($(tmpl.replace('#url#', src)));
        }
        uploaderInput.value="";
    });
    var index;
    $uploaderFiles.on("click", "li", function(){
        index = $(this).index();
        $galleryImg.attr("style", this.getAttribute("style"));
        $gallery.fadeIn(100);
    });
    $gallery.on("click", function(){
        $gallery.fadeOut(100);
    });

    $(".weui-gallery__del").click(function() {
        // 刪除知道圖片
        $uploaderFiles.find("li").eq(index).remove();
        img_files.splice(index, 1);
        img_num  = img_num - 1;
    });

    /*
     * 提交
     */
    var class_ids ='';
    $('#showTooltips').on('click', function() {
        var falg = 0;

        if(img_num == 0){
            //圖片個數爲0
            $tooltips.html('請上傳圖片');
            $('.page.cell').removeClass('slideIn');
            $tooltips.css('display', 'block');
            setTimeout(function() {
                $tooltips.css('display', 'none');
            }, 2000);
            return false;
        }

        //打開loading
        var $loadingToast = $('#loadingToast');
        if ($loadingToast.css('display') != 'none') return;
        $loadingToast.fadeIn(100);


        var formData = new FormData();
        var t = $('#classdynamics_form').serializeArray();
        $.each(t, function() {
            if(this.name != "class_id[]"){
                formData.append(this.name, this.value);
            }
        });
        formData.append('class_id', class_ids);
        formData.append('id', "{$Think.get.id}");
        console.log(formData);
        for(var x=0; x<img_files.length;x++){
            formData.append('pic[]', img_files[x]);
        } 
        $("#loadingToast").css('display',"block");
        $.ajax({
            url: "upload.php",
            type: "post",
            data: formData,
            contentType: false,
            processData: false,
            mimeType: "multipart/form-data",
            success: function (res) {
                if(res == 1){
                    $("#log-msg").html("添加成功");
                }else{
                    $("#log-msg").html("添加失敗");
                }
                $("#loadingToast").css('display',"none");
                $("#toast").css("opacity","1");
                $("#toast").css("display","block");
                window.history.go(-1);
            },
            error: function (data) {
                console.log(data);
            }
        });

    });
});