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