多个文件输入html不起作用
Posted
技术标签:
【中文标题】多个文件输入html不起作用【英文标题】:multiple file input html not working 【发布时间】:2016-11-27 23:48:47 【问题描述】:我有以下用于多文件输入的代码
<form action="" enctype = "multipart/form-data" method="post" name="login">
<input type = "file" name = "photo[]" id = "files" multiple onchange = "handleFileSelect(this.files)"/><br/>
<div id="selectedFiles"></div>
<input type="submit" value="Sign In">
</form>
javascript等效函数是。
selDiv = document.querySelector("#selectedFiles");
function handleFileSelect(e)
if(!this.files) return;
selDiv.innerhtml = "";
var files = e;
for(var i=0; i<files.length; i++)
var f = files[i];
selDiv.innerHTML += f.name + "<br/>";
我得到的是上传第二个文件。 FileList 被覆盖,而不是有 2 个文件,FileList 中存在第二个文件。这里 FileList 是由 this.files 传递的。
同样,在传递给服务器时,只有第二个图像被传递。我已经通过谷歌搜索但找不到答案。如果有人可以提供帮助,我将不胜感激。
【问题讨论】:
其实就是这样。当使用属性为multiple
的 HTML 文件元素时,用户必须使用 shift 或 control click 一次选择他们想要上传的所有文件。如果您选择一个,然后关闭对话框,然后返回并选择另一个,它将替换之前选择的文件。
啊谢谢你的信息。但是有没有办法让用户多次上传文件。
【参考方案1】:
...多个文件输入... FileList 被覆盖...
实际上这就是带有multiple
属性的HTML file 输入的工作原理——用户必须使用shift 或control click 来一次选择他们想要上传的所有文件。如果用户第二次操作相同的文件输入上传过程,则之前选择的任何内容都将被丢弃,并且只有最近的选择保留在 FileList 中。
但是有没有办法让用户多次上传文件。
要让您的网站用户多次使用 HTML 文件输入元素并保留所有先前的选择,您需要将每次使用文件元素时收到的文件(base64 数据)写入隐藏的表单元素。
例如:
<form action="process.php" method="post" name="uploadform" enctype="multipart/form-data">
// other form elements if needed
<input type="submit">
</form>
<!-- outside the form, you don't want to upload this one -->
<input type="file" id="upfiles" name="upfiles">
<script>
document.getElementById('upfiles').addEventListener('change', handle_files, false);
function handle_files(evt)
var ff = document.forms['uploadform'];
var files = evt.target.files;
for ( var i = 0, file; file = files[i]; i++ )
var reader = new FileReader();
reader.onload = (function(file)
return function (ufile)
var upp = document.createElement('input');
upp['type'] = 'hidden';
upp['name'] = +new Date + '_upfile_' + file.name.replace(/(\[|\]|&|~|!|\(|\)|#|\|\/)/ig, '');
upp.value = ufile.target.result;
ff.appendChild(upp);
(file));
reader.readAsDataURL(file);
</script>
接下来,您需要编写一个脚本在服务器上运行以处理隐藏的 base64 字段。如果使用 PHP,您可以:
<?php
$path = 'path/to/file/directory/';
// this is either:
// - the absolute path, which is from server root
// to the files directory, or
// - the relative path, which is from the directory
// the PHP script is in to the files directory
foreach ( $_POST as $key => $value ) // loop over posted form vars
if ( strpos($key, '_upfile_') ) // find the file upload vars
$value = str_replace(' ', '+', $value); // url encode
file_put_contents($path.$key, base64_decode($value));
// convert data to file in files directory with upload name ($key)
?>
【讨论】:
【参考方案2】:我遇到了同样的问题。感谢您的提问和回答。我设法通过添加到 DOM 输入类型文件并将点击委托给分离的元素来添加几个文件:
<form method="POST" enctype="multipart/form-data" action="/echo/html">
<button class="add">
Add File
</button>
<ul class="list">
</ul>
<button>
Send Form
</button>
</form>
使用javascript:
$('form button.add').click(function(e)
e.preventDefault();
var nb_attachments = $('form input').length;
var $input = $('<input type="file" name=attachment-' + nb_attachments + '>');
$input.on('change', function(evt)
var f = evt.target.files[0];
$('form').append($(this));
$('ul.list').append('<li class="item">'+f.name+'('+f.size+')</li>');
);
$input.hide();
$input.trigger('click');
);
它适用于 Edge、Chrome 50 和 firefox 45,但我不知道与旧版本或其他浏览器的兼容性。
请参阅this fiddle。
【讨论】:
以上是关于多个文件输入html不起作用的主要内容,如果未能解决你的问题,请参考以下文章