input file图片上传

<div class="div-title">
    <h5>图片上传</h5>
    <div class="photo-box">
        <div class="photo-box-icon">
            <img style=" 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 = " 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 = " 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();
};