function choosefile () { var fileList = document.getElementById('files').files; var nameStr = ''; for (var i = 0; i < fileList.length; i++) { nameStr += `${i === 0 ? '' : ', '}${fileList[i].name}`; var reader = new FileReader(); reader.readAsText(fileList[i], "UTF-8"); reader.onload = function (e) { var content = e.target.result; console.log(content); const textAreaVal = document.getElementById('text').value; document.getElementById('text').value = textAreaVal + content; } } document.getElementById('name').append(nameStr); }
时间: 2024-04-28 12:22:05 浏览: 13
这是一个 JavaScript 函数,用于处理用户选择的文件。它首先从 HTML 页面中获取 id 为 "files" 的文件输入框中用户选择的文件列表,然后遍历列表中的每个文件,将文件名拼接为一个字符串,并用 FileReader 对象读取文件内容。当每个文件读取完毕时,onload 事件将被触发,此时可以获取文件内容并将其添加到 id 为 "text" 的文本区域中。最后,函数将文件名字符串添加到 id 为 "name" 的元素中。
相关问题
有一段代码,后端java如何接收formData并重新生成为FileList[]数组,用代码如何实现。<script type="text/javascript"> function upload() { var form = document.getElementById('fileUploadForm'); var formData = new FormData(form); var files = []; let filelist = []; for (var i = 0; i < form.elements.fileList.files.length; i++) { files.push(form.elements.fileList.files[i]); } files.forEach(e => { filelist.push(e.webkitRelativePath) }) console.log(filelist); formData.append('fileList', JSON.stringify(filelist));//将filelist数组转换为JSON字符串并添加到formData中 var xhr = new XMLHttpRequest(); xhr.open('POST', 'http://localhost:8080/upfile/upload.jsp', true); xhr.send(formData); } </script>
您好,这是一个技术性问题,可以通过以下代码将 formData 重新生成为 FileList 数组:
var formData = new FormData();
var fileList = formData.getAll('fileList'); // 获取 formData 中的 fileList
var files = []; // 存储生成的 FileList 数组
for (var i = 0; i < fileList.length; i++) {
var file = new File([fileList[i]], fileList[i].name);
files.push(file);
}
请注意,这里的 formData 可以通过表单提交或使用 JavaScript 动态创建。FileList 属性是只读的,因此需要重新构造一个新的 FileList 数组。
document.getElementById().files有什么用
document.getElementById().files是用于获取HTML页面中input元素的文件列表的属性。它返回一个FileList对象,该对象包含了用户选择的文件。FileList对象是一个类数组对象,可以通过索引访问其中的文件。
以下是一个示例代码,演示了如何使用document.getElementById().files属性获取用户选择的文件列表:
```javascript
<input type="file" id="myFileInput">
<script>
var fileInput = document.getElementById('myFileInput');
var fileList = fileInput.files;
for (var i = 0; i < fileList.length; i++) {
var file = fileList[i];
console.log('文件名:', file.name);
console.log('文件大小:', file.size);
console.log('文件类型:', file.type);
}
</script>
```
上述代码中,我们首先通过document.getElementById()方法获取到id为"myFileInput"的input元素,然后使用.files属性获取到用户选择的文件列表。接着,我们使用一个循环遍历文件列表,并打印出每个文件的名称、大小和类型。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)