Blueimp jQuery文件上传，传递额外的表单数据 [英] Blueimp jQuery file upload, passing extra form data
问题描述
我可以使用一些帮助...我已经设法使blueimp jQuery文件上传为我工作，但我仍然是一个新手，我对jQuery等知之甚少，所以请尝试把它给我尽可能清晰和简单。我会尽量具体。
好的...我想要达到的目标是人们可以上传照片，并且每张照片都选择其他选项（通过下拉菜单），并添加额外的细节（通过文本输入框）。这些额外的表单字段将与上传的文件数组一起传递给数组。每个文件名及其对应的菜单选择和详细信息最终都将存储在动态生成的 XML或文本文件旁边的上传照片。
我知道类似的问题已经出现在github上，我已经看到这样的解决方案（https://github.com/blueimp/jQuery-File-上传/维基/如何提交额外的表格数据），但我使用的是最新版本的插件，无法找到与我的任何文件中的等价代码。
到目前为止，我添加了：
< td>< b>套餐：< / b> ;
< select name =package []>< option value =0> Basic< / option>< option value =1>高级< / option><选项值= 2 >恢复与LT; /选项>< /选择>
< / td>
< td>
< input type =textname =notes []>
< / td>在 index.html 文件中（在删除按钮之后）的
代码），并将结束窗体标记移至模板上载脚本之后以包含这些字段。我知道这并没有什么进展。
这里是大部分的index.html
< link rel =stylesheethref =http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.cssid =theme> ;
< link rel =stylesheethref =../ jquery.fileupload-ui.css>
< link rel =stylesheethref =style.css>
< h2>档案上载< / h2>
< div id =fileupload>
< form action =upload.phpmethod =POSTenctype =multipart / form-data>
< div class =fileupload-buttonbar>
< label class =fileinput-button>
< span>新增档案...< / span>
< input type =filename =files []multiple>
< / label>
< button type =submitclass =start>开始上传< / button>
< button type =resetclass =cancel>取消上传< / button>
< button type =buttonclass =delete>删除文件< / button>
< / div>
//< / form>最初在这里，移动到
< div class =fileupload-content>
< table class =files>< / table>
< div class =fileupload-progressbar>< / div>
< / div>
< / div>
< script id =template-uploadtype =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 =errorcolspan =2>错误：
{{if error ==='maxFileSize'}} big
{{else error ==='minFileSize'}}文件太小
{{else error ==='acceptFileTypes'}}文件类型不允许
{{else error == ='maxNumberOfFiles'}}最大文件数超过
{{else}} $ {error}
{{/ if}}
< / td>
{{else}}
< td class =progress>< div>< / div>< / td>
< td class =start><按钮>开始< /按钮>< / td>
{{if}}
< td class =cancel>< button>取消< /按钮>< / td>
< / tr>
< / script>
< script id =template-downloadtype =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 =errorcolspan =2>错误：
{{if error === 1}}文件超出upload_max_filesize（php.ini指令）
{其他错误=== 2}}文件超过MAX_FILE_SIZE（HTML表单指令）
{{else错误=== 3}}文件只是部分上传
{{else error === 4}}否文件上传
{{else error === 5}}缺少临时文件夹
{{else error === 6}}无法将文件写入磁盘
{{else error = == 7}}文件上传以扩展名停止
{{else error ==='maxFileSize'}}文件太大
{{else error ==='minFileSize'}}文件太小
{{else error ==='acceptFileTypes'}}文件类型不允许
{{else error ==='maxNumberOfFiles'}}最大文件数超过
{{else error == ='uploadedBytes'}}上传的字节数超过文件大小
{{else error ==='emptyResult }}空文件上传结果
{{别的}} $ {错误}
{{/如果}}
将; / TD>
{{else}}
< td class =preview>
{{if thumbnail_url}}
< a href =$ {url}target =_ blank>< img src =$ {thumbnail_url}>< / a>
{{/ if}}
< / td>
< td class =name>
< / td>
< td class =size> $ {sizef}< / td>
< td colspan =2>< / td>
{{/ if}}
< td class =delete>
< / td>
< td>< b>套餐：< / b>
< select name =package []>< option value =0> Basic< / option>< option value =1>高级< / option><选项值= 2 >恢复与LT; /选项>< /选择>
< / td>
< td>
< input type =textname =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 =../ jquery.iframe-transport.js>< / script>
< script src =../ jquery.fileupload.js>< / script>
< script src =../ jquery.fileupload-ui.js>< / script>
< script src =application.js>< / script>
尽管 upload.php ，文件[]数组被解析为文件名的位置等等，我不确定在哪里接收package []和notes []数组，以及遍历它们，以及如何将所有这些信息放入文本/ XML文件。
任何一个有点耐心和一些这个插件的经验/这些问题的人可以走过我的下一个步骤？非常感谢您的帮助。
p>
https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data
<对不起，我没有时间写更详细的答案。
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 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 filenames along with their corresponding menu selection and details would ultimately be stored in a dynamically generated XML or text file 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 index.html 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 upload.php 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.
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.
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.
这篇关于Blueimp jQuery文件上传，传递额外的表单数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
