input file圖片上傳

<div class="div-title">
    <h5>圖片上傳</h5>
    <div class="photo-box">
        <div class="photo-box-icon">
            <img style="width: 100%;" src="<%=staticServPath%>/static/img/H5_addPhoto.png" alt="picture">
            <input type="file" onchange="angular.element(this).scope().addPhoto(this)" accept="image/*" id="carPhotoFile" />
        </div>
    </div>
</div>

/*圖片上傳*/
.photo - box {
        padding: 10 px;
        display: inline - block;
    }
    .photo - box - icon {
        width: 50 px;
        height: 50 px;
        display: inline - block;
        position: relative;
    }
    .photo - box - icon img {
        width: 100 % ;
        height: 100 % ;
    }
    .photo - box - icon input {
        width: 50 px;
        height: 50 px;
        position: absolute;
        top: 0;
        opacity: 0;
    }
    .photo - add {
        width: 230 px;
        height: 100 px;
        display: inline - block;
        margin - right: 10 px;
        margin - bottom: 10 px;
        border: 1 px solid #32c5d2;
      position: relative;
      z-index: 9;
  }
  .photo-add img{
      width: 100%;
      height: 100%;
      background-size: 100% 100%;
  }
  .photo-add .closeIcon{
      position: absolute;
      top: 0;
      background: red;
      height: 20px;
      width: 100%;
      display: none;
  }
  .photo-add .closeIcon .delPhoto-btn{
      position: absolute;
      right: 0;
      width: 20px;
      height: 18px;
      top: 1px;
      text-align: center;
      cursor: pointer;
  }

$scope.addPhoto = function(file) {
    var fileObj = file.files[0];
    var formData = new FormData();
    formData.append(`file`, fileObj);
    var options = {
        url: webroot + "/services/api/file/uploadImg",
        type: `POST`,
        data: formData,
        processData: false,
        contentType: false,
        headers: {
            `ticket`: ticket
        },
        success: function(rsp) {
            if (rsp.code == 200) {
                imgs = rsp.result;
                var innerHtml = `<div class="photo-add" onchange="angular.element(this).scope().showPhoto(this)">` +
                    `<img style = "width: 100%;" src="` + imgs + `" alt = "新增照片" class="photoShow" />` +
                    `</div>`;
                $(".photo-box").before(innerHtml);
                attachmentArr.push(rsp.result);
            } else {
                console.log(rsp.message);
            }
        },
        error: function(e) {
            console.log("網路錯誤!");
        }
    };
    $.ajax(options);
};

var attachmentArr = [];

function addPhoto(file) {
    var fileObj = file.files[0];
    var formData = new FormData();
    formData.append(`file`, fileObj);
    var options = {
        url: webroot + "/upload/uploadImg",
        type: `POST`,
        data: formData,
        processData: false,
        contentType: false,
        success: function(rsp) {
            if (rsp.code == 200) {
                imgs = rsp.result;
                var innerHtml = `<div class="photo-add" onmouseover ="IconShow(this)" onmouseout ="IconHide(this)">` +
                    `<img style = "width: 100%;" src="` + imgs + `" alt = "新增照片" class="photoShow" />` +
                    `<div class="closeIcon">` +
                    `<span class="delPhoto-btn" onclick="delPhoto(this)">` + "X" +
                    `</span>` +
                    `</div>` +
                    `</div>`;
                $(".photo-box").before(innerHtml);
                attachmentArr.push(rsp.result);
                // 超過兩張圖片隱藏圖示
                // if (attachmentArr.length >= 2) {
                //     $(`.photo-box-icon`).hide();
                // };
            } else {
                hint(rsp.message);
            }
        },
        error: function(e) {
            console.log("網路錯誤!");
        }
    };
    $.ajax(options);
};
//刪除圖示顯隱
function IconShow(e) {
    $(e).children(`.closeIcon`).show();
};

function IconHide(e) {
    $(e).children(`.closeIcon`).hide();
};
//圖片刪除
function delPhoto(e) {
    var thisImage = $(e).parent().parent().find(`img`).attr("src");
    attachmentArr.remove(thisImage);
    $(e).parent().parent().remove();
};