1

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

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

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

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

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

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

4

1 回答 1

3

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

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

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

模板的文件列表部分可能如下所示：

<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”参数。

于 2016-04-19T22:59:53.710 回答