javascript - 如何在 jQuery 中上传图像后在输入字段中显示图像文件名

Question

在这里，我可以上传文件并在 info 类中显示上传的文件名。但是，我试图在下面的输入字段 image_main_file_name 中显示上传的图像文件名，但我失败了。帮我解决同样的问题。 我可以在信息 div 类中显示上传的图像文件名，如下所示，

$(input).closest('dd').find('.info').html(fileName);

帮助我在下面的输入字段 image_main_file_name 中显示上传的图像文件名，

function setImage(input) {
  let $imgBox = $(input).closest('dd').find('.img_box');
  var reader = new FileReader();
  reader.onload = function(e) {
    $imgBox.html($('<img>').attr('src', e.target.result));
    let fileName = input.files[0].name;
    $(input).closest('dd').find(".folder_box img").attr('src', e.target.result)
    $(input).closest('dd').find(".folder_box img").attr('data-file', fileName)
    $(input).closest('dd').find('.info').html(fileName);
    $("#image_main_file_name").val(fileName);
  };
  reader.readAsDataURL(input.files[0]);
}

<label class="folder_box inb">
    <input type="file" name="background_image_local" class="image_upload"> <img src="" class="hidden">
    <p class="folder_img"></p>
</label>
<div class="info">
  <input type="text" name="image_main_file_name" id="image_main_file_name" value="display_img_file_name_here">
</div>
<label class="folder_box inb">
    <input type="file" name="background_image_local" class="image_upload"> <img src="" class="hidden">
    <p class="folder_img"></p>
</label>
<div class="info">
  <input type="text" name="image_main_file_name" id="image_main_file_name" value="display_img_file_name_here">
</div>

Answer 1

您的代码没问题。您只是没有将 change 监听器附加到调用 setImage 的文件输入。

function setImage(input) {
    let $imgBox = $(input).closest('dd').find('.img_box');
    var reader = new FileReader();
    reader.onload = function (e) {
        $imgBox.html( $('<img>').attr('src', e.target.result) );
        let fileName = input.files[0].name;
        $(input).closest('dd').find(".folder_box img").attr('src',e.target.result)
        $(input).closest('dd').find(".folder_box img").attr('data-file',fileName)
        $(input).closest('dd').find('.info').html(fileName);
        $("#image_main_file_name").val(fileName);
    };
    reader.readAsDataURL(input.files[0]);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="folder_box inb">
    <input type="file" name="background_image_local" class="image_upload" onchange="setImage(this)"> <img src="" class="hidden">
    <p class="folder_img"></p>
</label>
<div class="info">
    <input type="text" name="image_main_file_name" id="image_main_file_name" value="display_img_file_name_here"> 
</div>

对于多个:

function setImage(input) {
  let $imgBox = $(input).closest('dd').find('.img_box');
  var reader = new FileReader();
  reader.onload = function(e) {
    $imgBox.html($('<img>').attr('src', e.target.result));
    let fileName = input.files[0].name;
    $(input).closest('dd').find(".folder_box img").attr('src', e.target.result)
    $(input).closest('dd').find(".folder_box img").attr('data-file', fileName)
    $(input).closest('dd').find('.info').html(fileName);
    $(input).parent().next().find('#image_main_file_name').first().val(fileName);
  };
  reader.readAsDataURL(input.files[0]);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="folder_box inb">
    <input type="file" name="background_image_local" class="image_upload" onchange="setImage(this)"> <img src="" class="hidden">
    <p class="folder_img"></p>
</label>
<div class="info">
  <input type="text" name="image_main_file_name" id="image_main_file_name" value="display_img_file_name_here">
</div>
<label class="folder_box inb">
    <input type="file" name="background_image_local" class="image_upload" onchange="setImage(this)"> <img src="" class="hidden">
    <p class="folder_img"></p>
</label>
<div class="info">
  <input type="text" name="image_main_file_name" id="image_main_file_name" value="display_img_file_name_here">
</div>