如何在fileList中插入文件?

问题描述 投票:0回答:1

我正在尝试执行一个练习,在该练习中,我在第一个输入文件中一个接一个地输入一些图像,我希望将它们自动保存在多个输入文件中,然后通过邮寄到.php并将其上传。到服务器,但没有怎么做。我认为可以这样做,因为输入文件的倍数是一个fileList,而在输入文件中它只是一个文件,但我不知道如何自动将其插入。

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<form action="preuba.php" method="POST">
  <input  name="file-input" id="file-input" type="file" />
  <output id="preview"></output>
  <br><br>

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<input type="submit" name="send">
</form>
<script>
 
function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
        output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
            f.size, ' bytes, last modified: ',
            f.lastModifiedDate.toLocaleDateString(), '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

document.getElementById("file-input").onchange = function(e) {
    let reader = new FileReader();
    reader.onload = function() {
        let preview = document.getElementById('list'),image = document.createElement('img');
        image.src = reader.result;
        preview.innerHTML += '';
        preview.append(image);
    };

    reader.readAsDataURL(e.target.files[0]);
}
</script>
</body>
</html>
javascript jquery backend
1个回答
0
投票

我从其他答案中发现,出于安全考虑,浏览器不允许这样做,我也正在寻找解决方案Dx

© www.soinside.com 2019 - 2024. All rights reserved.