javascript - 向 Simple Jquery FileUpload 添加附加信息

标签 javascript jquery file-upload

我正在尝试将 juqery fileupload 与 ajax 表单提交集成。 ajax 表单发送文本并返回新创建事件的 ID,这对于知道上传时链接到哪个事件是必要的。 简单的上传演示使用以下代码

这是首先上传非文件字段的ajax

$.ajax({
       type: 'post',
       url: '/whats-on/upload-event/',
       data: JSON.stringify(data),
       contentType: "application/json; charset=utf-8",
       traditional: true,
       success: function (return_data) {
           console.log(return_data)
       }
    });

它返回以下 json

Object {status: true, id: 17162}

但是,文件上传发送文件时没有声明 data: data,

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>

    <input id="fileupload" type="file" data-url="server/php/">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/vendor/jquery.ui.widget.js"></script>
    <script src="js/jquery.iframe-transport.js"></script>
    <script src="js/jquery.fileupload.js"></script>
    <script>
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            done: function (e, data) {
                //Returns ID as e['id'] and 200 status also with e['status']
            }
        });
    });
    </script>
    </body> 
</html>

最佳答案

您首先需要通过 ajax post 获取事件 ID:

function uploadClick(){
   var eventId = getEvent();
   uploadFile(eventId)
}

function getEvent(){
   // make an ajax and return your id
}

一旦您得到它,然后创建一个带有指示 eventId 的查询字符串的 URL。此 URL 是您要发布文件的位置:

function uploadFile(eventId){
    // attatch the id to the URL with query string
    url = url + '&eventId=' + eventId;

    // submit here your file
}

这样你就可以在同一个ajax调用中发布文件本身和事件id。在服务器端操作中,您需要获取此查询字符串,然后选择发布的文件。

关于javascript - 向 Simple Jquery FileUpload 添加附加信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39953840/

相关文章:

javascript - Jquery 点击事件不会使用 Handlebars 模板触发

java - 在jsf 2.2中上传文件

java - 如何使用Struts 2上传后删除文件?

android - 使用 FileBody 上传音频、视频和图像

javascript - 需要折线图下方的颜色纯html和css

javascript - xyz.js.erb 在 Rails 中如何工作?

javascript - 如何检查是否没有选中任何单选按钮?

javascript - Stomp 客户端订阅创建新数组 javascripts

javascript - ajax 将数据从客户端(js)发送到服务器(php)

Javascript GetElementByID 没有值