6

我了解多文件上传的 HTML/PHP 方面，但我想我所追求的是一个 Javascript 解决方案，它将文件数组 pre-post 分离并单独将文件发送到单独的 PHP 程序以接收上传和成功/在继续之前失败反馈。（即：文件[0] -> POST -> 成功 -> 文件 [1] -> POST -> 成功 -> 等...）

这是我现在用于单个文件的内容 -

    function upload(file){
        var data = new FormData();
        data.append("file", document.getElementById(file).files[0]);
        var xmlHTTP = new XMLHttpRequest();
        xmlHTTP.open("POST", "uploader.php");
        xmlHTTP.send(data);
    }

我意识到最简单的方法是创建多个文件字段，但是我想做的是使用<input type="file" multiple>HTML5 一次批量选择文件列表。如果我只能用 Javascript 分隔文件，那么循环上述脚本并onreadystatechange每次报告成功/失败将是一件简单的事情。

有任何想法吗？

编辑：
原谅我的狭隘视野，这非常简单！这是我的完整代码，以防它帮助别人。 

<html>
<head>
    <script language="Javascript">
    function multiupload(file){
    count = 0;
    maxcount = document.getElementById(file).files.length;
    alert(maxcount);
    upload(file,count);
    }

    function upload(file,count){
        var data = new FormData();
        data.append("file", document.getElementById(file).files[count]);
        var xmlHTTP = new XMLHttpRequest();
        xmlHTTP.open("POST", "uploader.php");
        xmlHTTP.onreadystatechange=function(){
            if (xmlHTTP.readyState == 4 && xmlHTTP.status == 200){
            count = count+1;
            if(count<maxcount){
            upload(file,count);
            }
            }
        }
        xmlHTTP.send(data);
    }
    </script>
</head>
<body>
    <div id="result"></div>
    <form method="post" action="">
        <input type="file" name="file" id="file" multiple>
        <input type="button" name="submit" value="Upload" onclick="multiupload('file');void(0);">
    </form>
</body>
</html>
4

2 回答 2

3

要查看有多少文件，请使用document.getElementById(file).files.length. 一旦你循环了很多次，你就上传了所有的文件！这是我的示例：

<html>
<head>
<script language="Javascript">
function multiupload(file){
count = 0;
alert(document.getElementById(file).files.length);

}

</script>
</head>
<body>
    <form method="post" action="" enctype="multipart/form-data">
    <input type="file" name="file" id="file" multiple>
    <input type="button" name="submit" value="Upload" onclick="multiupload('file');void(0);">
</form>
</body>
</html>

（来源：https ://developer.mozilla.org/en-US/docs/DOM/FileList ）

于 2013-02-07T18:12:10.913 回答
3

试试这个。您可以开始在成功处理程序中上传下一个文件。这样你就可以做 files[0] -> POST -> Success -> files 1 -> POST -> Success

于 2013-02-07T17:41:56.730 回答