php Blueimp jQuery 文件上传，传递额外的表单数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7459236/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Blueimp jQuery file upload, passing extra form data
提问by migp
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.
我可以使用一些帮助...我已经设法让 blueimp jQuery 文件上传对我有用，但我仍然绝对是一个新手，我对 jQuery 等知之甚少，所以请尽量清晰地告诉我尽可能简单。我会尽量具体。
Ok... What I'd like to achieve with this is that people can upload photos, and with each photo select additional options (via drop down menu) and add extra details (via text input box). These additional form fields would be passed in array(s) along with the array of files which are uploaded. Each of the filenamesalong with their corresponding menu selection and detailswould ultimately be stored in a dynamically generated XML or text filealongside the uploaded photos.
好的...我想实现的是人们可以上传照片，并为每张照片选择其他选项（通过下拉菜单）并添加额外的细节（通过文本输入框）。这些额外的表单字段将在数组中与上传的文件数组一起传递。每个文件名及其相应的菜单选择和详细信息最终将与上传的照片一起存储在动态生成的XML 或文本文件中。
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.
我知道之前在 github 上也出现过类似的问题，并且我已经看到过这样的解决方案 (https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data ) 但我使用的是最新版本的插件，在我的任何文件中都找不到等效的代码。
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 index.htmlfile (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.
到index.html文件中（在“删除”按钮代码之后），并将关闭表单标签移到模板上传脚本之后以包含这些字段。我知道这不是什么大进步。
Here is most of index.html
这是 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 upload.phpthough, 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.
我无法理解upload.php，文件[]数组在哪里解析文件名等，并且不确定从哪里接收包[]和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.
任何有一点耐心和一些使用此插件/这些问题的经验的人都可以引导我完成后续步骤吗？非常感谢你的帮助。
回答by James P McGrath
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
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.
抱歉，我没有时间写更详细的答案。
回答by jasonjonesutah
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.
在 PHP 端，您可以在 $_POST 数组中查看提交的“包”和注释数据。
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).
当提交的数据不是数组数据（如提交多个值的复选框）时，我会避免在表单元素名称中使用“[]”。
回答by Yasser Shaikh
I also needed to pass an extra parameter and found that the formData optioncan be used to set additional form data programmatically.
我还需要传递一个额外的参数，发现可以使用formData 选项以编程方式设置额外的表单数据。
$('#fileupload').fileupload({
formData: {
param1: 'test'
,param2: "value2"
,param3: "yasseshaikh"
}
});
回答by Kevin M
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
在upload.php - 要找到您正在寻找的参数，请尝试检查全局变量 $_REQUEST、$_GET 或 $_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[]']
因此，例如，如果您要向 upload.php 发送“package[]”参数，则可以使用 $_REQUEST['package[]'] 在 upload.php 中访问它
Hope this helps.
希望这可以帮助。
