Question

我有一个遗留应用程序，它为单个数据库记录提供了五个单独的文件上传。除了每个文件上传外，还有一个字段用于输入上传文件的标题。

我正在考虑用fineUploader图库替换整个版本，并允许上传最多十个文件。

然而，在旧系统上，当涉及到网络显示时，对于图像的ALT标记，每个图像都有一个标题是很有用的。

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

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

有人能建议一个好方法吗？

Answer 1

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

另一种方法涉及以下方面：

将文件输入字段添加到Fine Uploader模板。这将保留用户输入的标题值。您可能还需要一些CSS，以使其看起来适合您的项目。
将autoUpload option设置为false，初始化精细上传器。这将允许您的用户输入字幕，然后通过单击按钮上载文件（稍后添加）。
注册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”参数，并将相关值作为每个文件上传请求的一部分。

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

1 个答案: