如何在使用jQuery上传图片后，在输入框中显示图片文件名

Question

在这里，我可以上传文件并在info类中显示已上传文件的名称。但是，我尝试在下面的输入字段image_main_file_name中显示已上传图像文件的名称，但失败了。请帮我解决这个问题。

我可以在info div类中显示已上传的图片文件名，如下所示：

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

Help me to display an uploaded image file name in the input field image_main_file_name below,

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>

- Naveen

Answer 1

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

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

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

- Amit Verma

---

你可以使用上述jQuery在输入框中显示并更改输入控件。你对以上更改有任何问题吗？ - Amit Verma

Answer 2

你的代码没问题。你只是没有给文件输入附加一个调用setImage的change监听器。

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>

- Spectric

---

当图像名称过长而超出输入框时，我该怎么办？ - Wakil Ahmed

@WakilAhmed 你希望发生什么？你想让输入适应文件名的大小吗？ - Spectric

是的，文件名的大小可以调整......也许只需显示一部分名称。 - Wakil Ahmed