jQuery文件上传:传输POST或会话数据

时间:2013-12-22 21:44:35

标签: php jquery jquery-file-upload image-upload

我正在使用Blueimp Jquery文件上传插件(http://blueimp.github.io/jQuery-File-Upload/)。我无法转移现有会话。所以我知道,第二个Textform是个好主意。但我认为,脚本不是通过标准表格提交的。脚本通过jQuery / json提交。但是POST数据没有出现。

在此处阅读getJSON-Function需要扩展名:Jquery File Upload plugin: Dynamically change upload path?

但我找不到这个功能。有人知道这个功能吗?

以下是Upload-Form,它将数据发送到PHP-UploadHandler。

    <?php
ob_start();
?>
<!DOCTYPE HTML>

<html lang="en">
<head>
<!-- Force latest IE rendering engine or ChromeFrame if installed -->
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta charset="utf-8">
<!-- Bootstrap styles -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link rel="stylesheet" href="/upload/css/jquery.fileupload.css">
</head>
<body>

<div class="container">

    <!-- The fileinput-button span is used to style the file input field as button -->
    <span class="btn btn-success fileinput-button">
        <i class="glyphicon glyphicon-plus"></i>
        <span>Select files...</span>
        <!-- The file input field used as target for the file upload widget -->
        <input id="fileupload" type="file" name="files[]" multiple>
        <input type="hidden" name="sessionuse" value="<? echo $_SESSION['userid'];?>">
    </span>
    <br>
    <br>
    <!-- The global progress bar -->
    <div id="progress" class="progress">
        <div class="progress-bar progress-bar-success"></div>
    </div>
    <!-- The container for the uploaded files -->
    <div id="files" class="files"></div>
    <br>
    <div class="panel panel-default">

    </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>
/*jslint unparam: true */
/*global window, $ */
$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = window.location.hostname === 'blueimp.github.io' ?
                '//jquery-file-upload.appspot.com/' : 'server/php/';
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo('#files');
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
</body> 
</html>
<?php
ob_end_flush();
?>

1 个答案:

答案 0 :(得分:0)

如果您希望将其内容与您的插件一起自动发送,则需要将input嵌入<form>标记。您可以在this fiddle上的控制台中看到差异。

第二种方法是使用上传的文件发送额外数据:formData option