admin管理员组

文章数量:1356742

I understand the HTML/PHP side of a multi-file upload, but I suppose what I'm after is a Javascript solution that separates the files array pre-post and individually sends the files to a separate PHP program to receive upload and success/fail feedback before continuing. (ie: files[0] -> POST -> Success -> files[1] -> POST -> Success ->etc...)

Here is what I use now for a single file -

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

I realize that the easy way out would be to create multiple file fields, however what I'm trying to do is use <input type="file" multiple> from HTML5 to mass-select a list of files at a time. If I could only separate the files with Javascript, then it would be a simple matter of looping through the above script with an onreadystatechange reporting the success/fail each time.

Any ideas?

EDIT:
Forgive my tunnel vision, that was extremely simple! Here's my full code in case it helps someone else out. 

<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>

I understand the HTML/PHP side of a multi-file upload, but I suppose what I'm after is a Javascript solution that separates the files array pre-post and individually sends the files to a separate PHP program to receive upload and success/fail feedback before continuing. (ie: files[0] -> POST -> Success -> files[1] -> POST -> Success ->etc...)

Here is what I use now for a single file -

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

I realize that the easy way out would be to create multiple file fields, however what I'm trying to do is use <input type="file" multiple> from HTML5 to mass-select a list of files at a time. If I could only separate the files with Javascript, then it would be a simple matter of looping through the above script with an onreadystatechange reporting the success/fail each time.

Any ideas?

EDIT:
Forgive my tunnel vision, that was extremely simple! Here's my full code in case it helps someone else out. 

<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>
  • javascript
  • html
  • upload
Share Improve this question edited Feb 7, 2013 at 18:11 user1145643 asked Feb 7, 2013 at 17:35 user1145643user1145643 8985 gold badges15 silver badges28 bronze badges 1
  • You can get rid of the maxcount logic by just increasing your count until files[count] returns null. – siannopollo Commented Oct 11, 2013 at 20:40
Add a ment  | 

2 Answers 2

Reset to default 3

Try this. You can start uploading the next file in the success handler. That way you can do files[0] -> POST -> Success -> files1 -> POST -> Success

To see how many files there are, use document.getElementById(file).files.length. Once you've looped that many times, you have uploaded all the files! Here's my sample:

<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>

(Source: https://developer.mozilla/en-US/docs/DOM/FileList)

本文标签： htmlSplit multifile post with Javascript before uploadStack Overflow

版权声明：本文标题：html - Split multi-file post with Javascript before upload - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744006804a2574849.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。