Question

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

以下是我现在使用的单个文件 -

    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);
    }

我意识到简单的方法是创建多个文件字段，但我要做的是使用HTML5中的<input type="file" multiple>一次批量选择文件列表。如果我只能用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>

Answer 1

试试this。您可以开始在成功处理程序中上传下一个文件。那样你就可以做文件[0] - ＆gt; POST - ＆gt;成功 - ＆gt;文件1 - ＆gt; POST - ＆gt;成功

Answer 2

要查看有多少文件，请使用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）

在上传之前使用Javascript拆分多文件帖子

2 个答案: