Fineuploader 图片上传包括上传文件的标题

Question

我有一个旧版应用程序，它为单个数据库记录上传了五个单独的文件。在每个文件上传旁边都有一个字段可以输入上传文件的标题。

我正在考虑用fineUploader 库替换全部内容，并允许上传最多十个文件。

但是，在旧系统上，在用于 Web 显示时，为图像的 ALT 标记为每个图像添加一个标题是很有用的。

我可以通过使用 Fineuploader 上传多个单个文件并为每个文件上传一个标题字段来解决这个问题，但我不想在页面上有这么多文件。

我看到有一个选项可以在上传期间更改文件名，这可能是一个选项，但可能会导致文件名非常长/混乱，并可能导致重音和其他字符出现问题。

谁能推荐一个好的方法？

Answer 1

我建议您考虑使用内置的编辑文件名功能，因为这对我来说似乎最合适，而且肯定是最简单的方法。

另一种方法涉及以下内容：

1. 在您的 Fine Uploader 模板中添加一个文件输入字段。这将保存用户输入的标题值。您可能还需要一些 CSS 以使其看起来适合您的项目。
2. 初始化 Fine Uploader 并将 autoUpload option 设置为 false。这将允许您的用户输入字幕，然后通过单击按钮（稍后添加）上传文件。
3. 注册onUpload callback handler。在这里，您将读取存储在文本输入中的关联文件标题的值，并将其与setParams API method 关联到文件。

your template 的文件列表部分可能如下所示：

<ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
   <li>
      ...
      <input class="caption">
   </li>
</ul>

您的 Fine Uploader 代码将包含此逻辑（重要但不相关的选项，例如 request.endpoint 和 element 被省略以保持对您的问题的关注）：

var uploader = new qq.FineUploader({
   autoUpload: false,
   callbacks: {
      onUpload: function(id) {
         var fileContainer = this.getItemByFileId(id)
         var captionInput = fileContainer.querySelector('.caption')
         var captionText = captionInput.value

         this.setParams({caption: captionText}, id)
      }
   }
})

您的服务器将在每个文件的上传请求中收到带有关联值的“caption”参数。