我正在寻找一种简单的方法让用户选择要上传的文件列表,并在他决定上传文件之前将其显示在屏幕上。
这是我一直在尝试的那种逻辑:
function printFiles(){
var inp = document.getElementById('selected');
for (var i = 0; i < inp.files.length; ++i) {
var img = new Image();
var name = inp.files.item(i).name;
img.src = name;
document.body.appendChild(img);
}
&#13;
<head>
<title>Upload new File</title>
</head>
<body>
<h1>Upload new File</h1>
<form method=post enctype=multipart/form-data>
<p>
<input type=file name=file id=selected onclick=printFiles() multiple>
<input type=submit value=Upload>
</p>
</form>
</body>
&#13;
这不起作用,当我将变量inp打印到控制台时,它显示为null,因为它在选中之前为空。 有没有办法将文件名传递给函数,只有在用户点击“选择文件”后才能在页面上显示文件名。然后打开&#39;?
答案 0 :(得分:0)
你在循环中有一个错误,在inp.files.item你应该使用[i]而不是(i),这是输入标签上选定文件的数组
function printFiles(){
var inp = document.getElementById('selected');
for (var i = 0; i < inp.files.length; ++i) {
var img = new Image();
// var name = inp.files.item(i).name;
var name = inp.files.item[i].name;
img.src = name;
document.body.appendChild(img);
}
<head>
<title>Upload new File</title>
</head>
<body>
<h1>Upload new File</h1>
<form method=post enctype=multipart/form-data>
<p>
<input type=file name=file id=selected onclick=printFiles() multiple>
<input type=submit value=Upload>
</p>
</form>
</body>
答案 1 :(得分:0)
以下是使用javascript FileReader Api
进行操作的示例function printFiles(){
var inp = document.getElementById('selected');
for (var i = 0; i < inp.files.length; ++i) {
displayImage(inp.files[i]);
}
}
function displayImage(file){
var reader = new FileReader();
reader.readAsDataURL(file);
reader.addEventListener('load', function(){
var img = new Image();
img.src = reader.result;
document.body.appendChild(img);
});
}