上传图片并回显

在这里插入图片描述
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>多张图片上传</title>
<script src="js/jquery.min.js"></script>
<!--<script src="layer/layer.js"></script>-->
<style>
    .add_div {
        width: 400px;
        height: 500px;
        border: solid #ccc 1px;
        margin-top: 40px;
        margin-left: 170px;
        padding-left: 20px;
    }
    .file-list {
        height: 125px;
        display: none;
        list-style-type: none;
    }
    .file-list img {
        max-width: 200px;
        vertical-align: middle;
    }
    .file-list .file-item {
        margin-bottom: 10px;
        float: left;
        margin-left: 20px;
    }
    .file-list .file-item .file-del {
        display: block;
        margin-left: 20px;
        margin-top: 5px;
        cursor: pointer;
    }

    .load {
        height: 30px;
        width: 80px;
        background-color: cornflowerblue;
        font-size: 14px;
        line-height: 30px;
        cursor: pointer;
        display: inline-block;
        text-align: center;
        color: #fff;
        border-radius: 5px;
        border: 1px solid #666666;
        margin-left: 0px;
    }
</style>
</head>
<body>
<div class="add_div">
    <p>
        <button class="load" "document.getElementById('choose-file').click()">选择文件</button>
        <input type="file" name="" id="choose-file"  style="display: none" multiple="multiple">
    </p>

    <p>
    <ul class="file-list ">

    </ul>
    </p>
 <button style="cursor: pointer;margin-left: 150px;" href="javascript:;" id="upload">上传</button>
</div>
<script>
    $(function () {

        var $button = $('#upload'),
            $file = $("#choose-file"),
            $list = $('.file-list'),
            fileList = [];
        var curFile;
        // 选择按钮change事件，实例化fileReader,调它的readAsDataURL并把原生File对象传给它，
        // 监听它的onload事件，load完读取的结果就在它的result属性里了。它是一个base64格式的，可直接赋值给一个img的src.
        $file.on('change', function (e) {
            //上传过图片限值数量
            var numold = $('li').length;
            if(numold >= 6){
                layer.alert('最多上传6张图片');
                return;
            }
            var num = e.target.files.length;
            var numall = numold + num;
            if(num >6 ){
               layer.alert('最多上传6张图片');
               return;
            }else if(numall > 6){
                layer.alert('最多上传6张图片');
                return;
            }
            //原生的文件对象，相当于$file.get(0).files;//files[0]为第一张图片的信息;
            curFile = this.files;
            //将FileList对象变成数组
            fileList = fileList.concat(Array.from(curFile));
            for (var i = 0, len = curFile.length; i < len; i++) {
                reviewFile(curFile[i])
            }
            $('.file-list').fadeIn(2500);
        })


        function reviewFile(file) {
            //实例化fileReader,
            var fd = new FileReader();
            //获取当前选择文件的类型
            var fileType = file.type;
            //调它的readAsDataURL并把原生File对象传给它，
            fd.readAsDataURL(file);//base64
            //监听它的onload事件，load完读取的结果就在它的result属性里了
            fd.onload = function () {
                if (/^image\/[jpeg|png|jpg|gif]/.test(fileType)) {
                    $list.append('<li style="border:solid red 0px; margin:5px 5px;" class="file-item"><img src="' + this.result + '" alt=""style="width: 150px;height: 150px"><span class="file-del">删除</span></li>').children(':last').hide().fadeIn(2500);
                } else {
                    $list.append('<li class="file-item"><span class="file-name">' + file.name + '</span><span class="file-del">删除</span></li>')
                }
            }
        }

        //点击删除按钮事件：
        $(".file-list").on('click', '.file-del', function () {
            let $parent = $(this).parent();
            console.log($parent);
            let index = $parent.index();
            fileList.splice(index, 1);
            $parent.fadeOut(850, function () {
                $parent.remove()
            });
            //$parent.remove()
        });
        //点击上传按钮事件：
       /* $button.on('click', function () {
            var name = $('#name').val();
             if(fileList.length > 6){
                    layer.alert('最多允许上传6张图片');
                    return;
            } else {
                var formData = new FormData();
                for (var i = 0, len = fileList.length; i < len; i++) {
                    //console.log(fileList[i]);
                    formData.append('upfile[]', fileList[i]);
                }
                formData.append('name', name);

                $.ajax({
                    url: './product_add.php',
                    type: 'post',
                    data: formData,
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        if (data.status == '1') {
                            layer.msg(data.content, {icon: 6});
                        } else if (data.status == '2') {
                            layer.msg(data.content, {icon: 1});
                        }
                    }
                })
            }
        })*/
    })
</script>
</body>
</html>
猜你喜欢
