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

2019-08-14 10:25:08来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

<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); };

 


原文链接:https://www.cnblogs.com/Byme/p/11286905.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:javscript函数的运用

下一篇:arguments