Ajax一次上传一个文件？ [关闭]

Question

所以我有一个带有一个输入文件字段的上传表单来将图像上传到我的服务器，但是我一次只需要发送一张图像，例如，用户在我想要的同一个文件输入字段中选择 50 张图像一次发送一个图像，对于每个图像，Ajax 都会向服务器发出一个新请求。给明白了吗？有人知道该怎么做吗？

我已经看到一些插件可以做到这一点，但不能完全解决我的问题我想知道如何将 0 分隔为每个选择的图像并一次发送一个到服务器。

Answer 1

其实默认<input type="file">控件允许一次选择一个文件，所以一次只能上传一个文件。但是，我最近满足了允许用户选择一个文件夹并上传该文件夹中的文件（一个一个）的要求，我找到了一个解决方案（抱歉，我没有保留解决方案的 url）。这是我的工作：

HTML：

<div>
    <input type="file" id="files" name="files[]" multiple="" webkitdirectory="">
    <div>
        <input type="submit" value="Upload" class="btn btn-warning pull-left" onclick="uploadFiles()">
        <small class="pull-left result_text">Choose a file folder which only contains image files.</small>
        <div class="clearfix"></div>
    </div>
    <div id="output"></div>
</div>    

Javascript：

<script type="text/javascript">
var File_Lists;
window.onload = function(){
    var output = document.getElementById('output');

    // Detect when the value of the files input changes.
    document.getElementById('files').onchange = function(e) {
        // Retrieve the file list from the input element
        File_Lists=e.target.files;
        // Outputs file names to div id "output"
        output.innerText = "";
        var MAX_ROWS=5;
        var filenum=File_Lists.length;
        for (i=0; i<Math.min(filenum, MAX_ROWS); i++){
            output.innerText  = output.innerText + e.target.files[i].webkitRelativePath+"\n";
        }
        if(filenum>MAX_ROWS){
            output.innerText = output.innerText + " and other "+(filenum-MAX_ROWS)+" files...";
        }
    }
}


function uploadFiles(){
    var files=File_Lists;
    // Create a new HTTP requests, Form data item (data we will send to the server) and an empty string for the file paths.
    xhr = new XMLHttpRequest();
    data = new FormData();
    paths = "";

    // Set how to handle the response text from the server
    xhr.onreadystatechange = function(ev){
        //handle with server-side responses
    };

    // Loop through the file list
    for (var i in files){
        // Append the current file path to the paths variable (delimited by tripple hash signs - ###)
        paths += files[i].webkitRelativePath+"###";
        // Append current file to our FormData with the index of i
        data.append(i, files[i]);
    };
    // Append the paths variable to our FormData to be sent to the server
    // Currently, As far as I know, HTTP requests do not natively carry the path data
    // So we must add it to the request manually.
    data.append('paths', paths);

    // Open and send HHTP requests to upload.php
    xhr.open('POST', "process_upload_photo.php", true);
    xhr.send(this.data);
}

我在服务器端使用 PHP。您可以使用以下代码获取文件路径，并在上传单个文件时执行类似的操作。

$paths = explode("###",rtrim($_POST['paths'],"###"));