Question

我尝试使用FormData()通过提交来保存服务器来发送多张照片。但是我只从服务器脚本中获得了对象。我怎样才能将照片名称，照片tmp和大小等详细信息发送到服务器脚本或如何从服务器脚本中读取此目标文件？

这是我的代码

<div class="container">
    <form action="" method="POST" enctype="multipart/form-data" id="fileinfo">
        <input type="file" name="images[]" id="images"  multiple />
        <hr>
        <div id="image-to-upload">

        </div>
        <input type="submit" />
     </form>
</div>

脚本

var fileCollection = new Array();
$("#images").on('change', function(e) {
    var files = e.target.files;
    $.each(files, function(i, file) {
        fileCollection.push(file);
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e) {
            var template = '<div>' + '<img src="' + e.target.result + '">' + '<input type="text" name="title" >' + '<button class="btn btn-sm btn-info upload">upload</button>' + '<a href="#" class="btn btn-sm btn-danger remove">Remove</a>' + '</div><br />';
            $("#image-to-upload").append(template);
        }
    });
});
$('form').on('submit', function(e) {
    e.preventDefault();
    var formdata = new FormData();
    formdata.append('image', fileCollection);
    var request = new XMLHttpRequest();
    request.open('post', 'photo', true);
    request.send(formdata);
});

Answer 1

// The Javascript
var fileInput = document.getElementById('the-file');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);

请试试这个

FormData（）仅发送对象类型的多个文件

1 个答案: