預覽 2 個或多個多輸入文件的圖像

Question

我有 2 個圖像字段，我想在提交表單之前顯示預覽。 在下面的表單中，它通過顯示多個圖像來工作，但我希望每個輸入將其圖像分別顯示為：

Input1 輸入 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，您將顯示圖像並搜索具有該類的下一個元素。

希望能幫助到你