调用Imgbb API上传图片时如何设置自定义文件名

架构老林

2026-9-26

解决方案

你的现有HTML代码不需要做任何调整，Imgbb官方上传接口本身支持传入name参数自定义上传后的文件名，只需要修改JS代码即可实现需求：

核心调整逻辑

读取输入框的自定义文件名，提取原上传文件的扩展名拼接成带后缀的完整文件名
将拼接好的文件名通过FormData新增name字段传给Imgbb接口

修改后的完整JS代码如下：

function fileChange(){
  var file = document.getElementById('input_img');
  var imgnameInput = document.getElementById('name');
  var form = new FormData();
  form.append("image", file.files[0])

  // 新增自定义文件名处理逻辑
  let customName = imgnameInput.value.trim();
  if (customName) {
    // 提取原文件的扩展名，避免文件类型识别失效
    let originFileName = file.files[0].name;
    let ext = originFileName.lastIndexOf('.') > -1 ? originFileName.slice(originFileName.lastIndexOf('.')) : '';
    // 拼接自定义文件名+扩展名后传给接口
    form.append("name", customName + ext);
  }

  var settings = {
    "url": "https://api.imgbb.com/1/upload?key=(API CODE)",
    "method": "POST",
    "timeout": 0,
    "processData": false,
    "mimeType": "multipart/form-data",
    "contentType": false,
    "data": form
  };

  $.ajax(settings).done(function (response) {
    console.log(response);
    var jx = JSON.parse(response);
    console.log(jx.data.url);
  });
}