溶解：使用按钮单击触发此文件输入不允许图像附加

Question

#clickme

）触发文件输入（

#image-input

）以打开对话框以选择文件。我正在这样做，以便我可以为按钮设置样式。有效。但是，由于我在更改事件（转换文件并创建新的FormData对象）中正在做的事情，因此它实际上没有上传图像。仅当您单击实际文件输入（

#file-input

）时才有效。

我在这里想念什么？如何允许使用按钮打开对话框，但仍然可以通过Ajax上传我的文件？我没有错误，只是没有文件上传。

我认为变更事件不是开火。

$("#clickme").on("click", function () {
  $("#image-input").trigger("click");
});

$("#image-input").on("change", function (ev) {
  var originalFile = ev.target.files[0];

  if (
    originalFile.type === "image/heic" ||
    originalFile.name.toLowerCase().endsWith(".heic")
  ) {
    heic2any({
      blob: originalFile,
      toType: "image/jpeg",
    })
      .then(function (resultBlob) {
        var convertedFile = new File(
          [resultBlob],
          originalFile.name.replace(/\.heic$/i, ".jpg"),
          { type: "image/jpeg" },
        );

        var formData = new FormData();

        formData.append("image-input", convertedFile, convertedFile.name);

        // formData.append('otherField', 'value');

        uploadFile(formData);
      })
      .catch(function (x) {
        var error = "Error code: " + x.code + " " + x.message;
        console.log(error);
      });
  } else {
    var formData = new FormData();
    formData.append("image-input", originalFile, originalFile.name);
    uploadFile(formData);
  }
});

function uploadFile(formData) {
  $.ajax({
    url: base_url + "home/upload",
    type: "POST",
    data: formData,
    dataType: "json",
    mimeType: "multipart/form-data",
    contentType: false,
    cache: false,
    processData: false,
    success: function (response) {
      console.log(response);
    },
    error: function (error) {
      console.log(error);
    },
  });
}

我明白了，它需要e.preventdefault（）才能停止普通按钮单击行为。