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

【问题标题】：How to display an image file name in input field after uploading an image in jQuery在jQuery中上传图像后如何在输入字段中显示图像文件名
【发布时间】：2021-09-07 13:30:09
【问题描述】：

在这里，我可以上传文件并在 info 类中显示上传的文件名。但是，我尝试在下面的输入字段 image_main_file_name 中显示上传的图像文件名，但失败了。帮我解决同样的问题。我可以在 info 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>

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

设置控件的id，然后使用下面的jquery语法来设置值。

<input type="text" id="image_main_file_name" name="image_main_file_name"/> 

$("#image_main_file_name").val(fileName);

【讨论】：

您可以使用上面的 jquery 显示内部输入并更改输入控件。您对上述更改有任何疑问吗？

【解决方案2】：

您的代码很好。您只是没有将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>

【讨论】：