Jquery 读取多文件输入类型将其销毁

我正在编写一个jQuery脚本，一次上传几个图像，但在上传之前要调整它们的大小。在调整上传大小方面，一切正常

尽管如此，我对脚本中两个相互冲突的部分有困难

首先是html

         <form method="post" action="{{url('filemanager/manage')}}" enctype="multipart/form-data">
            {{csrf_field()}}
              <div class="input-group " >
                <label  id='fmg-multiple-input-label'>
                <input id='fmg-multiple-input' type="file" name="fmg-multiple-input[]" class="myfrm form-control " multiple="multiple">
              </div>
              <button type="submit" class="btn btn-danger btn-upload" style="margin-top:10px">Submit</button>
        </form>  

返回一个表示输入为空的错误

---

第一个块似乎使输入无效。有什么方法可以防止这种行为吗？

您的

代码的问题在于，您没有在输入之前关闭
标签
，因此当
.html
方法对第一个块起作用时，它会替换标签的所有
html
，并替换下一个
同级
，因为没有关闭
标签

因此，运行输入时的第二个块根本不存在于该页面上，因为它已被
.html
方法删除。因此，在
console.log

此外，不应使用
标签
，而应使用
span
显示您在输入中选择的所有文件名

我已经安装了
代码
，它应该可以正常工作

现场工作示例：
//第一块
$（“#fmg多输入”）。更改（功能（e）{
//在标签中写入选定的文件名
var文件=[]；
对于（var i=0；i<$（this）[0].files.length；i++）{
file=$（this）[0]。文件[i]；
files.push（file.name）；
//filemanager.resizeAndUpload（文件）；
}
$（'#fmg多输入标签'）.html（files.join（'，'）；
});
//第二街区
if（window.File&&window.FileReader&&window.FileList&&window.Blob）{
$（文档）.on（'click'，'btn upload'，函数（e）{
e、 预防默认值（）；
$（“fmg上传进度”）.show（）.empty（）；
$（'fmg#u file_form'）。淡出（10）；
//var input=$（“#fmg multiple input”）.get（0）；//jQuery选择器不返回DOM元素，而是返回jQuery对象
var input=document.getElementById（'fmg-multiple-input'）；//等效返回DOM元素
console.log（input.files）；
对于（var i=0；i




提交
您的
代码的问题在于，您没有在输入之前关闭
标签
，因此当
.html
方法在第一个块工作时，它会替换标签的所有
html
，以及下一个
同级
，因为没有关闭
标签

因此，运行输入时的第二个块根本不存在于该页面上，因为它已被
.html
方法删除。因此，在
console.log

此外，不应使用
标签
，而应使用
span
显示您在输入中选择的所有文件名

我已经安装了
代码
，它应该可以正常工作

现场工作示例：
//第一块
$（“#fmg多输入”）。更改（功能（e）{
//在标签中写入选定的文件名
var文件=[]；
对于（var i=0；i<$（this）[0].files.length；i++）{
file=$（this）[0]。文件[i]；
files.push（file.name）；
//filemanager.resizeAndUpload（文件）；
}
$（'#fmg多输入标签'）.html（files.join（'，'）；
});
//第二街区
if（window.File&&window.FileReader&&window.FileList&&window.Blob）{
$（文档）.on（'click'，'btn upload'，函数（e）{
e、 预防默认值（）；
$（“fmg上传进度”）.show（）.empty（）；
$（'fmg#u file_form'）。淡出（10）；
//var input=$（“#fmg multiple input”）.get（0）；//jQuery选择器不返回DOM元素，而是返回jQuery对象
var input=document.getElementById（'fmg-multiple-input'）；//等效返回DOM元素
console.log（input.files）；
对于（var i=0；i




提交

//FIST BLOCK
$('#fmg-multiple-input').change(function (e) {
    //write the selected file names in the label
    var files = [];
    for (var i = 0; i < $(this)[0].files.length; i++) {
        file = $(this)[0].files[i];
        files.push(file.name);
        //filemanager.resizeAndUpload(file);
    }
    $('#fmg-multiple-input-label').html(files.join(', '));
});

//SECOND BLOCK
if (window.File && window.FileReader && window.FileList && window.Blob) {
    $(document).on('click', '.btn-upload', function (e) {
        e.preventDefault();
        $("#fmg_upload_progress").show().empty();
        $('#fmg_file_form').fadeOut(10);
        //var input = $("#fmg-multiple-input").get(0);//a jQuery selector doesn't return a DOM element but a jQuery object
        var input = document.getElementById('fmg-multiple-input');//equivalent return the DOM element
        console.log(input);
        for (var i = 0; i < input.files.length; i++) {
            filemanager.resizeAndUpload(input.files[i]);
        }
    });
} else {
    alert('The File APIs are not fully supported in this browser.');
}

console.log(input)