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>