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

Question

我有一个遗留应用程序，它有五个单独的文件上传用于单个数据库记录。每个文件上传旁边都有一个字段，用于为上传的文件输入标题。

我正在考虑用 fineUploader 画廊替换全部，并允许最多上传 10 个文件。

但是，在网络显示时，在旧系统上为图像的 ALT 标记添加标题是很有用的。

我可以通过使用 fineuploader 和每个文件的标题字段上传多个单个文件来解决这个问题，但我想避免在页面上有这么多。

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

任何人都可以提出一个好的方法吗？

Answer 1

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

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

将文件输入字段添加到您的 Fine Uploader 模板。这将保存 user-entered 标题值。您可能还需要一些 CSS 来使它看起来适合您的项目。
初始化 Fine Uploader，将 autoUpload option 设置为 false。这将允许您的用户输入字幕，然后通过单击按钮（稍后添加）上传文件。
注册一个onUpload callback handler. Here, you will read the value of the associated file's caption stored in the text input and tie it to the file with the 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 and 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" 参数和相关值作为每个文件上传请求的一部分。

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

fineuploader image uploads include caption with uploaded files

file-upload

image

captions

fine-uploader