admin管理员组

文章数量:1387404

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">

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

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!

Thanks Kashuda

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">

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

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!

Thanks Kashuda

• javascript
• post
• input
• fine-uploader

Share Improve this question Follow edited Jun 6, 2013 at 2:25 Ray Nicholus 19.9k1414 gold badges6464 silver badges8484 bronze badges asked Jun 5, 2013 at 12:35 KashudaKashuda 18522 silver badges1010 bronze badges 3

• I require a little more info before I can provide you with an answer. First, based on your code above, it looks like you only want a user to be able to select ONE file. Is this your intention? Second, are you also looking to allow your users to drag and drop files to be uploaded? – Ray Nicholus Commented Jun 5, 2013 at 12:48
• I have different areas/categories where users can upload files. Usually they only upload one file. But in one case I would need two files to be uploaded. One should be a preview file (.jpg), the second should be the main object (.zip). Drag & drop is not really required. What I need is the upload progress and a file-type and fils-size checking before uploading. (Btw. I am looking for the jQuery options) – Kashuda Commented Jun 5, 2013 at 19:00
• There are several ways to tackle this. As a result, your question requires a fairly plex, detailed answer. I'll type up something plete in the next 6-9 hours. – Ray Nicholus Commented Jun 5, 2013 at 20:08

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.

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.

Option #1 - FineUploader mode (using the pre-built UI)

Using 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');
});

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.

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.

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.

Option #2 - FineUploaderBasic mode (build your own UI)

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.

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 fortable with javascript, HTML, and CSS. If you are not, however, you may want to try and stick with FineUploader mode.

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.

本文标签： javascriptfineuploaderhow to use in combination with other input fieldsStack Overflow