【问题标题】:fine-uploader - how to use in combination with other input fields?Fine-uploader - 如何与其他输入字段结合使用?
【发布时间】:2013-06-05 12:35:04
【问题描述】:

我想在典型表单中使用 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">

所以我实际上想主要替换 &lt;input name="fileupload" type="file" "&gt; 部分。

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

我将不胜感激!

谢谢 卡舒达

【问题讨论】:

  • 我需要更多信息才能为您提供答案。首先,根据您上面的代码,您似乎只希望用户能够选择一个文件。这是你的意图吗?其次,您是否还希望允许您的用户拖放要上传的文件?
  • 我有不同的区域/类别,用户可以上传文件。通常他们只上传一个文件。但在一种情况下,我需要上传两个文件。一个应该是预览文件 (.jpg),第二个应该是主要对象 (.zip)。拖放并不是真正需要的。我需要的是上传进度以及上传前的文件类型和文件大小检查。 (顺便说一句。我正在寻找 jQuery 选项)
  • 有几种方法可以解决这个问题。因此,您的问题需要一个相当复杂、详细的答案。我会在接下来的 6-9 小时内输入完整的内容。

标签: javascript post input fine-uploader


【解决方案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

【讨论】:

  • 好的。感谢您提供全面的答案。我还不清楚三件事:1.) 如果用户在填写完所有其他输入字段后决定更改他要上传的文件,这些字段将被清除,因为再次调用了 onSubmit 操作。 2.) 如何为我的预览添加第二个上传按钮? 3.) 上传成功后如何加载新页面?
  • 1) 不清楚您是否了解此上传器的工作原理。我建议你试试我的答案。所有文件总共只有一个 Uploader。 2) 为什么要两个上传按钮?再说一次,我认为你不明白这是如何工作的。应该不需要两个按钮,所有文件只需一个按钮。 3) 在所有文件完全完成讨论后,在“完成”处理程序中加载一个新页面。有关详细信息,请参阅文档。
猜你喜欢
  • 2013-04-26
  • 2015-04-18
  • 1970-01-01
  • 1970-01-01
  • 2023-04-03
  • 1970-01-01
  • 1970-01-01
  • 2013-07-22
  • 1970-01-01
相关资源
最近更新 更多