javascript 如何在jquery和Laravel中使用预览在一个输入字段中上传多个图像和文件

5vf7fwbs  于 2023-06-20  发布在  Java
关注(0)|答案(1)|浏览(101)
<div class="col-lg-12 mt-4">
                            <label for="file">{{ __('Upload Receipts/Bills (Multiple Document)') }}</label>
                            <div class="upload__box">
                                <div class="upload__btn-box">
                                  <label class="upload__btn">
                                    {{__('Upload Bills')}}
                          
                                    <input type="file" multiple="" id="files" name="files[]" data-max_length="20" class="upload__inputfile" accept="image/jpeg, image/jpg, image/png, application/pdf">
                                  </label>
                                </div>
                                <div class="upload__img-wrap"></div>
                              </div>
                          </div>

我正在尝试上传多个图像和文件，并进行预览和取消，但无法找到任何方法来执行此操作。

JavaScript

1条答案

按热度按时间
ct2axkht

ct2axkht1#

<!DOCTYPE html>
<html>
<head>
   
     <style>
        .select2-container .select2-selection--single{
            height:calc(2.25rem + 2px);
            font-size: .9rem;
        }
        p {
     margin: 0;
}
.upload__box {
     padding-top: 10px;
}
 .upload__inputfile {
     width: 0.1px;
     height: 0.1px;
     opacity: 0;
     overflow: hidden;
     position: absolute;
     z-index: -1;
}
 .upload__btn {
     display: inline-block;
     font-weight: 600;
     color: #fff;
     text-align: center;
     min-width: 116px;
     padding: 5px;
     transition: all 0.3s ease;
     cursor: pointer;
     border: 2px solid;
     background-color: #4045ba;
     border-color: #4045ba;
     border-radius: 10px;
     line-height: 26px;
     font-size: 14px;
}
 .upload__btn:hover {
     background-color: unset;
     color: #4045ba;
     transition: all 0.3s ease;
}
 .upload__btn-box {
     margin-bottom:0px;
}
 .upload__img-wrap {
     display: flex;
     flex-wrap: wrap;
     margin: 0 -10px;
}
 .upload__img-box {
     width: 200px;
     padding: 0 10px;
     margin-bottom: 0px;
}
 .upload__img-close {
     width: 24px;
     height: 24px;
     border-radius: 50%;
     background-color: rgba(0, 0, 0, 0.5);
     position: absolute;
     top: 10px;
     right: 10px;
     text-align: center;
     line-height: 24px;
     z-index: 1;
     cursor: pointer;
}
 .upload__img-close:after {
     content: '\2716';
     font-size: 14px;
     color: white;
}
 .img-bg {
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     position: relative;
     padding-bottom: 100%;
}
</style>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
   ImgUpload();
    
        function ImgUpload() {
        var imgWrap = "";
        var imgArray = [];

        $('.upload__inputfile').each(function () {
            $(this).on('change', function (e) {
            imgWrap = $(this).closest('.upload__box').find('.upload__img-wrap');
            var maxLength = $(this).attr('data-max_length');

            var files = e.target.files;
            var filesArr = Array.prototype.slice.call(files);
            var iterator = 0;
        
        
            filesArr.forEach(function (f, index) {

                // if (!f.type.match('image.*')) {
                // return;
                // }
            
                if (imgArray.length > maxLength) {
                return false
                } else {
                var len = 0;
                for (var i = 0; i < imgArray.length; i++) {
                    if (imgArray[i] !== undefined) {  
                    len++;
                    }
                }
                if (len > maxLength) {
                    return false;
                } else {
                    imgArray.push(f);

                    var reader = new FileReader();
                    reader.onload = function (e) {
                        console.log(f.type);
                        if(f.type == 'application/pdf'){
                            var html = "<div class='upload__img-box'><div style='background-image: url(" + e.target.result + ")' data-number='" + $(".upload__img-close").length + "' data-file='" + f.name + "' class='img-bg' ><div class='upload__img-close'></div><img  src='https://cdn-icons-png.flaticon.com/128/337/337946.png'></div></div>";

                        }else{
                            var html = "<div class='upload__img-box'><div style='background-image: url(" + e.target.result + ")' data-number='" + $(".upload__img-close").length + "' data-file='" + f.name + "' class='img-bg'><div class='upload__img-close'></div></div></div>";

                        }
                    imgWrap.append(html);
                    iterator++;
                    }
                    reader.readAsDataURL(f);
                }
                }
            });
            });
        });

        $('body').on('click', ".upload__img-close", function (e) {
            var file = $(this).parent().data("file");
            for (var i = 0; i < imgArray.length; i++) {
            if (imgArray[i].name === file) {
                imgArray.splice(i, 1);
                break;
            }
            }
            $(this).parent().parent().remove();
            $(this).parent().children().remove();
            
        });
        }
});
</script>
</head>
<body>

