欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-15 09:11:58
设备图片: ... ......
<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); };