javascript - fine-uploader - 如何与其他输入字段结合使用？

Question

我想在一个典型的表单中使用 FineUploader:

<form enctype="multipart/form-data" method="post"">
    <input name="fileupload" type="file" ">
    <input type="text" name="title" size="45" maxlength="100">
    <textarea name="description" cols="40" rows="8"></textarea>
    <input type="hidden" name="op" value="Add">
<input type="submit" value="Upload">

所以我实际上主要想替换 <input name="fileupload" type="file" ">部分。

不幸的是，我对 JavaScript 和 jQuery jet 不是很熟悉，也不知道该怎么做。我找不到任何将 FineUploader 与其他要发送的数据一起使用的示例代码。

如有任何帮助，我将不胜感激!

谢谢卡舒达

Answer 1

虽然 Fine Uploader 不需要 jQuery(或任何其他库，就此而言)它确实有一个可选的 jQuery plug-in .如果你不反对使用 jQuery，我建议你使用 jQuery 插件，因为 jQuery 让生活变得更轻松。

有几种方法可以给这只猫剥皮。在任何一种情况下，公式都大致相同。也就是说，让 Fine Uploader 处理文件，为每个提交的文件即时创建输入元素，然后在 Fine Uploader 将相关文件发送到您的服务器之前将这些输入的值传递回 Fine Uploader。

选项 #1 - FineUploader 模式(使用预构建的 UI)

使用 FineUploader mode :

<div id="myFineUploaderContainer"></div>
<button id="uploadSelectedFiles">Upload Selected Files</button>

$('#myFineUploaderContainer').fineUploader({
   request: {
      endpoint: '/my/upload/endpoint'
   },
   autoUpload: false
})
   .on('submitted', function(event, id, name) {
      var fileItemContainer = $(this).fineUploader('getItemByFileId', id);

      $(fileItemContainer)
         .prepend('<input type="text" name="name">')
         .append('<input type="text" name="description">');
   })
   .on('upload', function(event, id, name) {
      var fileItemContainer = $(this).fineUploader('getItemByFileId', id),
          enteredName = $(fileItemContainer).find('INPUT[name="name"]').val(),
          enteredDescr = $(fileItemContainer).find('INPUT[namme="description"]').val();

      $(this).fineUploader('setParams', {name: enteredName, description: enteredDescr}, id);
   });

$('#uploadSelectedFiles').click(function() {
   $('#myFineUploaderContainer').fineUploader('uploadStoredFiles');
});

您可能需要添加以上代码以满足您的需要，并在适当的地方贡献 CSS，但这是朝着正确方向的开始。在上面，您正在等待 Fine Uploader 在将列表项添加到表示所选文件的 DOM 时给您回电。当您收到该回调时，您将在列表项的开头添加一个文本输入元素(用于用户提供的名称)，并在列表项的末尾添加另一个元素(用于用户提供的描述。然后，就在之前Fine Uploader 将文件发送到您的服务器，它调用您的“上传”事件处理程序，您在其中读取输入元素的值并将它们提供给 Fine Uploader，通过文件 ID 将它们与文件相关联。Fine Uploader 将包含此信息连同多部分编码的 POST 请求中的文件一起发送到您的服务器。

点击处理程序将向 Fine Uploader 发出信号，将文件发送到您的服务器。您的用户将在选择所有文件并根据需要填写输入字段后单击此按钮。通常，Fine Uploader 在选择文件后立即将文件发送到服务器，但这可以通过切换 autoUpload 选项来更改。对于您的情况，关闭自动上传最有意义。

使用 FineUploader 模式意味着您不必太担心 UI，因为大部分已经为您完成，并且您可以免费获得拖放功能、进度条和其他 UI 好东西。

选项 #2 - FineUploaderBasic 模式(构建您自己的 UI)

您的第二个选择是使用 FineUploaderBasic mode .这使您可以最大程度地控制您的 UI，但它需要最多的工作，因为您将需要完全创建自己的 UI。这意味着您将需要利用大部分 callbacks为了构建您的 UI 并使其与 Fine Uploader 的内部状态和相关文件保持同步。

例如，如果您想要进度条，您需要自己呈现它们并根据通过 Fine Uploader 调用的 onProgress 回调处理程序定期传递给您的信息更新它们。如果您对 javascript、HTML 和 CSS 非常熟悉，那么所有这些都很好，在某些情况下可能是首选。但是，如果您不是，您可能想尝试并坚持使用 FineUploader 模式。

FineUploaderBasic 模式不包括开箱即用的拖放支持，但您可以轻松集成 Fine Uploader's standalone File Drag & Drop module如果你愿意的话。