bootstrap krajee fileinput 从输入字段上传文本答案

【问题标题】：bootstrap krajee fileinput upload text from input fieldbootstrap krajee fileinput 从输入字段上传文本
【发布时间】：2015-07-21 05:42:41
【问题描述】：

我正在使用 bootstrap krajee 文件输入插件将视频文件上传到服务器。这很好用，但问题是我想用它发送额外的数据，更具体地说是视频名称。这是我的代码：

$(document).ready(function() {
var name = "";
$("#videofile").fileinput({
    uploadUrl: "public/php/videos/upload",
    uploadAsync: true,
    maxFileCount: 1,
    allowedFileExtensions: ["mp4", "avi", "ogg", "wmv", "flv"],
    maxFileSize: 50000,
    elErrorContainer: "#error",
    previewFileType: "video",
    browseLabel: "Select video",
    browseClass: "btn btn-success",
    initialCaption: "upload your videos!",
    uploadExtraData: {videoname: name}
    });
$('#videofile').on('fileuploaded', function(event, data, previewId, index) {
    var form = data.form,
        files = data.files,
        extra = data.extra,
        response = data.response,
        reader = data.reader;
    console.log(response);
});
$('#videofile').on('filepreupload', function() {
    name = $("#videoname").val();
});
})

如果我在uploadExtraData 中发送videoname: "videoname" 可以正常工作，但是当我尝试从输入字段中获取它时，它不会发送任何内容。我在 filepreupload 函数中检查了 name 变量是否正确并且它在上传之前启动。如果有人知道如何解决这个问题，我将非常感谢您的帮助。

【问题讨论】：

标签： javascript twitter-bootstrap plugins

【解决方案1】：

您必须在上传之前将此作为附加输入参数添加。

当您在预览窗口中按下单个文件的上传按钮时会触发此操作：

$('#videofile').on('filepreupload', function(event, data, previewId, index, jqXHR) {
    data.form.append("videoname", "your_video_name_here");
});

这将在您按下上传按钮上传每个选定的文件时触发：

$('#videofile').on('filebatchpreupload', function(event, data, jqXHR) {
    data.form = {"videoname": "your_video_name_here"};
});

根据你的uploadExtraData参数，试试这个：

uploadExtraData: {"videoname": "name"}

如果需要，还可以添加额外的 http 标头：

$("#videofile").fileinput({
    ajaxSettings: {
        beforeSend: function(xhr){xhr.setRequestHeader('new_header', 'new_header_Value');},
    },
});

【讨论】：

【解决方案2】：

我用的和这个一样，但是没用

$('#videofile').on('filebatchpreupload', function(event, data, jqXHR) {
data.form = {"videoname": "your_video_name_here"};
});

你可以用它代替那个

$('#videofile').on('filebatchpreupload', function(event, data, jqXHR) {
data.form.append('videoname',  $("#videoname").val());
};

那么你必须在你的代码的第一个删除它

uploadExtraData: {videoname: name}

【讨论】：

【解决方案3】：

您可以使用您的代码，但需要稍作修改：

$('#videofile').on('filepreupload', function (event, data, previewId, index) {
    data.form.append('videoname', $("#videoname").val());
});

您可以删除“uploadExtraData”，也可以使用它发送任何静态数据。

uploadExtraData: {
'static_variable_1': 'static_value_1',
'static_variable_2': 'static_value_2'
}

【讨论】：