fine-uploader - 如何与其他输入字段结合使用？ [英] fine-uploader - how to use in combination with other input fields?

问题描述

我想在一个典型的形式中使用FineUploader：

I would like to use FineUploader within a typical form:

<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 = fileuploadtype =file> part。

So I would actually like to mainly replace the <input name="fileupload" type="file" "> part.

不幸的是我对JavaScript和jQuery jet不太熟悉并且不知道如何要做到这一点。
我找不到任何示例代码，其中FineUploader与其他数据一起使用。

Unfortunately I am not very familiar with JavaScript and jQuery jet and have no idea how to do this. I could not find any exemplary code where FineUploader is used together with other data to be send.

我将不胜感激任何帮助！

I would appreciate any help!

谢谢
Kashuda

Thanks Kashuda

推荐答案

虽然Fine Uploader不需要jQuery（或任何其他库，就此而言）它有一个可选的 jQuery插件。如果你不反对使用jQuery，我建议你使用jQuery插件，因为jQuery让生活更轻松。

While Fine Uploader does not require jQuery (or any other library, for that matter) it does have an optional jQuery plug-in. If you are not opposed to using jQuery, I suggest you use the jQuery plug-in, as jQuery makes life much easier.

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

There are a couple ways to skin this cat. In either case, the formula is about the same. That is, let Fine Uploader handle files, create input elements on-the-fly for each file submitted, and then pass the values of those inputs back to Fine Uploader just before Fine Uploader sends the associated file to your server.

使用 FineUploader模式：

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

You will likely need to add to the above code to suit your needs, and contribute CSS where appropriate, but that is a start in the right direction. Above, you are waiting for Fine Uploader to call you back when it has added the list item to the DOM representing a selected file. When you receive that callback, you are adding an text input element at the beginning of the list item (for the user-supplied name), and another at the end of the list item (for the user-supplied description. Then, just before Fine Uploader sends the file to your server, it invokes your "upload" event handler, where you read the values of the input elements and give them to Fine Uploader, associating them with the file via the file ID. Fine Uploader will include this information along with the file in the multipart-encoded POST request it will send to your server.

点击处理程序将通知Fine Uploader将文件发送到您的服务器。在选择所有文件并在适当时填写输入字段后，将单击此选项。通常，Fine Uploader在选中后立即将文件发送到服务器，但可以通过切换 autoUpload 选项。根据您的情况，转换自动上传最有意义离开

The click handler will signal Fine Uploader to send the files to your server. Your user will click this after they have selected all files and filled out the input fields as appropriate. Normally, Fine Uploader sends files to the server immediately after they are selected, but this can be changed by toggling the autoUpload option. For your situation, it makes most sense to turn auto uploading off.

使用FineUploader模式意味着您不必过多担心用户界面，因为大部分内容都是为您完成的，并且您会受到拖累。删除功能，以及进度条和其他UI好东西免费。

Using FineUploader mode means you don't have to worry too much about the UI as most of it has been done for you, and you get drag & drop functionality, along with progress bars and other UI goodies for free.

您的第二选择是使用 FineUploaderBasic模式。这使您可以最大程度地控制UI，但它需要最多的工作，因为您需要完全创建自己的UI。这意味着您需要使用大多数回调来构建您的用户界面和使其与Fine Uploader的内部状态和相关文件保持同步。

Your second choice is to use FineUploaderBasic mode. This gives you the most control over your UI, but it requires the most work as you will need to create your own UI entirely. This means you will need to make use of most callbacks in order to construct your UI and keep it in sync with the internal state of Fine Uploader and the associated files.

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

For example, if you want progress bars, you'll need to render them yourself and update them based on information periodically passed to your via an onProgress callback handler invoked by Fine Uploader. All of this is fine and possibly preferred in some cases if you are quite comfortable with javascript, HTML, and CSS. If you are not, however, you may want to try and stick with FineUploader mode.

FineUploaderBasic模式不包括开箱即用的拖放支持，但您可以轻松集成 Fine Uploader的独立文件拖动&如果您愿意，可以删除模块。

FineUploaderBasic mode does not include drag and drop support out-of-the-box, but you can easily integrate Fine Uploader's standalone File Drag & Drop module if you desire.

这篇关于fine-uploader - 如何与其他输入字段结合使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！