预览 2 个或更多多个输入文件的图像

Question

我有 2 个图像字段，我想在提交表单之前显示预览。在下面的表格中，它通过显示多个图像来工作，但我希望每个输入分别显示其图像：

输入1 输入1张图片

输入 2 输入2张图片

我该怎么做？

<input id="fileupload" type="file" name="img_slide" multiple>
                  <div id="dvPreview">

<input id="fileupload2" type="file" name="img_capa" multiple>
              <div id="dvPreview2">

<script>
          window.onload = function () {

            var fileUpload = document.getElementById("fileupload");

        fileUpload.onchange = function () {
          if (typeof (FileReader) != "undefined") {
        var dvPreview = document.getElementById("dvPreview");
        dvPreview.innerHTML = "";
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
        for (var i = 0; i < fileUpload.files.length; i++) {
            var file = fileUpload.files[i];
            if (regex.test(file.name.toLowerCase())) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    var img = document.createElement("IMG");

                    img.height = "100";
                    img.width = "100";
                    img.src = e.target.result;
                    dvPreview.appendChild(img);
                    dvPreview.appendChild(textbox);
                }
                reader.readAsDataURL(file);
            } else {
                alert(file.name + " is not a valid image file.");
                dvPreview.innerHTML = "";
                return false;
            }
        }
    } else {
        alert("This browser does not support HTML5 FileReader.");
    }
}

};

Answer 1

我试过这个并为我工作。代码：

<pre>Please enter your files:<input class="fileupload" type="file" name="img_slide" multiple>
              <div id="dvPreview"></div></pre>

<input class="fileupload" type="file" name="img_capa" multiple>
          <div id="dvPreview2"></div>



window.onload = function () {

    var fileUpload = document.getElementsByClassName("fileupload");

    for(var i = 0; i < fileUpload.length; i++){
    fileUpload[i].onchange = showImgOnChange;
    }




}


var showImgOnChange = function () {

    if (typeof (FileReader) != "undefined") {
        var dvPreview = this.nextElementSibling;

        dvPreview.innerHTML = "";
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;

            for (var i = 0; i < this.files.length; i++) {
            var file = this.files[i];
            if (regex.test(file.name.toLowerCase())) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var img = document.createElement("IMG");

                img.height = "100";
                img.width = "100";
                img.src = e.target.result;
                dvPreview.appendChild(img);
                dvPreview.appendChild(textbox);
            }
            reader.readAsDataURL(file);
            } else {
            alert(file.name + " is not a valid image file.");
            dvPreview.innerHTML = "";
            return false;
            }

                    }
        } else {
        alert("This browser does not support HTML5 FileReader.");
        }
}

现在我将解释该代码：

我为该类型的每个输入使用一个类。使用该类，我得到所有元素输入，并在每个输入中分配 onchange 函数 showImgOnChange （只是将更改时相同的函数关联到多个元素的技巧）。之后，在函数中，概括一下：

var dvPreview = document.getElementById("dvPreview");

我用过这个：

var dvPreview = this.nextElementSibling;

这会将下一个元素带到 DOM 中的 this 元素。否则，您可以将一个类与 div 相关联，这样您就可以显示图像并搜索具有该类的下一个元素。

希望对你有帮助