从jQuery文件上载中检索formData(Retrieve formData from jQuery File Upload)
我有点想在jQuery文件上传插件中提交额外的表单数据。 这里描述https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form来但它没有详细介绍如何检索和使用该数据在UploadHandler.php中。 以下是我所拥有的：
index.php（表格）：
<form id="fileupload" action="<?php echo $this->config->item('base_url'); ?>/cool_upload/server/php/" method="POST" enctype="multipart/form-data"> <input type="hidden" id="userID" value="<?php echo $this->session->userdata('id'); ?>"> <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload --> <div class="row fileupload-buttonbar"> <div class="span7"> <!-- The fileinput-button span is used to style the file input field as button --> <span class="btn btn-success fileinput-button"> <i class="icon-plus icon-white"></i> <span>Add files...</span> <!-- REMOVED MULTIPLE FROM HERE TO ONLY ALLOW ONE FILE AT A TIME!!!! --> <input type="file" name="files[]"> </span> <button type="submit" class="btn btn-primary start"> <i class="icon-upload icon-white"></i> <span>Start upload</span> </button> <button type="reset" class="btn btn-warning cancel"> <i class="icon-ban-circle icon-white"></i> <span>Cancel upload</span> </button> <button type="button" class="btn btn-danger delete"> <i class="icon-trash icon-white"></i> <span>Delete</span> </button> <input type="checkbox" class="toggle"> </div> </div> <!-- The global progress information --> <div class="span5 fileupload-progress fade"> <!-- The global progress bar --> <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"> <div class="bar" style="width:200%;"></div> </div> <!-- The extended global progress information --> <div class="progress-extended"> </div> </div> <!-- The loading indicator is shown during file processing --> <div class="fileupload-loading"></div> <br> <!-- The table listing the files available for upload/download --> <table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table> </form> <br> <!-- The template to display files available for upload --> <script id="template-upload" type="text/x-tmpl"> <tr class="template-upload fade"> <td colspan="2" class="preview"><span class="fade"></span></td> <td class="changeFileName"><input type="text" name="changeFileName" class="changeFileName" style="width: 110px;" placeholder="New File Name?" maxlength="25" /> <select class="selectCat" name="selectCategory" style="width: 130px;"> <option selected="selected" value="0">Select Category:</option> <?php foreach ($fileCategory as $t) { echo '<option value="'.$t['id'].'">'.$t['name'].'</option>'; } ?> <option value="3">Other...</option> </select> </td> <td colspan="2" class="name" width="20"><span>{%=file.name%}</span></td> <td colspan="2" class="size"><span>{%=o.formatFileSize(file.size)%}</span></td> {% if (file.error) { %} <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td> {% } else if (o.files.valid && !i) { %} <td> <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div> </td> <td class="start">{% if (!o.options.autoUpload) { %} <button class="btn btn-primary"> <i class="icon-upload icon-white"></i> <span>Start</span> </button> {% } %}</td> {% } else { %} <td colspan="2"></td> {% } %} <td class="cancel">{% if (!i) { %} <button class="btn btn-warning"> <i class="icon-ban-circle icon-white"></i> <span>Cancel</span> </button> {% } %}</td> <td rowspan="2"></td> </tr> {% } %} </script>main.js：
$('#fileupload').bind('fileuploadsubmit', function (e, data) { data.formData = $('form').serializeArray(); });UploadHandler.php：
- 这是我对post函数的编辑：
public function post($print_response = true) { if (isset($_REQUEST['_method']) && $_REQUEST['_method'] === 'DELETE') { return $this->delete($print_response); } $upload = isset($_FILES[$this->options['param_name']]) ? $_FILES[$this->options['param_name']] : null; // Parse the Content-Disposition header, if available: $file_name = isset($_SERVER['HTTP_CONTENT_DISPOSITION']) ? rawurldecode(preg_replace( '/(^[^"]+")|("$)/', '', $_SERVER['HTTP_CONTENT_DISPOSITION'] )) : null; // Parse the Content-Range header, which has the following form: // Content-Range: bytes 0-524287/2000000 $content_range = isset($_SERVER['HTTP_CONTENT_RANGE']) ? preg_split('/[^0-9]+/', $_SERVER['HTTP_CONTENT_RANGE']) : null; $size = $content_range ? $content_range[3] : null; $files = array(); // IF THERE ARE MULTIPLE FILES if ($upload && is_array($upload['tmp_name'])) { // param_name is an array identifier like "files[]", // $_FILES is a multi-dimensional array: foreach ($upload['tmp_name'] as $index => $value) { $files[] = $this->handle_file_upload( $upload['tmp_name'][$index], $file_name ? $file_name : $upload['name'][$index], $size ? $size : $upload['size'][$index], $upload['type'][$index], $upload['error'][$index], $index, $content_range, isset($_REQUEST['userID']) ? $_REQUEST['userID'] : null, null ); } } else { // param_name is a single object identifier like "file", // $_FILES is a one-dimensional array: $files[] = $this->handle_file_upload( isset($upload['tmp_name']) ? $upload['tmp_name'] : null, $file_name ? $file_name : (isset($upload['name']) ? $upload['name'] : null), $size ? $size : (isset($upload['size']) ? $upload['size'] : $_SERVER['CONTENT_LENGTH']), isset($upload['type']) ? $upload['type'] : $_SERVER['CONTENT_TYPE'], isset($upload['error']) ? $upload['error'] : null, null, $content_range, isset($_REQUEST['userID']) ? $_REQUEST['userID'] : null, null ); } return $this->generate_response(array('files' => $files), $print_response); }-I将参数添加到handle_file_upload
protected function handle_file_upload($uploaded_file, $name, $size, $type, $error, $index = null, $content_range = null, $userID) {当我尝试使用$ userID时，我什么也得不到，因为它是空的。 如何使用表单中的userID？ 同样在index.php中，在模板显示区域中如何使用这些添加的输入呢？ 例如，我有一个输入changeFilerName和一个选择来选择类别。 我已经阅读了文档，但我仍然不确定如何将内容传递给UploadHandler。
I am having a heck of a time trying to submit additional form data in the jQuery File Upload plugin. It is described here https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data but it doesn't go into any detail about how to retrieve and use that data in the UploadHandler.php. Below is what I have:
index.php (the form):
<form id="fileupload" action="<?php echo $this->config->item('base_url'); ?>/cool_upload/server/php/" method="POST" enctype="multipart/form-data"> <input type="hidden" id="userID" value="<?php echo $this->session->userdata('id'); ?>"> <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload --> <div class="row fileupload-buttonbar"> <div class="span7"> <!-- The fileinput-button span is used to style the file input field as button --> <span class="btn btn-success fileinput-button"> <i class="icon-plus icon-white"></i> <span>Add files...</span> <!-- REMOVED MULTIPLE FROM HERE TO ONLY ALLOW ONE FILE AT A TIME!!!! --> <input type="file" name="files[]"> </span> <button type="submit" class="btn btn-primary start"> <i class="icon-upload icon-white"></i> <span>Start upload</span> </button> <button type="reset" class="btn btn-warning cancel"> <i class="icon-ban-circle icon-white"></i> <span>Cancel upload</span> </button> <button type="button" class="btn btn-danger delete"> <i class="icon-trash icon-white"></i> <span>Delete</span> </button> <input type="checkbox" class="toggle"> </div> </div> <!-- The global progress information --> <div class="span5 fileupload-progress fade"> <!-- The global progress bar --> <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"> <div class="bar" style="width:200%;"></div> </div> <!-- The extended global progress information --> <div class="progress-extended"> </div> </div> <!-- The loading indicator is shown during file processing --> <div class="fileupload-loading"></div> <br> <!-- The table listing the files available for upload/download --> <table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table> </form> <br> <!-- The template to display files available for upload --> <script id="template-upload" type="text/x-tmpl"> <tr class="template-upload fade"> <td colspan="2" class="preview"><span class="fade"></span></td> <td class="changeFileName"><input type="text" name="changeFileName" class="changeFileName" style="width: 110px;" placeholder="New File Name?" maxlength="25" /> <select class="selectCat" name="selectCategory" style="width: 130px;"> <option selected="selected" value="0">Select Category:</option> <?php foreach ($fileCategory as $t) { echo '<option value="'.$t['id'].'">'.$t['name'].'</option>'; } ?> <option value="3">Other...</option> </select> </td> <td colspan="2" class="name" width="20"><span>{%=file.name%}</span></td> <td colspan="2" class="size"><span>{%=o.formatFileSize(file.size)%}</span></td> {% if (file.error) { %} <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td> {% } else if (o.files.valid && !i) { %} <td> <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div> </td> <td class="start">{% if (!o.options.autoUpload) { %} <button class="btn btn-primary"> <i class="icon-upload icon-white"></i> <span>Start</span> </button> {% } %}</td> {% } else { %} <td colspan="2"></td> {% } %} <td class="cancel">{% if (!i) { %} <button class="btn btn-warning"> <i class="icon-ban-circle icon-white"></i> <span>Cancel</span> </button> {% } %}</td> <td rowspan="2"></td> </tr> {% } %} </script>main.js:
$('#fileupload').bind('fileuploadsubmit', function (e, data) { data.formData = $('form').serializeArray(); });UploadHandler.php:
-Here is my edit to the post function:
public function post($print_response = true) { if (isset($_REQUEST['_method']) && $_REQUEST['_method'] === 'DELETE') { return $this->delete($print_response); } $upload = isset($_FILES[$this->options['param_name']]) ? $_FILES[$this->options['param_name']] : null; // Parse the Content-Disposition header, if available: $file_name = isset($_SERVER['HTTP_CONTENT_DISPOSITION']) ? rawurldecode(preg_replace( '/(^[^"]+")|("$)/', '', $_SERVER['HTTP_CONTENT_DISPOSITION'] )) : null; // Parse the Content-Range header, which has the following form: // Content-Range: bytes 0-524287/2000000 $content_range = isset($_SERVER['HTTP_CONTENT_RANGE']) ? preg_split('/[^0-9]+/', $_SERVER['HTTP_CONTENT_RANGE']) : null; $size = $content_range ? $content_range[3] : null; $files = array(); // IF THERE ARE MULTIPLE FILES if ($upload && is_array($upload['tmp_name'])) { // param_name is an array identifier like "files[]", // $_FILES is a multi-dimensional array: foreach ($upload['tmp_name'] as $index => $value) { $files[] = $this->handle_file_upload( $upload['tmp_name'][$index], $file_name ? $file_name : $upload['name'][$index], $size ? $size : $upload['size'][$index], $upload['type'][$index], $upload['error'][$index], $index, $content_range, isset($_REQUEST['userID']) ? $_REQUEST['userID'] : null, null ); } } else { // param_name is a single object identifier like "file", // $_FILES is a one-dimensional array: $files[] = $this->handle_file_upload( isset($upload['tmp_name']) ? $upload['tmp_name'] : null, $file_name ? $file_name : (isset($upload['name']) ? $upload['name'] : null), $size ? $size : (isset($upload['size']) ? $upload['size'] : $_SERVER['CONTENT_LENGTH']), isset($upload['type']) ? $upload['type'] : $_SERVER['CONTENT_TYPE'], isset($upload['error']) ? $upload['error'] : null, null, $content_range, isset($_REQUEST['userID']) ? $_REQUEST['userID'] : null, null ); } return $this->generate_response(array('files' => $files), $print_response); }-I added the parameter to handle_file_upload
protected function handle_file_upload($uploaded_file, $name, $size, $type, $error, $index = null, $content_range = null, $userID) {When I try to use $userID I get nothing because it is empty. How can I use the userID from the form? Also in index.php, in the template display area how can I use those added inputs too? For instance, I have an input to changeFilerName and a select to select the category. I've read the documentation, but I'm still not sure how things are being passed to the UploadHandler.
最满意答案
首先，请确保通过查看页面源来在隐藏表单字段中填充$ userID。 隐藏的表单字段需要这样的名称：
<input name="userID" id="userID" ....在PHP端，该输入的值将在$ _POST数组中可用
$_POST['userid']您还应该在浏览器附带的开发人员工具控制台或Firebug之类的工具中观察Ajax请求的请求/响应。
First of all make sure that $userID is populated in the hidden form field by viewing the source of your page. The hidden form field needs a name like this:
<input name="userID" id="userID" ....On the PHP side the value of that input will be available in the $_POST array
$_POST['userid']You should also observe the request / response of the Ajax request in the developer tools console that comes with your browser or a tool like Firebug.
更多推荐
发布评论