多图片上传(前端)

最新推荐文章于 2024-05-22 22:30:17 发布

喵生初现

最新推荐文章于 2024-05-22 22:30:17 发布

阅读量610

点赞数

本文链接：https://blog.csdn.net/u011020900/article/details/75695568

版权

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

<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('上传失败');
        }
    }
});