从jQuery文件上载中检索formData

时间:2012-12-13 19:50:08

标签: php jquery jquery-plugins

我正忙着尝试在jQuery文件上传插件中提交其他表单数据。这里描述了https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data,但它没有详细介绍如何在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">&nbsp;</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:

- 这是我对帖子功能的编辑:

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。

2 个答案:

答案 0 :(得分:0)

首先,请确保通过查看页面来源,在隐藏表单字段中填充$ userID。隐藏的表单字段需要这样的名称:

<input name="userID" id="userID" ....

在PHP端,该输入的值将在$ _POST数组

中可用
$_POST['userid']

您还应该在浏览器附带的开发人员工具控制台或Firebug等工具中观察Ajax请求的请求/响应。

答案 1 :(得分:0)

尝试使用此插件上传大量文件。 并且它自动支持检测浏览器是否支持html5或flash或java

http://des.delestesoft.com:8080/?go=2