Блог

У меня есть функция загрузки изображения вместе с функцией обрезки js, у меня проблема с отображением имени файла, даже если я объявил переменную, и входные данные уже имеют значение. Но когда я попытался передать и отобразить имя. Он не показывал никакого значения для этого имени файла.

Сначала я попытался поместить его под условием photo.type, как это

 if (photo.type == 'image/jpg' || photo.type == 'image/png' || photo.type == 'image/jpeg') {
  let file = $('#logo').val();
  var filename = file.substr(file.lastIndexOf('\')   1, file.length);
}
 

Но тогда я не уверен в том, как передать имя, поэтому я поместил его под case , и я все еще не получил имя файла. Как мне решить эту проблему ?

 <div class="col-sm-3 text-center">
  <button type="button" class="btn btn-info w-30 choose_logo" id="b_logo">upload</button>
  <input type="file" id="logo" hidden>
</div>
 

 $(".choose_logo").click(function() {
  $("#logo").click();
});

$("#logo").change(function() {
  let width = 0;
  let height = 0;
  let photo = $(this).prop("files")[0];
  
  if (photo.type == 'image/jpg' || photo.type == 'image/png' || photo.type == 'image/jpeg') {
    $("#btn_saveCrop").attr("data-operation", "logo");
    $("#parentContainer_cropper").html(`<img id="image-container-croppr" src="${URL.createObjectURL(photo)}"/>`)
    $("#cropper_js_banner").modal('show');
    $('#image-container-croppr').cropper({
      aspectRatio: 1,
      minContainerWidth: 500,
      minContainerHeight: 500,
      background: false,
      modal: true,
    });
    $(this).val('');
  } 
  else {
    Swal.fire({
      icon: 'error',
      title: 'error',
      text: 'ONLY JPEG, JPG and PNG Are allowed'
    });
  }
});

$("#btn_saveCrop").click(function() {
  var operation = $(this).attr("data-operation");
  let index

  $('#image-container-croppr').cropper('getCroppedCanvas').toBlob(function(blob) {
    switch (operation) {
      case "logo":
        let file = $('#logo').val();
        var filename = file.substr(file.lastIndexOf('\')   1, file.length);

        console.log(filename);
        index = logo_temp.push({
          "file": blob
        }) - 1;
        
        if (index == 0) {
          var defaultphoto = "show";
        } else {
          var defaultphoto = "hidden";
        }
        
        $("#cropper_js_banner").modal('hide');
        $("#logoAttach").append(`
            <div class="tab-content col-12 mt-4" id="myTabContent-2">
                <div class="tab-pane fade show active" id="addCustodian" role="tabpanel" aria-labelledby="addCustodian-tab">
                    <div class="media-support-info ml-3">
                        <a class="font-size-12 font-weight-600" href="${URL.createObjectURL(blob)}"  target="_blank" style="color:black;">
                        <p class="mb-0 font-size-12"> Filename : ${filename}</p></a>
                    </div>
                </div>
            </div> 
        `);
        break;
    }
    
    $('.modal').css('overflow-y', 'auto');
  });
});
 

Вы можете попробовать это,

 var uploadedFileInfo = null;
    $("#logo").change(function(e) {
    uploadedFileInfo = e.target.files[0];
});
 

и теперь у вас будет загруженный файл-объект,

 var filename = uploadedFileInfo.name;