显示所选图像的简单方法

时间:2018-06-18 16:39:15

标签: javascript html

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

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



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;
&#13;
&#13;

这不起作用,当我将变量inp打印到控制台时,它显示为null,因为它在选中之前为空。 有没有办法将文件名传递给函数,只有在用户点击“选择文件”后才能在页面上显示文件名。然后打开&#39;?

2 个答案:

答案 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);
    });
}