天道酬勤,学无止境

Correct content-type for sending this AJAX Post data

I am having problem sending base64 image data using ajax post I think I have the wrong value for Content-Type but have tried application/json, text/json and image/jpeg without any success

Javascript

  function sendFormData(fD)
    {
        var urls = fD.get('urls');
        console.log('urls', urls);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/editsongs.update_artwork');
        alert(urls);
        xhr.setRequestHeader("Content-type", "image/jpeg");
        xhr.send(urls);
    }

Browser console shows

["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUTExMWFhUXGRgbGBgXGR0aGRgXHRgYFx4YGxkYHiogGh4lGxgdIjEhJSkrLi4uGh8zODMtNygtLisBCgoKDg0OGhAQGy0lHSUtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIANEA8QMBIgACEQEDEQH/xAAcAAACAgMBAQAAAAAAAAAAAAAEBQMGAAECBwj/xABGEAACAQIEBAQDBAUJCAIDAAABAhEDIQAEEjEFIkFREzJhcQaBkRRCobEjUsHh8AcVM2JygsLR8RZDRFNzg5KyJDSzw8T/xAAZAQADAQEBAAAAAAAAAAAAAAABAgMABAX/xAAqEQACAgEDBQACAQQDAAAAAAAAAQIRAxIhMQQTFEFRImGRYnGh8AUjMv/aAAwDAQACEQMRAD8AsoosJt9cSpSdeYKYEXxKlQs4E2kEx6dMWJFBEDr0OPey5nCrR58MalwJUpB1nENbJWthpTyQDG5H5Y0gGqNQOJLLXA7h9K9VypGITSPbD+tSGIFy4mSJx0xz7EXjE7UscacNamW30jAlbLsNxiscqZNwoCK4wDEzJjkLiuoQjGNEYnCY5ZcawkMY5bEkY5GGsUijG1XtjcYPyFAQWMbbdsac9Ks0Y2wQphlwTKLUZg2wAwFmq8m5HYY5HFTRph0VnBI1QDZZgsZGwEnHPmn/ANb+lMcVqLFWRafKMTU+L6bRb88V/LcY+0otQKVmbdcbq1wsSYkgDfc7C3fHIoRlDVIs5tSpFzyXEtcdCdvlhopwp4RSpwvcAf64bj0x5mbSpUjrhdbmicSU1xi08djEWylGRjRGOsC5uodl379sBK2F8HbMAJxUON5lqrQFMA4f1CVU62ke2FaZlWqXgAbepx29MtD1VZzZXaol4RwYKsuAWP4…

Java Server code

public String updateArtwork(Request request, Response response)
    {
        System.out.println("Received artwork");

        for(String s:request.queryParams())
        {
            System.out.println("---"+s);
        }
        System.out.println("ReadParms");
        return "";
    }

just outputs

Received artwork
ReadParms

Updated to Send as Form Instead

// Once we got everything, time to retrieve our objects
function sendData()
{
    var fD = new FormData();

    // send Files data directly
    var files = imgList.filter(
        function isFile(obj)
        {
            return obj.type === 'file';
        }
    );

    files.forEach(
        function appendToFD(obj)
        {
            fD.append('files[]', obj.file);
        }
    );

    // for elems, we will need to grab the data from the server
    var elems = imgList.filter(
        function isElem(obj)
        {
            return obj.type === "element";
        }
    );

    var urls = elems.map(
        function grabURL(obj)
        {
            return obj.element.src;
        }
    );

    if (urls.length)
        fD.append('urls', JSON.stringify(urls));

    sendFormData(fD);
};

    function sendFormData(fD)
    {
        // but here we will just log the formData's content
        var files = fD.getAll('files[]');
        console.log('files: ', files);
        var urls = fD.get('urls');
        console.log('urls', urls);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/editsongs.update_artwork');
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(fD);
    }

then on server I have

 public String updateArtwork(Request request, Response response)
    {
        System.out.println("Received artwork");

        for(String s:request.queryParams())
        {
            System.out.println("***"+s);
            System.out.println(request.queryParams(s));
        }
        System.out.println("ReadParms");
        return "";
    }

and its outputs

    Received artwork
    ***-----------------------------330219842643
    Content-Disposition: form-data; name
    "urls"

    ["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMSEhUSExIWFhUXFxgXGBcYFRgXFxkdGBcWGBgYFx0YHSggHR0lHRkYITEhJSkrLi4uFyA1ODMtNygtLisBCgoKDg0OFQ8PFSsZFRkrLSstLSstKysrLS03KystLSstKy03LSstLSstNzc3KysrLS0tKysrKysrKysrKysrK//AABEIAKoBKQMBIgACEQEDEQH...."]
    -----------------------------330219842643--

ReadParms

So I'm now getting the data but I don't understand really understand how to parse the Content-Disposition part in Java.

This code wasn't originally written by me, as you can see the FormData is constructed it doesnt come from an actual form. My first attempt was to try and extract from FormData and send in different way, an alternative would be to not store in FormData in the first place but dont know how to do this.

Update 2 Tried just sending first url rather than formdata or an arrya of urls, because actually there is only ever one url.But it just doesnt work, nothing received by server ?

function sendFormData(urls)
{
    console.log('urls', urls[0]);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/editsongs.update_artwork');
    xhr.setRequestHeader("Content-type", "text/json");
    alert(JSON.stringify(urls[0]));
    xhr.send(JSON.stringify(urls[0]));
}

评论

You are trying to view data in the body using queryParams(), which will give you the query params that are located in the url.

Load data from the request body using body().

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 使用jQuery发送JSON数据(Send JSON data with jQuery)
    问题 为什么下面的代码将发送的数据编码为City=Moscow&Age=25而不是JSON格式? var arr = {City:'Moscow', Age:25}; $.ajax( { url: "Ajax.ashx", type: "POST", data: arr, dataType: 'json', async: false, success: function(msg) { alert(msg); } } ); 回答1 因为您既未指定请求内容类型,也未指定正确的JSON请求。 这是发送JSON请求的正确方法: var arr = { City: 'Moscow', Age: 25 }; $.ajax({ url: 'Ajax.ashx', type: 'POST', data: JSON.stringify(arr), contentType: 'application/json; charset=utf-8', dataType: 'json', async: false, success: function(msg) { alert(msg); } }); 注意事项: 使用JSON.stringify方法将javascript对象转换为JSON字符串,该JSON字符串是本机且内置于现代浏览器中。 如果要支持较旧的浏览器,则可能需要包含json2.js
  • php 消息警告:在第 0 行未知的多部分/表单数据 POST 数据中缺少边界(php message Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0)
    问题 这是我的javascript function ajax_post(){ // Create our XMLHttpRequest object var hr = new XMLHttpRequest(); // Create some variables we need to send to our PHP file var url = "LiveUpdate.php"; var sb = document.getElementById("LiveUpdate").value; var FirstName = document.getElementById("FirstName").value; var images = document.getElementById("images").value; var vars = "update="+sb+"&FirstName="+FirstName+"&images="+images; hr.open("POST", url, true); // Set content type header information for sending url encoded variables in the request hr.setRequestHeader("Content-type", "multipart/form-data"
  • AngularJS的多部分请求(Multipart request with AngularJS)
    问题 我有一个API端点,必须向其发送多部分HTTP请求,该请求由file (文件系统文件)和data (JSON对象)两部分组成。 经过一些研究,我发现了如何在AngularJS中执行多部分请求: $http({ method: 'POST', url: url, headers: { 'Content-Type': 'multipart/form-data' }, data: { data: model, file: file }, transformRequest: customFormDataObject }); 1) customFormDataObject函数最初具有以下形式: customFormDataObject formDataObject = function (data, headersGetter) { var fd = new FormData(); angular.forEach(data, function (value, key) { fd.append(key, value); }); var headers = headersGetter(); delete headers['Content-Type']; return fd; }; 此实现的结果是,请求的各个部分没有为其设置contentType 。 2)阅读更多内容(https:/
  • 通过ajax调用php下载文件(Download file through an ajax call php)
    问题 我有一个按钮, onclick它会调用ajax函数。 这是我的ajax功能 function csv(){ ajaxRequest = ajax();//ajax() is function that has all the XML HTTP Requests postdata = "data=" + document.getElementById("id").value; ajaxRequest.onreadystatechange = function(){ var ajaxDisplay = document.getElementById('ajaxDiv'); if(ajaxRequest.readyState == 4 && ajaxRequest.status==200){ ajaxDisplay.innerHTML = ajaxRequest.responseText; } } ajaxRequest.open("POST","csv.php",false); ajaxRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); ajaxRequest.send(postdata); } 我根据用户输入创建csv文件。 创建之后,我希望它提示下载或强制下载(最好是强制
  • 将序列化表格数据和其他数据发布到MVC控制器?(Posting serialized form data AND additional data to MVC controller?)
    问题 我正在尝试处理发送到我的服务器的POST请求的一些其他数据。 最初,我只是发送几种形式的信息: $.ajax({ url: 'SaveAllDetails', type: 'POST', data: $('form').serialize(), dataType: 'json' }); 和MVC Controller方法: [HttpPost] public ActionResult SaveAllDetails([Bind(Prefix = "order")]ExistingOrderDetailsModel existingOrderDetailsModel, [Bind(Prefix = "task")]ExistingTaskDetailsModel existingTaskDetailsModel, [Bind(Prefix = "device")]DeviceDetailsModel deviceDetailsModel) { .... } 这很好。 MVC的模型绑定程序能够正确反序列化URL编码的字符串。 现在,要求已更改。 我需要发送额外的数据数组以及三种形式。 该数据数组不保存在表单中,并且没有绑定前缀。 我需要在同一Controller方法中完成所有操作,因为所有验证都需要在单个事务内执行。 因此,我现在得到: var
  • 如何将json对象数组发布到Web API(how to post json object array to a web api)
    问题 如何将JSON数组发布到Web API? 它适用于单个对象。 这是我尝试过的方法,但是控制器似乎返回0而不是预期的3 。 这是我的JSON: var sc = [{ "ID": "5", "Patient_ID": "271655b8-c64d-4061-86fc-0d990935316a", "Table_ID": "Allergy_Trns", "Checksum": "-475090533", "LastModified": "2015-01-22T20:08:52.013" }, { "ID": "5", "Patient_ID": "271655b8-c64d-4061-86fc-0d990935316a", "Table_ID": "Allergy_Trns", "Checksum": "-475090533", "LastModified": "2015-01-22T20:08:52.013" }, { "ID": "5", "Patient_ID": "271655b8-c64d-4061-86fc-0d990935316a", "Table_ID": "Allergy_Trns", "Checksum": "-475090533", "LastModified": "2015-01-22T20:08:52.013" }]; AJAX通话: $.ajax({
  • 使用 FormData 和 multer 上传文件(Uploading a file with FormData and multer)
    问题 我通过使用输入文件对话框选择文件然后提交表单,成功地使用multer模块将文件上传到节点服务器,但现在我需要创建一个FormData对象,而不是提交表单,并使用XMLHttpRequest发送文件,但它不起作用,该文件在服务器端(路由器)始终undefined 。 执行 AJAX 请求的函数是: function uploadFile(fileToUpload, url) { var form_data = new FormData(); form_data.append('track', fileToUpload, fileToUpload.name); // This function simply creates an XMLHttpRequest object // Opens the connection and sends form_data doJSONRequest("POST", "/tracks/upload", null, form_data, function(d) { console.log(d); }) } 请注意fileToUpload已定义并且url是正确的,因为调用了正确的路由器方法。 fileToUpload是一个File对象,它通过将文件从文件系统拖放到拖放区,然后访问拖放事件的dataTransfer属性而获得。
  • 如何使用超级代理发送文件(How to send files with superagent)
    问题 所以大约一个月前,我问了一个关于超级代理和发送文件的问题,但根本没有得到回应。 我仍然想知道如何做到这一点,因为我喜欢使用超级代理。 我可以使用普通的ajax发送文件: var fd = new FormData(); fd.append( 'file', this.refs.File.getDOMNode().files[0] ); $.ajax({ url: 'http://localhost:8080/files', data: fd, processData: false, contentType: false, type: 'POST', success: function(data){ console.log(data) } }); 但是当我在 superagent 中尝试同样的事情时,没有任何效果: var fd = new FormData(); fd.append( 'file', this.refs.File.getDOMNode().files[0] ); Request.post('http://localhost:8080/files') .set('Content-Type', false) .set('Process-Data', false) .attach('file', fd, 'file') .end((err, res) => {
  • 如何发送正确的授权标头以进行基本身份验证(How to send a correct authorization header for basic authentication)
    问题 我正在尝试从我的API发布数据,但是我无法通过基本身份验证。 我尝试: $.ajax({ type: 'POST', url: http://theappurl.com/api/v1/method/, data: {}, crossDomain: true, beforeSend: function(xhr) { xhr.setRequestHeader('Authorization', 'Basic [REDACTED]'); } }); 我的服务器配置响应是: response["Access-Control-Allow-Origin"] = "*" response["Access-Control-Allow-Methods"] = "POST" response["Access-Control-Max-Age"] = "1000" response["Access-Control-Allow-Headers"] = "*" 我得到的标题是: 请求标题 OPTIONS /api/v1/token-auth/ HTTP/1.1 Host: theappurl.com Connection: keep-alive Access-Control-Request-Method: POST Origin: http://127.0.0.1:8080 User-Agent
  • 处理从ajax帖子下载的文件(Handle file download from ajax post)
    问题 我有一个JavaScript应用程序,可将ajax POST请求发送到某个URL。 响应可能是JSON字符串,也可能是文件(作为附件)。 我可以轻松地在ajax调用中检测Content-Type和Content-Disposition,但是一旦检测到响应包含文件,如何为客户端提供下载文件? 我在这里阅读了许多类似的主题,但是没有一个主题能提供我想要的答案。 拜托,拜托,请不要发布暗示我不应该为此使用ajax或重定向浏览器的答案,因为这都不是选项。 也不能使用纯HTML表单。 我需要做的是向客户端显示一个下载对话框。 能做到吗?如何做到? 回答1 创建表单,使用POST方法,提交表单-无需iframe。 当服务器页面响应请求时,为文件的mime类型写一个响应头,它将显示一个下载对话框-我已经做过多次了。 您想要内容类型的应用程序/下载-只是搜索如何为所使用的任何语言提供下载。 回答2 不要这么快就放弃,因为这可以使用FileAPI的一部分来完成(在现代浏览器中): var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.responseType = 'blob'; xhr.onload = function () { if (this.status === 200) { var blob = this
  • $_POST 在 ajax 表单提交中不起作用?($_POST is not working in ajax form submit?)
    问题 当我尝试通过 ajax 表单提交检查用户输入名称是否已经存在时!但它只得到Undefined index: username in sessions.php ,缺少什么? <form action="" method="POST" id="saveuser" enctype="multipart/form-data"> <input type="text" name="username"><br> <input type="password" name="pass"><br> <input type="file" name="fileupload"><br> <input type="submit" name="submit" value="Confirm" id="confirm"> </form> <script type="text/javascript"> $('#confirm').click(function(e){ e.preventDefault(); $.ajax({ type:'POST', url :"sessions.php", data:$("#saveuser").serialize(), contentType : false, processData: false, success: function(d){ console.log(d);//
  • How to send a correct authorization header for basic authentication
    I am trying to POST data from my API but I can't pass the basic authentication. I try: $.ajax({ type: 'POST', url: http://theappurl.com/api/v1/method/, data: {}, crossDomain: true, beforeSend: function(xhr) { xhr.setRequestHeader('Authorization', 'Basic [REDACTED]'); } }); My server configuration response is: response["Access-Control-Allow-Origin"] = "*" response["Access-Control-Allow-Methods"] = "POST" response["Access-Control-Max-Age"] = "1000" response["Access-Control-Allow-Headers"] = "*" The headers that I get is: Request Headers OPTIONS /api/v1/token-auth/ HTTP/1.1 Host: theappurl.com
  • Angular $http.post 返回空错误(Angular $http.post returnd empty error)
    问题 我正在使用 angular JS 将一些数据发送到 nodejs 服务器。 当我使用 curl 时,我会取回我发送的数据(正确的结果): curl -d '{"MyKey":"My Value"}' -H "Content-Type: application/json" 'http://127.0.0.1:3000/s?table=register_rings&uid=1' > {"MyKey":"My Value"} 但是,当我使用 angularjs 服务时,发生错误。 .factory('RegisterRingsService', function($http, $q) { // send POST request with data and alert received function send(data, uid) { $http({ method: 'POST', url: 'http://127.0.0.1:3000/s?table=register_rings&uid=1', data: '{"MyKey":"My Value"}', headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin":"*"}, responseType: 'json' })
  • send mail (mail to php Post method) using Ajax and jQuery
    i'm sending mail from my html page by executing a Php function, my index.html : <form method="POST" action="sendmail.php" > <input type="text" name="sender_name" placeholder="Name" required=""> <input type="text" name="sender_email" placeholder="Email" required=""> <input type="text" name="subject" placeholder="Subject" required=""> <textarea placeholder="Message" name="message" required=""></textarea> <input type="submit" name="send" value="SEND"> </form> my sendmail.php: <?php if($_POST['send'] == 'SEND'){ $to = 'queries@mydomain.com'; $subject = $_POST['subject']; $message = $_POST['message
  • 带有contentType的Ajax调用:'application / json'不起作用(Ajax call with contentType: 'application/json' not working)
    问题 我有一个ajax调用,它将表单数据发送到php函数。 因为我读到很多内容,所以使用contentType: 'application/json'是最佳实践,所以我也想尝试一下。 但不幸的是,我的脚本在使用时不返回任何内容。 如果删除它,脚本将执行应做的事情。 您知道原因可能是什么以及为什么吗? 谢谢! $('#Form').submit(function(e) { e.preventDefault(); var content = $(this).serialize() + "&ajax=1"; $.ajax('app/class/controller/contactForm.php', { type: "POST", //contentType: 'application/json', dataType: 'json', data: content, success: function(result) { console.log(result); } }); }) 和我的PHP: if(isset($_POST['ajax']) && $_POST['ajax'] === '1') { echo json_encode(validateForm($_POST)); } 回答1 当使用contentType: 'application/json'您将不能依靠$
  • jQuery AJAX通过JSON返回对PHP脚本的调用(jQuery AJAX Call to PHP Script with JSON Return)
    问题 我一直在用这个把头砸在砖墙上,我已经在stackoverflow上尝试了很多解决方案,但是找不到一个可行的解决方案! 基本上,当我发布我的AJAX时,PHP返回JSON,但是AJAX显示的是Undefined而不是值: JS : /* attach a submit handler to the form */ $("#group").submit(function(event) { /* stop form from submitting normally */ event.preventDefault(); /*clear result div*/ $("#result").html(''); /* get some values from elements on the page: */ var val = $(this).serialize(); /* Send the data using post and put the results in a div */ $.ajax({ url: "inc/group.ajax.php", type: "post", data: val, datatype: 'json', success: function(data){ $('#result').html(data.status +':' + data.message)
  • 通过JavaScript提交带有文件上传的Ajax请求(Submit ajax request with file upload via JavaScript)
    问题 我有一个可以通过form.submit()提交的表单,响应正确。 现在,我想使用ajax提交它,但是提交文件时遇到问题。 表格非常简单: <form name="Upload" enctype="multipart/form-data" method="post" action="upload.asp"> <input type="file" name="file" id="fileinput"/> <input type="button" name="FileUpload" class="button" id="append_new" onclick="xmlhttpPost('upload.asp', document.getElementById('fileinput').files[0]);" value="submit file"/> </form> 我收到了如下的ajax调用: function xmlhttpPost(strURL, form) { var xmlHttpReq = false; var self = this; // Mozilla/Safari if (window.XMLHttpRequest) { self.xmlHttpReq = new XMLHttpRequest(); } // IE else if (window
  • JavaScript Ajax请求与jQuery $ .ajax(JavaScript Ajax request vs jQuery $.ajax)
    问题 注意:我粘贴的代码不仅仅是ajax调用,以免代码是(导致)问题的一部分。 但是,我不认为这是对的,因此您最好将jAjax集中在ajax和jAjax函数上。 还要注意,由于对此问题有一个评论(带有否决权),说我的代码很难解密,所以我很乐意澄清需要澄清的内容,如果这可以证明是找到问题的关键。 谢谢。 这是东西。 我正在尝试抛弃jQuery,因为我唯一使用的是$.ajax()方法,而包括jQuery之类的整个库仅具有一项功能便令IMO疯狂。 无论如何,我什至不需要$.ajax方法的全部功能,因此我编写了自己的ajax函数。 问题是:它不起作用,而且我似乎无法弄清楚原因。 我正在尝试将对象发送到服务器(特别是:控制器中的ajaxAction-使用Zend FW)。 以下是javascript代码,以及Firebug控制台告诉我的内容的摘要。 if (!String.prototype.trim) { String.prototype.trim = function() { "use strict"; return this.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); }; } function getUrl(action,controller) { var base,uri; base = window.location.href
  • 将JSON数据从JQuery发送到WCF REST方法时出现问题(Problem sending JSON data from JQuery to WCF REST method)
    问题 我在让jquery将一些json数据发布到我在WCF服务上拥有的rest方法时遇到麻烦。 在WCF方面,这是运营合同: [OperationContract] [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "PostSomething")] MyResult PostSomething(MyRequest request); MyResult和MyRequest都标记有所有必需的DataContract和DataMember属性,并且服务正在公开WebHttp端点。 在JQuery端,这是我的函数调用: var jsonStr = JSON.stringify(reqObj); $.ajax({ type: "POST", dataType: "json", url: "http://localhost/MyService/PostSomething", contentType: "application/json; charset=utf-8", data: jsonStr, success
  • jQuery AJAX调用导致错误状态403(jQuery AJAX call results in error status 403)
    问题 我正在使用jQuery AJAX对Web服务进行查询。 我的查询如下所示: var serviceEndpoint = 'http://example.com/object/details?version=1.1'; $.ajax({ type: 'GET', url: serviceEndpoint, dataType: 'jsonp', contentType: 'jsonp', headers: { 'api-key':'myKey' }, success: onSuccess, error: onFailure }); 执行此操作时,出现状态错误403。我不理解为什么我的呼叫导致状态代码为403。我控制着我的服务的安全性,并将其标记为完全开放。 我知道密钥是有效的,因为我在另一个可以正常使用的电话中使用了它。 这是有效的呼叫: var endpoint = 'http://example.com/object/data/item?version=1.1'; $.ajax({ type: 'POST', url: endpoint, cache: 'false', contentType:'application/json', headers: { 'api-key':'myKey', 'Content-Type':'application/json' }, data