JS - 使用 FileReader 對象時只允許上傳一個文件

Question

在我的項目中，我有一些 JS 代碼，允許用戶為他們的個人資料圖片選擇一個圖像，然后該圖像顯示在瀏覽器中。

我只希望用戶能夠為他們的個人資料圖片選擇單個圖像，並且該單個圖像應該是用戶選擇后瀏覽器中顯示的唯一圖像。

然而目前用戶可以選擇他們的個人資料PIC和這些多個圖片都顯示在對方旁邊的瀏覽器多個圖像。

下面的代碼使用FileReader對象，當用戶從輸入字段中選擇圖像時，它允許在瀏覽器中顯示圖像。

這是我的JS代碼：

 // profilePic is the id of my file field

  // CORRECTION HERE
    var img = document.createElement("img");

    img.classList.add("fixedImage");
    $("#profilePic").change(function(e) {
        for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

            var file = e.originalEvent.srcElement.files[i];



            var reader = new FileReader();
            reader.onloadend = function() {
                 img.src = reader.result;
            }
            reader.readAsDataURL(file);
            $("#profilePic").after(img);
        }
    });

如何使用戶只能選擇一個文件，因為當前當用戶選擇一個圖像時，它會顯示在瀏覽器中，但是當從同一文件輸入中選擇另一張圖像時，它也會顯示在瀏覽器的旁邊選擇的第一個圖像。 有誰知道如何解決這個問題？ 謝謝。

更新代碼：

這段代碼不起作用，也沒有任何變化。 請注意，我不相信 #profilePic 有src屬性，因為它是file輸入，而不是圖像元素。

function readURL(input)
{
    if(input.files && input.files[0]){
        var reader = new FileReader();

        reader.onload = function(e){
            $("#profilePic").attr('src',e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}


$("#profilePic").change(function(e) {
    readURL(this);
    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

        var file = e.originalEvent.srcElement.files[i];

        var img = document.createElement("img");

        img.classList.add("fixedImage");

        var reader = new FileReader();
        reader.onloadend = function() {
             img.src = reader.result;
        }
        reader.readAsDataURL(file);
        $("#profilePic").after(img);
    }
});

更新 - HTML 代碼：

     <form class="completeSignupForm" enctype="multipart/form-data" method="POST" action="/">

                <input type="file" name="profile_pic" id="profilePic" accept="image/*">
                <br>

                <input type="text" name="bio" placeholder="Add a bio:" id="bio" maxlength="140">
                <br>

            <label for="profilePic"><u></u>Click here to choose a profile photo</u></label>
            <button type="submit" class="btn btn-primary doneBtn">Done</button>
     </form>

Answer 1

嘗試這個

HTML

<div id="preview"></div>
<img src="dummyavatar.png" id="img"/>

JS

function readURL(input)
{
    if(input.files && input.files[0]){
        var reader = new FileReader();

        reader.onload = function(e){
            $("#preview").attr('src',e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#img").change(function(){
    readURL(this);
});

使用你的代碼，我在這里更正了

  <script>
    var img = document.createElement("img");

    img.classList.add("fixedImage");
    $("#profilePic").change(function(e) {


            var file = e.originalEvent.srcElement.files[0];



            var reader = new FileReader();
            reader.onloadend = function() {
                 img.src = reader.result;
            }
            reader.readAsDataURL(file);
            $("#profilePic").after(img);

    });
</script>