如何用javascript修改元素的文件列表？

[灼眼的超哥]

目前要实现多文件上传功能，但服务器端只能处理单文件上传，于是想将文件列表中的文件按顺序单个的上传。

<input type='file' multiple />元素用于获取用户选择的多个要上传的文件，我现在的做法是用javascript取出这个元素记录的文件列表，然后从文件列表中取出一个文件信息，保存至临时<inpu type='file't/>元素中（修改该元素的files记录），并提交表单，每当表单提交完成，就取下一个文件，重复上述操作。

但实验结果让人感觉服务器端收到的文件内容是空的，貌似<input type='file' />元素中记录的文件信息需要用户自己点击选择文件才行，用javascript修改没用。

据说是为了保护用户隐私，javascript不能自己指定要上传的文件，那请问，还有没有其它方法？
​
暂时不考虑修改服务端程序让它支持处理多文件上传。

[Go 旅城通票]

如果不考虑低版本的IE浏览器（IE9-），可以使用html5的FormData对象+ajax来实现上传

<form>
<input type="file" id="fls" multiple  onchange="upload(this)"/>
</form>
<script>
    function xhrupload(fd, url) {
        var xhr = new XMLHttpRequest();
        xhr.open("post", url, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (200 == xhr.status) {
                    alert(xhr.responseText);
                }
                else alert('发生错误\nstatus:' + xhr.status + '\n返回内容:' + xhr.responseText);
            }
        }
        xhr.send(fd);
    }
    function upload(fls) {
        for (var i = 0; i < this.files.length; i++) {
            var fd = new FormData();
            fd.append("file", fls.files[0]);
            xhrupload(fd, '上传地址');
        }
    }
</script>

[灼眼的超哥]

引用 5 楼 showbo 的回复:

如果不考虑低版本的IE浏览器（IE9-），可以使用html5的FormData对象+ajax来实现上传

<form>
<input type="file" id="fls" multiple  onchange="upload(this)"/>
</form>
<script>
    function xhrupload(fd, url) {
        var xhr = new XMLHttpRequest();
        xhr.open("post", url, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (200 == xhr.status) {
                    alert(xhr.responseText);
                }
                else alert('发生错误\nstatus:' + xhr.status + '\n返回内容:' + xhr.responseText);
            }
        }
        xhr.send(fd);
    }
    function upload(fls) {
        for (var i = 0; i < this.files.length; i++) {
            var fd = new FormData();
            fd.append("file", fls.files[0]);
            xhrupload(fd, '上传地址');
        }
    }
</script>

如果用HTML5，那怎么让提交的表单数据和普通的文件上传时提交的一样？

[Go 旅城通票]

给的示例就是单个文件上传的，用的ajax+FormData，说白了FormData相当于一个表单对象，可以通过ajax来发送

[灼眼的超哥]

引用 7 楼 showbo 的回复:

给的示例就是单个文件上传的，用的ajax+FormData，说白了FormData相当于一个表单对象，可以通过ajax来发送

嗯，刚刚调试了几次，可以上传了。

[Go 旅城通票]

有bug。。嘿嘿。。 fd.append("file", fls.files[0]); 应该是 fd.append("file", fls.files[i]); 给写死了。。

[liuxibei1987]

html5多文件上传，你去看看fileapi

[jiangbai333]

办法有 但估计不是一个input完成! 应该是有N个隐藏的! 选的时候根据选的文件数,分别提交! 单个不行!

[巴山虎]

建议用as做，js在文件上传方面支持力太弱。

[xinlan1022]

swfupload

[灼眼的超哥]

引用 2 楼 functionhill 的回复:

建议用as做，js在文件上传方面支持力太弱。

还要去折腾ActionScript啊，蛋疼。