javascript - bootstrap krajee fileinput 从输入字段上传文本

Question

我正在使用 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 变量是否正确并且它在上传之前启动。如果有人知道如何解决这个问题，我将不胜感激。

Answer 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 header :

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