<form action="">
<div class="col-lg-12 mt-4">
                            <label for="file">Upload Document (Multiple Document)</label>
                            <div class="upload__box">
                                <div class="upload__btn-box">
                                  <label class="upload__btn">
                                   Upload file
                          
                                    <input type="file" multiple="" id="files" name="files[]" data-max_length="20" class="upload__inputfile" accept="image/jpeg, image/jpg, image/png, application/pdf">
                                  </label>
                                </div>
                                <div class="upload__img-wrap"></div>
                              </div>
                          </div>
</form>

</body>
$(document).ready(function(){
   ImgUpload();
    
        function ImgUpload() {
        var imgWrap = "";
        var imgArray = [];

        $('.upload__inputfile').each(function () {
            $(this).on('change', function (e) {
            imgWrap = $(this).closest('.upload__box').find('.upload__img-wrap');
            var maxLength = $(this).attr('data-max_length');

            var files = e.target.files;
            var filesArr = Array.prototype.slice.call(files);
            var iterator = 0;
        
        
            filesArr.forEach(function (f, index) {

                // if (!f.type.match('image.*')) {
                // return;
                // }
            
                if (imgArray.length > maxLength) {
                return false
                } else {
                var len = 0;
                for (var i = 0; i < imgArray.length; i++) {
                    if (imgArray[i] !== undefined) {  
                    len++;
                    }
                }
                if (len > maxLength) {
                    return false;
                } else {
                    imgArray.push(f);

                    var reader = new FileReader();
                    reader.onload = function (e) {
                        console.log(f.type);
                        if(f.type == 'application/pdf'){
                            var html = "<div class='upload__img-box'><div style='background-image: url(" + e.target.result + ")' data-number='" + $(".upload__img-close").length + "' data-file='" + f.name + "' class='img-bg' ><div class='upload__img-close'></div><img  src='https://cdn-icons-png.flaticon.com/128/337/337946.png'></div></div>";

                        }else{
                            var html = "<div class='upload__img-box'><div style='background-image: url(" + e.target.result + ")' data-number='" + $(".upload__img-close").length + "' data-file='" + f.name + "' class='img-bg'><div class='upload__img-close'></div></div></div>";

                        }
                    imgWrap.append(html);
                    iterator++;
                    }
                    reader.readAsDataURL(f);
                }
                }
            });
            });
        });

        $('body').on('click', ".upload__img-close", function (e) {
            var file = $(this).parent().data("file");
            for (var i = 0; i < imgArray.length; i++) {
            if (imgArray[i].name === file) {
                imgArray.splice(i, 1);
                break;
            }
            }
            $(this).parent().parent().remove();
            $(this).parent().children().remove();
            
        });
        }
});
<style>
   
.upload__box {
     padding-top: 10px;
}
 .upload__inputfile {
     width: 0.1px;
     height: 0.1px;
     opacity: 0;
     overflow: hidden;
     position: absolute;
     z-index: -1;
}
 .upload__btn {
     display: inline-block;
     font-weight: 600;
     color: #fff;
     text-align: center;
     min-width: 116px;
     padding: 5px;
     transition: all 0.3s ease;
     cursor: pointer;
     border: 2px solid;
     background-color: #4045ba;
     border-color: #4045ba;
     border-radius: 10px;
     line-height: 26px;
     font-size: 14px;
}
 .upload__btn:hover {
     background-color: unset;
     color: #4045ba;
     transition: all 0.3s ease;
}
 .upload__btn-box {
     margin-bottom:0px;
}
 .upload__img-wrap {
     display: flex;
     flex-wrap: wrap;
     margin: 0 -10px;
}
 .upload__img-box {
     width: 200px;
     padding: 0 10px;
     margin-bottom: 0px;
}
 .upload__img-close {
     width: 24px;
     height: 24px;
     border-radius: 50%;
     background-color: rgba(0, 0, 0, 0.5);
     position: absolute;
     top: 10px;
     right: 10px;
     text-align: center;
     line-height: 24px;
     z-index: 1;
     cursor: pointer;
}
 .upload__img-close:after {
     content: '\2716';
     font-size: 14px;
     color: white;
}
 .img-bg {
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     position: relative;
     padding-bottom: 100%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
<div class="col-lg-12 mt-4">
                            <label for="file">Upload Document (Multiple Document)</label>
                            <div class="upload__box">
                                <div class="upload__btn-box">
                                  <label class="upload__btn">
                                   Upload file
                          
                                    <input type="file" multiple="" id="files" name="files[]" data-max_length="20" class="upload__inputfile" accept="image/jpeg, image/jpg, image/png, application/pdf">
                                  </label>
                                </div>
                                <div class="upload__img-wrap"></div>
                              </div>
                          </div>
</form>
</html>
赞(0）分享  回复(0）举报  2023-06-20
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com