如何向 Blueimp Uploader 提交额外的表单数据？答案

【问题标题】：How to submit additional Form Data to Blueimp Uploader?如何向 Blueimp Uploader 提交额外的表单数据？
【发布时间】：2012-12-13 20:45:44
【问题描述】：

我正在尝试通过 Blueimp jquery 文件上传器向 MYSQL 插入额外的表单数据。但是我有一些问题。

我正在使用演示设置并将模板上传更改为以下代码（* 我添加了 Notunuz 输入）

<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td class="preview"><span class="fade"></span></td>
        <td class="title"><label>Notunuz: <input name="title[]"></label></td>
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label label-important">Hata</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>Başlat</span>
                </button>
            {% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}

    </tr>
{% } %}
</script>

如何获取额外的表单数据？
如何更改.js 和UploadHandler.php 文件？

我的第二个问题是如何重定向到特定的URL上传完成？

【问题讨论】：

第二个 q-n 是简单的添加到 done 处理程序类似 location.href=new_url
how to submit additional form data 来自插件文档....
感谢您的帮助。您如何通过 UploadHandler.php 检索标题服务器端？我需要知道这一点。
print_r($_POST) 你会看到你发送的所有数据

标签： php mysql jquery-ui blueimp

【解决方案1】：

发送额外的FormData有多种方式，

1.静态表单数据（如果表单数据在运行时从未更改）：

使用 , 初始化 FileUpload

 $('#fileupload').fileupload({
         formData: {
            "data1": data1,
            "data2": data2
        }
     });

2.动态表单数据

使用fileuploadsubmit 在提交事件上设置FormData

$('#formData').fileupload({
   .........
}).on('fileuploadsubmit', function (e, data) {
    data.formData = {
         "data1": data1,
         "data2": data2
    };
});

更多详情请看：

【讨论】：

【解决方案2】：

我喜欢，

$('#fileupload').fileupload({
    formData: {example: 'test'}
});

为了更有活力，

 <input type="text" name="name" value="" id="inpName" /> /* example 1 */
 <span id="spnHash" style="display:none">ttt-vvv-hh</span> /* example 2 */
 $('#fileupload').fileupload({
    var $formData = {
        "name": $("#inpName").val(),
        "hash": $("#spnHash").text()
    }
     formData: $formData
 });

对于重定向：

https://github.com/blueimp/jQuery-File-Upload/issues/670#issuecomment-2291997

【讨论】：

【解决方案3】：

    $('#file-upload').fileupload({
      formData: {key: 'value'}
    });

【讨论】：

【解决方案4】：

在文件上传表单中添加一个输入元素，如下所示：

<form id="fileupload" action="/server/php" method="POST" enctype="multipart/form-data">
    <input type="text" name="additional_data" value="your_value" hidden >
</form>

然后在 UploadHandler.php 中，您可以使用 $_REQUEST['additional_data']

例如：

$myData = $_REQUEST['additional_data'];

然后将数据插入mysql：

$conn = new mysqli($servername, $username, $password, $dbname);
$conn->query("INSERT INTO your_tbl(your_field) VALUES ('$myData')");

【讨论】：