Question

我正在寻找一种简单的方法让用户选择要上传的文件列表，并在他决定上传文件之前将其显示在屏幕上。

这是我一直在尝试的那种逻辑：

＆＃13;

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

Answer 1

你在循环中有一个错误，在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>

Answer 2

以下是使用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);
    });
}

显示所选图像的简单方法

2 个答案: