Question

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

我已经看到一些插件执行此操作但完全无法解决我的问题我想知道如何执行0，因为将所选的每个图像分开并一次发送一个到服务器。

Answer 1

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

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'],"###"));

Ajax一次上传一个文件？

1 个答案: