jquery+bootstrap实现带图片预览删除的多图片上传效果代码-html代码-BFW代码库

jquery+bootstrap实现带图片预览删除的多图片上传效果代码

代码语言：html

所属分类：上传

代码描述：jquery+bootstrap实现带图片预览删除的多图片上传效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        .main {
           width: 80%;
           margin: 0 auto;
       }
       
       .upload-content .modal-dialog {
           width: 100%;
       }
       
       .show {
           text-align: center;
       }
       
       .upload-content .content-img-list {
           display: inline-block;
           padding: 0;
       }
       
       .upload-content .content-img .gcl {
           font-size: 25px;
           color: #aaa;
       }
       
       .upload-content .content-img-list-item {
           position: relative;
           display: inline-block;
           width: 150px;
           height: 150px;
           margin: 7px;
           border: 1px dashed #DEDEDE;
           border-radius: 4px;
           background-color: #fff;
           vertical-align: middle;
           line-height: 150px;
       }
       
       .upload-content .content-img-list-item .hide {
           display: none;
       }
       
       .upload-content .content-img-list-item div {
           position: absolute;
           left: 0;
           bottom: 0;
           text-align: center;
           width: 100%;
           background: rgba(0, 0, 0, 0.4);
           height: 100%;
           line-height: 150px;
       }
       
       .upload-content .content-img-list-item .delete-btn,
       .upload-content .content-img-list-item .big-btn {
           color: #fff;
           cursor: pointer;
           margin: 0 5px;
       }
       
       .upload-content .content-img-list-item img {
           width: 100%;
       }
       /*.upload-content .upload-tips {
           padding-top: 10px;
           text-align: right;
           width: 100%;
       }*/
       /*图片上传按钮*/
       
       .upload-content .file {
           position: relative;
           display: inline-block;
           border: 1px dashed #DEDEDE;
           border-radius: 4px;
           width: 150px;
           height: 150px;
           line-height: 150px;
           text-align: center;
           background-color: #fff;
           vertical-align: top;
           margin: 7px;
       }
       
       .upload-content .file input {
           position: absolute;
           right: 0;
           top: 0;
           opacity: 0;
           cursor: pointer;
           width: 150px;
           height: 150px;
       }
       
       .upload-content .file:hover {
           border: 1px dashed #3a75dc;
       }
       
       #imgPreview {
           width: 40%;
           height: 180px;
           margin: 10px auto 0px auto;
           border: 1px solid black;
           text-align: center;
       }
       
       #imgSpan {
           position: absolute;
           top: 60px;
           left: 40px;
       }
       
       .filepath {
           width: 100%;
           height: 100%;
           opacity: 0;
       }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

</head>

<body>
    <div class="main">
        <div class="upload-content">
            <h3>上传图片</h3>
            <div class="content-img">
                <ul class="content-img-list"></ul>
                <div class="file">
                    <i class="gcl gcladd fa fa-lg fa-plus"></i>
                    <input type="file" name="file" accept="image/*" id="upload" multiple>
                </div>
            </div>
            <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">

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


    <script>
    </script>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap-3.3.4.js"></script>
    <script>
        var imgFile = []; //文件流
var imgSrc = []; //图片路径
var imgName = []; //图片名字
$(function() {
    // 鼠标经过显示删除按钮
    $('.content-img-list').on('mouseover', '.content-img-list-item', function() {
        $(this).children('div').removeClass('hide');
    });
    // 鼠标离开隐藏删除按钮
    $('.content-img-list').on('mouseleave', '.content-img-list-item', function() {
        $(this).children('div').addClass(.........完整代码请登录后点击上方下载按钮下载查看