Question

我有以下html代码，允许您选择多个文件：

<input id="uploadFiles" type="file" name="myfiles" multiple="multiple" onchange="selectMulitableFiles(this)">

这是onchange功能：

function selectMulitableFiles(e) {
    $.each(e.files, function () {
        var tempelete = '<tr><td><img onload="loadImage(this);" alt="" src=' + this.name + ' style="border-style: solid; border-width: 1px; width: 60px; height: 60px;" /></td></tr>';
        $("#tblImages tbody").append(tempelete);
    });
}

我想要实现的是将所有这些选定的图像查看到我生成的图像，然后在控件内写入，但e.value将只给出假路径。我正在尝试做什么或不做？

Answer 1

这里是你的解决方案你需要使用FileReader()来提供图像src ..

function selectMulitableFiles(e) {
    $.each(e.files, function () {
      var reader = new FileReader();
      reader.onload = function (e) {
      var tempelete = '<tr><td><img onload="loadImage(this);" alt="" src=' + e.target.result + ' style="border-style: solid; border-width: 1px; width: 60px; height: 60px;" /></td></tr>';
        $("#tblImages tbody").append(tempelete);
      }

      reader.readAsDataURL(e.files[0]);

    });
}

JSBIN Example

HTML输入 - 选择多个图像并在页面中查看它们？

1 个答案: