mig*_*igp 13 php xml forms jquery file-upload
我可以使用一些帮助...我已经设法为我做了blueimp jQuery文件上传工作,但我仍然是一个新手,我对jQuery等知之甚少所以请尽量明白给我尽可能简单.我会尽量具体.
好的...我想要实现的是人们可以上传照片,并且每张照片都可以选择其他选项(通过下拉菜单)并添加额外的细节(通过文本输入框).这些附加表单字段将与数据一起传递,以及上载的文件数组.每个文件名及其相应的菜单选择和细节最终将与上传的照片一起存储在动态生成的XML或文本文件中.
我知道之前在github上出现了类似的问题,我已经看到了这样的解决方案(https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data )但我使用的是最新版本的插件,无法在我的任何文件中找到相同的代码.
到目前为止,我已添加:
<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>
到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>
我无法理解upload.php,其中files []数组被解析为文件名等,并且不确定在哪里接收包[]和notes []数组,迭代它们,以及如何将所有信息放入文本/ XML文件中.
任何有耐心和一些使用此插件/这些问题的人都可以带我完成下一步吗？非常感谢你的帮助.
Jam*_*ath 13
我发现这个资源有助于通过上传的文件传递额外的表单数据:
https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data
对不起,我没时间写更详细的答案.
jas*_*tah 10
要传递额外的表单数据,您可以执行以下类似的操作:
$('[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()
};
});
在PHP方面,您可以在$ _POST数组中查找提交的'package'和notes'数据.
当提交的数据不是数组数据时(如提交多个值的复选框),我会避免在表单元素名称中使用'[]'.
在 upload.php 中 - 要查找您要查找的参数，请尝试检查全局变量 $_REQUEST、$_GET 或 $_POST http://php.net/manual/en/reserved.variables.request.php
例如，如果您要向 upload.php 发送“package[]”参数，您可以使用 $_REQUEST['package[]'] 在 upload.php 中访问它
希望这可以帮助。