Question

I am trying to perform an exercise in which I enter some images one by one in the first input file and I would like them to be saved automatically in the multiple input file to send the latter by post to an .php and upload them to the server but not how to do it. I think it can be done because the input file multiple is a fileList and in the input file it is just a file but I do not know how to insert it automatically.

<!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>

How to insert file in fileList?

0 个答案: