图片上传并展示预览html

• CSS

 .imageDiv {
        display: inline-block;
        width: 100px;
        height: 100px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px dashed #e6e6e6;
        background: #F5F5F5;
        position: relative;
        overflow: hidden;
        margin: 10px;
    }

    .cover {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: rgba(0, 0, 0, .3);
        display: none;
        line-height: 99px;
        text-align: center;
        cursor: pointer;
    }

    .cover .delbtn {
        color: #f44336;
        font-size: 16px;
        font-style: normal;
    }

    .imageDiv:hover .cover {
        display: block;
    }

    .addImages {
        display: inline-block;
        width: 100px;
        height: 100px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px dashed #ddd;
        background: #fafafa;
        position: relative;
        overflow: hidden;
        margin: 10px;
    }

    .clickUpload {
        text-align: center;
        display: inline-block;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 5px 0 0 0;
        color: #999;
    }

    .clickUpload span {
        font-size: 40px;
        color: #0088CC;
    }

    .fileUpload {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        opacity: 0;
        cursor: pointer;
    }

    .item-container img {
        cursor: pointer;
        transition: all 0.6s;
    }

    .item-container img:hover {
        transform: scale(2);
    }

• HTML <模态框>

 

<!-- 模态框 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h3 class="modal-title" id="modalTitle">XXX</h3>
                <button type="button" class="close" data-dismiss="modal" style="margin-top: -24px;">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
                <form id="mealForm" autocomplete="off">

                    <div class="table-responsive">
                        <table class="table">
                            <tbody id="modelTable">
                            <tr>
                                <td rowspan="3" align="center">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <div id="fileCenter">
                                                    <p style="color: #888; padding: 5px 0; margin: 0">注：每张照片大小不可超过4M</p>
                                                    <div class="fileImgDiv">
                                                        <div class="addImages">
                                                            <input type="file" class="fileUpload" id="i_fileInput"
                                                                   name="FPicture"
                                                                   multiple="multiple"
                                                                   accept="image/jpeg,image/jpg"/>
                                                            <div class="clickUpload">
                                                                <span>+</span>
                                                                <p>点击上传图片</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="msg" style="display: none;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td align="right">
                                    <label>XXX:</label>
                                    <input type="text" >
                           
                                </td>
                            </tr>
                      

                            </tbody>
                        </table>
                    </div>

                </form>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer" style="border: none;">
                <input type="hidden" id="operationType"/>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button"  class="btn btn-primary">保存</button>
            </div>

        </div>
    </div>
</div>

• JS

var fileArr = {};
$(".fileUpload")
    .change(
        function () {
            // 获取选择图片的对象
            var docObj = $(this)[0];
            var picDiv = $(this).parents(".fileImgDiv");
            var fileList = docObj.files;
            for (var i = 0; i < fileList.length; i++) {
                // 动态添加html元素
                var picHtml = "<div class='imageDiv' > <img  style='object-fit:cover;' id='img"
                    + fileList[i].name
                    + "' /> <div class='cover'><i class='delbtn'>删除</i></div></div>";
                $('.imageDiv').remove();
                picDiv.prepend(picHtml);
                // 获取图片imgi的对象
                var imgObjPreview = document.getElementById("img"
                    + fileList[i].name);
                if (fileList && fileList[i]) {
                    // 图片属性
                    imgObjPreview.style.display = 'block';
                    imgObjPreview.style.width = '100px';
                    imgObjPreview.style.height = '100px';
                    // IE以外浏览器
                    imgObjPreview.src = window.URL
                        .createObjectURL(docObj.files[i]); // 获取上传图片文件的物理路径;
                    fileArr = fileList[i];
                }
            }
            /* 删除图片功能 */
            $(".delbtn").click(
                function () {
                    var _this = $(this);
                    var value = _this.parents(".imageDiv")
                        .children("img").attr("id");
                    var num = remove(fileArr, value.slice(3));
                    _this.parents(".imageDiv").remove();
                });
        });

• 效果图