Blueimp jQuery file upload, passing extra form data

Question

I could use some help... I've managed to make blueimp jQuery file upload work for me but I'm still definitely a newbie at this, I know very little about jQuery etc so please try to give it to me as clear and simple as possible. I'll try to be specific.

Ok... What I'd like to achieve with this is that people can upload photos, and with each photo select additional options (via ) and add extra details (via ). ）并添加其他详细信息（通过 ）。 These additional form fields would be passed in array(s) along with the array of files which are uploaded. Each of the along with their would ultimately be stored in a dynamically generated alongside the uploaded photos. 及其最终将与上传的照片一起存储在动态生成的 。

I know similar questions have come up before on github and I've seen solutions such as this one (https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data) but I'm using the latest version plugin and can't find the equivalent code to that in any of my files.

So far I have added:

<td><b>Package:</b> 
<select name="package[]"><option value="0">Basic</option><option value="1">Advanced</option><option value="2">Restoration</option></select>
</td>
<td>
<input type="text" name="notes[]">
</td>

to in the file (after the 'Delete' button code), and moved the closing form tag to after the template-upload script to include these fields. 文件中（位于“删除”按钮代码之后），然后将结束表单标签移动到模板上传脚本之后，以包括这些字段。 I know that's not much progress.

Here is most of index.html

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" id="theme">
<link rel="stylesheet" href="../jquery.fileupload-ui.css">
<link rel="stylesheet" href="style.css">
<h2>File Upload</h2>
<div id="fileupload">
    <form action="upload.php" method="POST" enctype="multipart/form-data">
        <div class="fileupload-buttonbar">
            <label class="fileinput-button">
            <span>Add files...</span>
            <input type="file" name="files[]" multiple>
        </label>
        <button type="submit" class="start">Start upload</button>
        <button type="reset" class="cancel">Cancel upload</button>
        <button type="button" class="delete">Delete files</button>
    </div>
//</form> originally here, moved below
<div class="fileupload-content">
    <table class="files"></table>
    <div class="fileupload-progressbar"></div>
</div>
</div>
<script id="template-upload" type="text/x-jquery-tmpl">
<tr class="template-upload{{if error}} ui-state-error{{/if}}">
    <td class="preview"></td>
    <td class="name">${name}</td>
    <td class="size">${sizef}</td>
    {{if error}}
        <td class="error" colspan="2">Error:
            {{if error === 'maxFileSize'}}File is too big
            {{else error === 'minFileSize'}}File is too small
            {{else error === 'acceptFileTypes'}}Filetype not allowed
            {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
            {{else}}${error}
            {{/if}}
        </td>
    {{else}}
        <td class="progress"><div></div></td>
        <td class="start"><button>Start</button></td>
    {{/if}}
    <td class="cancel"><button>Cancel</button></td>
</tr>
</script>
<script id="template-download" type="text/x-jquery-tmpl">
<tr class="template-download{{if error}} ui-state-error{{/if}}">
    {{if error}}
        <td></td>
        <td class="name">${name}</td>
        <td class="size">${sizef}</td>
        <td class="error" colspan="2">Error:
            {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
            {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
            {{else error === 3}}File was only partially uploaded
            {{else error === 4}}No File was uploaded
            {{else error === 5}}Missing a temporary folder
            {{else error === 6}}Failed to write file to disk
            {{else error === 7}}File upload stopped by extension
            {{else error === 'maxFileSize'}}File is too big
            {{else error === 'minFileSize'}}File is too small
            {{else error === 'acceptFileTypes'}}Filetype not allowed
            {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
            {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
            {{else error === 'emptyResult'}}Empty file upload result
            {{else}}${error}
            {{/if}}
        </td>
    {{else}}
        <td class="preview">
            {{if thumbnail_url}}
                <a href="${url}" target="_blank"><img src="${thumbnail_url}"></a>
            {{/if}}
        </td>
        <td class="name">
            <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${name}</a>
        </td>
        <td class="size">${sizef}</td>
        <td colspan="2"></td>
    {{/if}}
    <td class="delete">
        <button data-type="${delete_type}" data-url="${delete_url}">Delete</button>
    </td>
<td><b>Package:</b> 
<select name="package[]"><option value="0">Basic</option><option value="1">Advanced</option><option value="2">Restoration</option></select>
</td>
<td>
<input type="text" name="notes[]">
</td>
</tr>
</script>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="../jquery.iframe-transport.js"></script>
<script src="../jquery.fileupload.js"></script>
<script src="../jquery.fileupload-ui.js"></script>
<script src="application.js"></script>

I can't make a lot of sense of though, of where the files[] array is parsed for filenames etc, and am not sure where to receive the package[] and notes[] arrays as well, iterate through them, and how to put all that info into a text/XML file. 并没有意义，在files []数组中解析文件名等的地方，也不确定在哪里接收package []和notes []数组，并遍历它们，以及如何将所有这些信息放入文本/ XML文件中。

Can anyone with a little patience and some experience with this plugin / these issues walk me through the next steps? Thanks so much for your help.

Answer 1

I found this resource helpful with passing extra form data through with the uploaded files:

https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data

Sorry that I don't have the time to write a more detailed answer.

Answer 2

For passing extra form data you could do something similar to:

    $('[name=files\\[\\]]').fileupload({
        //...your initialization of the file uploader here
    }).bind('fileuploadsubmit', function (e, data) {
        data.formData = {
            'package': $('[name=package\\[\\]]').val(),
            'notes': $('[name=notes\\[\\]]').val()
        };
    });

On the PHP side, you can look in the $_POST array for the submitted 'package' and notes' data.

I would avoid using '[]' in your form element names when the data being submitted is not going to be array data (like checkboxes where multiple values are submitted).

Answer 3

I also needed to pass an extra parameter and found that the formData option can be used to set additional form data programmatically.

$('#fileupload').fileupload({
    formData: {
                    param1: 'test'
                    ,param2: "value2"
                    ,param3: "yasseshaikh"
              }
});

Source : Adding additional form data programmatically

Answer 4

In upload.php - To find the parameters that you are looking for try checking in the global variables $_REQUEST, $_GET, or $_POST http://php.net/manual/en/reserved.variables.request.php

So for example if you are sending a 'package[]' parameter to upload.php you could access it inside upload.php using $_REQUEST['package[]']

Hope this helps.