jQuery结合Cropper.js实现图片上传时如何获取指定id的input元素值

问题根源 #

你在#logo的change事件校验完图片格式、初始化裁剪器之后，执行了$(this).val('')清空了文件输入框的内容，后续点击保存裁剪按钮时再读取$('#logo').val()自然获取不到值。

另外你之前从input的value中截取文件名的方式兼容性一般，File对象本身就自带name属性可以直接获取原始文件名，不需要手动解析路径字符串。

解决步骤 #

1. 在文件选择触发的change事件中，拿到文件对象时就提取文件名，存入保存按钮的自定义属性中暂存
2. 点击保存裁剪按钮时，直接从按钮的自定义属性读取文件名即可

修改后的核心代码 #

修改#logo的change事件逻辑 #

$("#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') {
    // 新增：直接从File对象取文件名，存入保存按钮的data属性
    $("#btn_saveCrop").attr("data-filename", photo.name);
    $("#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'
    });
  }
});

修改保存按钮的case分支逻辑 #

case "logo":
  // 替换原有读取input值的逻辑，直接从按钮属性取文件名
  var filename = $(this).data('filename');

  console.log(filename);
  index = logo_temp.push({
    "file": blob
  }) - 1;
  // 后续原有逻辑保持不变

内容的提问来源于stack exchange，提问作者nonutt