master

分支 (1)

管理

管理

master

upload-demo
/
upload.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>index</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/minireset.css/0.0.2/minireset.min.css" rel="stylesheet">
	<script src="js/jquery-3.4.1min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
	<link rel="stylesheet" href="css/reset.css">
    <script src=""></script>
</head>
<style>

    body {
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-color: #464646;
    }

    .title-name {
        color: #efefef;
    }

    .main-box {
        padding: 10px;
        height: 100%;
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .pic-box {
        width: 90%;
        height: 150px;
        margin: 10px 10px;
        overflow-x: auto;
        white-space: nowrap;
        background-color: #ffffff;
        border-radius: 10px;
    }


    .pic-box ul{
        margin: 10px;
        border-radius: 10px;
        display: flex;
    }

    .video-box {
        background-color: #ffffff;
        width: 90%;
        height: 240px;
        margin: 10px;
        border-radius: 10px;
    }

    .upload-video, #video-upload {
        width: 100%;
        height: 80%;
        background-image: url(img/add-pic.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-size: 40px;
    }

    .upload-video {
        background-image: url(img/video-upload-background.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 90%;
    }

    .video-preview {
        display: none;
        width: 90%;
        height: 80%;
        margin-top: 16px;
        margin-left: 18px;
        border-radius: 10px;
    }

    .one-box {
        background-image: url(img/add-pic.png);
        position: relative;
        display: flex;
        align-items: center;
        background-color: #efefef;
        border-radius: 15px;
        width: 100px;
        height: 100px;
        margin-right: 5px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-size: 50px;
    }

    .re-box {
        display: flex; /* 如果内部元素也需要水平排列 */
        position: relative;
        align-items: center;
        width: 100px;
        height: 100px;
        background-color: #efefef;
        border-radius: 15px;
        object-fit: contain;

    }

    .re-box img{
        width: 100px;
        height: 100px;
        object-fit: contain;
        border-radius: 10px;
    }

    .file-btn, .input-box {
        height: 100px;
        width: 100px;
        opacity:0;
    }

    .remove-input {
        background-color: #efefef;
    }

    .delete-image {
        position: absolute;
        height: 25px;
        top: -10.5px;
        left: 85.5px;
        z-index: 100;
    }

    .img-tips {
        margin: 2px 0 0 5px;
    }

    .video-tips {
        margin: 2px 0 0 5px;
    }

    #video-upload {
        opacity:0;
    }

    .delete-video {
        display: none;
        position: absolute;
        height: 35px;
        top: 215.5px;
        left: 345.5px;
        z-index: 100;
    }

    .release-btn {
        width: 160px;
        height: 50px;
        background-color: green;
        text-align: center;
        border-radius: 20px;
    }


</style>
<body>
    <div class="main-box">
        <div class="title-name">上传素材</div>
        <div class="pic-box" id="fileBox">
            <ul id="image-list">
                <li class="one-box">
                    <div class="re-box" style="display: none;"></div>
                    <div class="input-box">
                        <input type="file" accept="image/*" multiple="multiple" class="file-btn" name="img[]"/>
                    </div>
                </li>
            </ul>
            <div class="img-tips">最多可以上传6张照片</div>
        </div>
        <div class="video-box">
            <div class="upload-video">
                <input type="file" id="video-upload" accept="video/*">
            </div>
            <img class="delete-video" src="img/image-delete.png"/>
            <div class="video-preview" id="video-preview"></div>
            <div class="video-tips">请上传您的视频作品</div>
        </div>
        <div class="release-btn">提交</div>
    </div>
</body>
<script>

    var box = $("#fileBox .re-box");    //显示图片box
    var file = $("#file"); //file对象
    var fileLists = []; //定义数组
    var videoFile;

    $(document).ready(function() {
        $('#video-upload').on('change', function(event) {
            var file = event.target.files[0];
            $('.video-preview').show();
            $('.upload-video').hide();
            $('.delete-video').show();
            videoFile = file;
            if (file) {
                var videoUrl = URL.createObjectURL(file);
                var videoElement = $('<video controls></video>').attr('src', videoUrl);
                $('#video-preview').empty().append(videoElement);
            }
        });

        // 删除视频事件
        $('.delete-video').click(function() {
            $('.delete-video').hide();
            $('.upload-video').show();
            $('.video-preview').hide();
            $('.video-upload').show();
            videoFile = null;
            $('#video-upload').val('');
        });

        $('.release-btn').click(function() {

            fileUpload()
        });

        $('.check-idx').click(function(){
            printDelIndex();
        })
    });

    function printFileNames() {
        console.log("当前文件列表中的图片名称：");
        fileLists.forEach(function(file, index) {
            console.log(`文件 ${index + 1}: ${file.name}`);
        });
    }

    function printDelIndex(){
        $('#image-list .delete-image').each(function(idx) {
            console.log('del pic index '+idx);
        });
    }

    //触发选中文件事件
    $("#fileBox").on("change", ".file-btn", function(event){

        var file = event.target.files;  //获取选中的文件对象

        var parentLi = $(this).closest('li.one-box');
        var liCount = $('li').length;

        for(i = 0; i< file.length; i ++) {

            //console.log(file[i]);
            var size = file[i].size;
            if(size > 2 * 1024 * 1024 ) {//限制图片大小只能在2M以内
                alert('图片大小不能超过2M');
                break;
                return false;
            }
            $('.re-box').show();
            var imgTag = $("<img src=''/>");
            var fileName = file[i].name;    //获取当前文件的文件名
            var url = createObjectURL(file[i]); //获取当前文件对象的URL
            imgTag.attr("src",url);
            parentLi.find('.re-box').append(imgTag);
            event.target.parentNode.style.display = "none";
            fileLists.push(file[i]);
            // 添加删除按钮
            var deleteBtn = $('');
            var length = fileLists.length;
            var currIndex = length - 1;
            parentLi.append(`<img class="delete-image" src="img/image-delete.png" index="${currIndex}"/>`);
        }
        // parentLi.append(`<img class="delete-image" src="img/image-delete.png"/>`);
        if(liCount < 6){
            $('#image-list').append(`<li class="one-box">
                    <div class="re-box" style="display: none;"></div>
                    <div class="input-box">
                        <input type="file" multiple="multiple" class="file-btn" name="img[]"/>
                    </div>
                </li>`);
        }
    });

    function fileUpload(){
        let param = new FormData();
        for(var i=0; i<fileLists.length;i++){
            param.append('file[]', fileLists[i], i);
        }
        if (videoFile) {
            param = new FormData();
            formData.append('video', videoFile);
        } else {
            alert('请选择一个视频文件！');
        }
        printFileNames()
        // $.ajax({
        //     url:url,
        //     type:'POST',
        //     data:param,
        //     async: false,
        //     cache: false,
        //     contentType: false,
        //     processData: false,
        //     success:function(data){
        //         alert(data)

        //     },
        //     error:function(){
        //         alert(res.description || res.message || "上传失败");
        //     }
        // });
	}

    $('#image-list').on('click', '.delete-image', function() {
        var index = $(this).attr('index');
        console.log('curr del pic index ' + index)
        $(this).closest('li').remove();
        if (index !== undefined) {
            fileLists.splice(index, 1);
            // 更新所有后续删除按钮的索引
            $('#image-list .delete-image').each(function(idx) {
                $(this).attr('index', idx);
            });
        }
        printFileNames();
    });

    $('.remove-input').click(function(){
        $(".file-btn").remove();
    })

    function createObjectURL(blob){
        if (window.URL){
            return window.URL.createObjectURL(blob);
        } else if (window.webkitURL){
            return window.webkitURL.createObjectURL(blob);
        } else {
            return null;
        }
    }
</script>
</html>