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与要发送的其他数据一起使用。

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

感谢Kashuda

Answer 1

虽然Fine Uploader不需要jQuery (或任何其他库)，但它有一个可选的jQuery plug-in。如果您不反对使用jQuery，我建议您使用jQuery插件，因为jQuery使工作变得容易得多。

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

使用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将文件发送到您的服务器之前，它会调用您的"upload“事件处理程序，您可以读取输入元素的值并将其提供给Fine Uploader，通过文件ID将它们与文件关联。Fine Uploader会将此信息与文件一起包含在它将发送到您的服务器的多部分编码的POST请求中。

您的用户在选择了所有文件并填写了适当的输入字段后，将单击此选项。通常，Fine Uploader会在文件被选中后立即将其发送到服务器，但这可以通过切换autoUpload选项来更改。

使用FineUploader模式意味着你不必太担心UI，因为大部分都已经为你完成了，并且你可以免费获得拖放功能，以及进度条和其他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。