css

    .buy-pic-select{margin: 0; padding:0; height: 25px;}
    #buy-pic-location-cont{display:none;position:absolute;left:77px;top:38px;background:#ccc; z-index: 100;width:836px;padding: 12px;display:none;height:auto;border:1px solid #ccc; background:#FFF;}
    #buy-pic-location-cont .area-item{display:inline-block; padding:6px 12px; cursor:pointer;margin:0 12px 12px 0; border-radius:4px;border:1px solid #CCC;}
    #buy-pic-location-cont .area-item.active{background:#005bac;color:#FFF;border:1px solid #005bac;}
    .buy-pic-cert-tit{
        position: absolute;
        top: 8px;
    }
    .buy-pic-certificate{
        padding-left:6px;
        margin-left: 220px;
        border-left: 1px solid #666;
        position: relative;
    }
    .buy-pic-certificate:before{
        content: "";
        display: block;
        position: absolute;
        left: -1px;
        height: 6px;
        z-index:1;
        top: -6px;
        border-left: 1px solid #666;
    }
    .buy-pic-certificate:after{
        content: "";
        display: block;
        position: absolute;
        left: -1px;
        height: 6px;
        z-index:1;
        bottom: -6px;
        border-left: 1px solid #666;
    }
    .buy-pic-certificate .upload{
        display: inline-block;
        margin: 0 8px;
        padding: 4px 8px;
        color:#FFF;
        border: 1px solid #005BAC;
        border-radius: 4px;
        background-color: #005BAC;
        cursor: pointer;
        }
        #attachments3{}
        #attachmentText3{display: inline-block;}
        #attachmentText3>div{position:relative; width:600px;}
        #attachmentText3>div .attachment-text-p{margin:4px; display: inline-block;}
        #attachmentText3>div .attachment-remove{position:absolute; right:0;top:6px;display: inline-block;
            margin: 0 8px;
            padding: 0 6px;
            width:16px;
            height:16px;
            color:#FFF;
            cursor: pointer;
            background: url("/xhs-web-mall/images/formPrompt.png") no-repeat;}

html

        <div class="cont-item" style="min-height: 26px;">
            <span class="buy-pic-cert-tit">圖片</span>
            <div id="buy-pic-certificate" class="buy-pic-certificate">
            ##<span class="upload">上傳文件</span>


            <form id="attachments3" enctype="multipart/form-data" class="form-horizontal" novalidate="novalidate">
            <div class='form-body'>
            <div class='form-group'>
            ##<label class="control-label">附件管理：</label>
            <div class="col-md-4">
            <span id="selectFile"  class="btn-default upload">選擇照片</span>
            <span id="attachmentUploadBtn3"  class="btn-default upload" >Upload</span>
            </div>
            </div>
            <div class='form-group'>
            ##<label class="control-label">附件上傳：</label>
            <input id="attachmentInputs3" type="file" style="display: none;" />
            <div id="attachmentText3" class="col-md-3">
            </div>
            </div>
            </div>
            </form>


        </div>

js

    //存放file對(duì)象
     var checkingPic = false; 
     var attachmentArray = [];
     var updatePicIndex = function(){
        $(".pic-div").map(function(i,v){
            var $V = $(v);
            $V.attr("index",i).find(".attachment-remove").attr("data-index",i);
        });
     };
     //attachment-remove
     $("#attachmentText3").on("click", ".attachment-remove", function (even) {
        var index = $(this).attr('data-index');
        $(this).parent().remove();
        attachmentArray.splice(index, 1);
         //刪除attachmentArray數(shù)據(jù)
         // attachmentArray.splice($(this).data("index"), 1);
         // $(this).prev().prev().remove();
         // $(this).prev().remove();
         // $(this).remove();
          //更新序號(hào)
        updatePicIndex();
     });
     
     //Select File
     $("#selectFile").click(function (even) {
         // 獲取input
         $("#attachmentInputs3").click();
     });
     
     //input change
     $("#attachmentInputs3").change(function (even) {
         // 獲取input
         var $t = $(this);
         var fileName = $t.val();
         var file = $t[0].files[0]; 
         // var picIndex = attachmentArray.length - 1;

         //是否選擇了文件
         if (fileName) {
             attachmentArray.push(file);
             var index = attachmentArray.length - 1;
             $("#attachmentText3").append("<div class='pic-div'><img src='/xhs-web-mall/images/loading.gif' style='width:20px;'><p class='attachment-text-p '>" + fileName + "</p><i class=\"fa fa-times attachment-remove\"></i></div>");
             //$("#attachmentText3").append("<div><img src='/xhs-web-mall/images/loading.gif' style='width:20px;'></div>");
             updatePicIndex();
         }
     });
     
     //upload3
     $("#attachmentUploadBtn3").click(function (even) {
         //這里只能手動(dòng)注入
         var formData = new FormData();
         //遍歷數(shù)據(jù)掷倔，手動(dòng)注入formData
         for (var i = 0; i < attachmentArray.length; i++) {
            formData.append("files", attachmentArray[i]);
         };
         // formData.append("applyId", "123456");
         // console.log(formData.getAll("files"));
         // return;
         //執(zhí)行上傳
         $.ajax({
             url: GLOBAL.WEBROOT +"/gds/buy/pic/upload",
             type: "post",
             data: formData,
             processData: false,
             contentType: false,
             success: function (data) {
             },
             error: function (e) {
             }
         });
     });