多图片上传(前端)

来源：互联网发布：vb编程实例编辑：程序博客网时间：2024/05/22 13:34

效果展示：这里写图片描述
需要引用：

<script type="text/javascript" src="/jquery.min.js')"></script><script src="/jquery.fileupload.js"></script><script src="http://malsup.github.com/jquery.form.js"></script>

html:

<div class="form-group">            <label>图片：</label>            <div class="upload_choose clearfix">                <input type="file" name="avatar" class="btn " id="fileuploadImgs">                <div class="imgMaterials">                    <input type="hidden" name="materials[]">                   <img class="imgShow" imgId="" src="/images/add_img.png">                </div>                <div class="imgMaterials">                    <input type="hidden" name="materials[]">                   <img class="imgShow" imgId="" src="/images/add_img.png">                </div>                <div class="imgMaterials">                    <input type="hidden" name="materials[]">                   <img class="imgShow" imgId="" src="/images/add_img.png">                </div>                <div class="imgMaterials">                    <input type="hidden" name="materials[]">                    <img class="imgShow" imgId="" src="/images/add_img.png">                </div>                <div class="imgMaterials">                    <input type="hidden" name="materials[]">                    <img class="imgShow" imgId="" src="/images/add_img.png">                </div>            </div>        </div>

css:

 <style type="text/css">        .imgMaterials{border: 2px solid #ddd;float: left;margin: 10px;position: relative;}        .imgMaterials .imgShow{width: 100px;}    </style>

js:

$('#fileuploadImgs').fileupload({    dataType: 'json',    url: '/admin/uploadimg/addimgs',    done: function (ev,data) {        if(data.result.code == 100) {            var attr_img = data.result.data.image_uri;            var img_id = data.result.data.image_id;            console.log(img_id);            $('.imgMaterials').each(function(){                if(!$(this).find('.imgShow').attr('imgId')){                    $(this).find('.imgShow').attr('src',attr_img);                    $(this).find('.imgShow').attr('imgId',img_id);                    $(this).find('input').val(img_id);                    $(this).find('.imgDelete').show();                    return false;                }            });        }else{            layer.msg('上传失败');        }    }});

阅读全文

0 0