罚款上传 - 如何与其他输入字段组合使用？

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

虽然精细上传不需要的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会在选择后立即向服务器发送文件，但这可以通过toggli来更改选择autoUpload选项。对于你的情况，关闭自动上传是最有意义的。

使用FineUploader模式意味着您不必担心用户界面太多，因为它大部分都是为您完成的，并且您可以免费拖动功能以及进度条和其他UI好东西。

选项＃2 - FineUploaderBasic模式（建立自己的UI）

你的第二个选择是使用FineUploaderBasic mode。这使您可以最大限度地控制UI，但它需要最多的工作，因为您需要完全创建自己的UI。这意味着您需要使用大多数callbacks才能构建您的用户界面并保持其与Fine Uploader的内部状态及相关文件同步。例如，如果您需要进度条，您需要自己渲染它们，并根据定期传递给您的信息对其进行更新，这些信息通过Fine Uploader调用的onProgress回调处理程序定期传递给您。所有这些都很好，如果你对JavaScript，HTML和CSS感到满意，在某些情况下可能是首选。但是，如果你不是，你可能想尝试并坚持使用FineUploader模式。

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