jquery input file 多图上传，单张删除，查看

Posted 2022-06-04 byme

<div class="form-group">
                                <label for="imgs" class="col-md-3 col-sm-3 control-label">设备图片:</label>
                                <div class="col-md-8 col-sm-8">
                                    <div class="photo-box">
                                        <div class="photo-box-icon">
                                            <img style="width: 100%;" src="../../img/H5_addPhoto.png" alt="图片">
                                            <input type="file" onchange="addPhoto(this,event)" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" id="imgs" />
                                        </div>
                                    </div>
                                </div>
                            </div>

.photo-box 
    padding: 10px;
    display: inline-block;


.photo-box-icon 
    width: 50px;
    height: 50px;
    display: inline-block;
    position: relative;


.photo-box-icon img 
    width: 100%;
    height: 100%;


.photo-box-icon input 
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    opacity: 0;


.photo-add 
    /*width: 230px;*/
    width: 100px;
    height: 100px;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid #32c5d2;
    position: relative;
    z-index: 9;
    margin: 6px;
    overflow: hidden;


.photo-add img 
    width: 100%;
    height: 100%;
    background-size: contain;


.photo-add .closeIcon 
    position: absolute;
    top: 0;
    background: #000;
    opacity: 0.6;
    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;
    color: #fff;

//图片上传
var attachmentArr = [];

function addPhoto(file, e) 
    var fileObj = file.files[0];
    var formData = new FormData();
    formData.append(‘upfile‘, fileObj);
    var options = 
        url: urls + "/file/uploadImage",
        type: ‘POST‘,
        data: formData,
        processData: false,
        contentType: false,
        headers: 
            "author-token-key": localStorage.getItem(‘token‘)
        ,
        success: function(rsp) 
            // console.log(‘rsp‘,rsp)
            imgs = $.parseJSON(rsp).url; //json 转对象
            // console.log(‘imgs‘,imgs)
            var innerhtml = ‘<div class="photo-add" onmouseover ="IconShow(this)" onmouseout ="IconHide(this)">‘ +
                ‘<img src="‘ + imgs + ‘" alt = "添加照片" class="photoShow" onclick="viewBigPhoto(this)"/>‘ +
                ‘<div class="closeIcon">‘ +
                ‘<span class="delPhoto-btn" onclick="delPhoto(this)">‘ + "X" +
                ‘</span>‘ +
                ‘</div>‘ +
                ‘</div>‘;
            $(".photo-box").before(innerHtml);
            attachmentArr.push(imgs);
            //避免不能重复提交同一张图片
            e.target.value = ‘‘;
        ,
        error: function(e) 
            layer.msg(‘上传失败，请重新上传‘)
            console.log("网络错误!");
        
    ;
    $.ajax(options);
;

//删除图标显隐
function IconShow(e) 
    $(e).children(‘.closeIcon‘).show();
;

function IconHide(e) 
    $(e).children(‘.closeIcon‘).hide();
;

//编辑时照片显示
function editPhotoShow(obj) 
    // console.log(‘obj‘,obj)
    if (obj) 
        imgs = obj.split(‘;‘); //分割一下下
    ;
    var innerHtml = ‘‘;
    for (var i = 0; i < imgs.length; i++) 
        innerHtml += ‘<div class="photo-add" onmouseover ="IconShow(this)" onmouseout ="IconHide(this)">‘ +
            ‘<img style = "width: 100%;" src=‘ + imgs[i] + ‘ alt = "添加照片" class="photoShow" onclick="viewBigPhoto(this)"/>‘ +
            ‘<div class="closeIcon">‘ +
            ‘<span class="delPhoto-btn" onclick="delPhoto(this)">‘ + "X" +
            ‘</span>‘ +
            ‘</div>‘ +
            ‘</div>‘;
    ;
    //获取编辑图片值
    attachmentArr = [];
    attachmentArr = imgs;
    $(".photo-box").before(innerHtml);
;
//图片删除
function delPhoto(e) 
    var thisImage = $(e).parent().parent().find(‘img‘).attr("src");
    attachmentArr.remove(thisImage);
    $(e).parent().parent().remove();
;
/*
 *图片放大预览
 */
function viewBigPhoto(e) 
    var imgSrc = $(e).attr(‘src‘);
    $(‘#PhotoBigBox‘).modal(‘show‘);
    $(‘.photoViewDiv img‘).attr(‘src‘, imgSrc);
;