Can I send a file as multipart by XMLHttpRequest to a servlet?
I am making a form and submitting it as multipart, but somehow I am not getting a response for successfully uploading it. I do not want the page to be refreshed, so it has to take place by Ajax.
That's only possible with the XHR FormData API (previously known being part of as "XHR2" or "XHR Level 2", currently known as "XHR Advanced Features").
Given this HTML,
<input type="file" id="myFileField" name="myFile" />
you can upload it as below:
var formData = new FormData();
formData.append("myFile", document.getElementById("myFileField").files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "myServletUrl");
xhr.send(formData);
XHR will take care about proper headers and request body encoding and the file will in this example be available on the server side as form-data part with the name myFile.
You need to keep in mind that FormData API is not supported in older browsers. At caniuse.com you can see that it's currently implemented in Chrome 7+, Firefox 3.5+, Safari 5+, Internet Explorer 10+ and Opera 12+.
In case you're using jQuery, then you might be tempted to use its $.val() function as below:
formData.append("myFile", $("#myFileField").val());
But this is incorrect as it doesn't return the whole File object, but merely the file name as String which is utterly useless as it doesn't contain the file contents.
If you don't want to use document.getElementById() for some reason, then use one of the following instead:
formData.append("myFile", $("#myFileField").prop("files")[0]);
formData.append("myFile", $("#myFileField")[0].files[0]);
An alternative is to use the jQuery Form plugin. Your entire form, when written and functioning properly without any line of JavaScript code, will then instantly be ajaxified with just the following line:
$("#formId").ajaxForm(function(response) {
// Handle Ajax response here.
});
It also supports file uploads as well by a hidden iframe trick. See also this jQuery Form documentation for an in-depth explanation. You may only need to change the servlet code to be able to intercept on both normal (synchronous) and Ajax (asynchronous) requests. See also this answer for a concrete example: Simple calculator with JSP/Servlet and Ajax
Either way, the uploaded file should then be available in the doPost() method of a #MultipartConfig servlet as follows:
Part myFile = request.getPart("myFile");
Or if you're still on Servlet 2.5 or older, use Apache Commons FileUpload the usual way. See also this answer for a concrete example: How can I upload files to a server using JSP/Servlet?
It's not possible to send multipart/form-data with XMLHttpRequest (though it is possible in modern browsers, with XHR2. See BalusC's answer).
A common way to achieve what you want is to use a regular form, but in an iframe instead. This way, only the iframe is refreshed on upload.
Related
I am trying to get the Bitcoin course from a web server.
Then we try it with a JSON from local, it works.
In Firebug, I can see the get request to bitcoincharts.com, but there is no answer.
What's wrong with my code?
$('#LitecoinMenue').append('<p><b>Litecoin: 42</b></p>');
$.getJSON('http://api.bitcoincharts.com/v1/weighted_prices.json',
function(data){
$.each(data.USD, function(index,item){
$('#BitcoinMenue').append('<p><b>Bitcoin:'+ item+'</b></p>');
});
});
The reason your code doesn't work is because of a rule called Same-origin policy. This rule requires that all AJAX requests are made to a file on the same domain name. It is not possible to use $.getJSON, or any other AJAX function to load a file from an external domain.
There are only a few options available, the most common is to create a PHP file to act as a proxy, and store it on the same domain. For example:
proxy.php
<?php
$url = base64_decode($_GET['url']);
return file_get_contents($url);
?>
Your page above
$('#LitecoinMenue').append('<p><b>Litecoin: 42</b></p>');
$.getJSON('proxy.php?url=aHR0cDovL2FwaS5iaXRjb2luY2hhcnRzLmNvbS92MS93ZWlnaHRlZF9wcmljZXMuanNvbg==',
function(data){
$.each(data.USD, function(index,item){
$('#BitcoinMenue').append('<p><b>Bitcoin:'+ item+'</b></p>');
});
});
Important Notes:
This is just an example. In a real life situation you would probably want to use cURL to get your file. You should also ensure that it is secured so that someone cannot use Firebug to send an AJAX request to fetch a big file (like a movie) or your server could crash.
As you can see, the URL is base64 encoded. This is to ensure that it gets processed correctly as sometimes there are issues when passing an unencoded URL as a GET parameter. You can encode and decode base64 strings with these online converters: http://base64encode.org and http://base64decode.org, or you can use the built in PHP functions base64_encode() and base64_decode().
I am trying to write a browser-based Javascript client for a ReST application which responds with XML (so it seems JSONP is out of the questions).
I am trying to retrieve the data using dojo.io.script.get but the parameter that is passed to the callback function is an object from which it seems I cannot retrieve the XML data of the response.
dojo.io.script.get({url:"http://enterpriseapp.enterprisedomain/path/to/rest/collection",
load:function (data) {
// 'data' does not contain the actual response (which is XML)
}
});
What is the correct way to retrieve this data?
The dojo.io.script.get method will inject a <script> from the specified web address. The data content from this script will be passed to your load function; hence, the content must validate as Javascript. You can't load XML into a script tag.
If you want to load XML, you'll need to use dojo.xhrGet; however, this will not allow requests to 3rd party urls. The advantage of using dojo.io.script.get is that you can use different origin address' than the page loading them.
dojo.xhrGet({
handleAs: "xml",
load: function(dom){
// do something with the DOM XML object
},
error: function(error){
}
});
See: dojo.xhrGet Documentation
If you are trying to load the XML from another website it's a bit of a dead-end. You can use the Access-Control-Allow-Origin header if you have access to the sending server.
Another solution that I have used is to write a proxy script (in PHP or other server language) to mirror the XML on the correct domain. You'll need to be careful if you do this to include good checks so that your server code is not abused by someone for proxying.
See the following Stackoverflow conversation for more about Access-Control-Allow-Origin:
jQuery XML REST Access-Control-Allow-Origin
Here is my situation:
Im creating a widget that site admins can embed in their site and the data are stored in my server. So the script basically has to make an ajax request to a php file in my server to update the database. Right? Right :)
The ajax request works excellent when i run it in my local server but it does not work when the php file is on my ONLINE server.
This is the code im using:
var url = "http://www.mydomain.net/ajax_php.php";
var params = "com=ins&id=1&mail=mymail#site.net";
http.async = true;
http.open("POST", url, true);
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
//do my things here
alert( http.responseText );
}
}
http.send(params);
In firebug it shows: http://www.mydomain.net/ajax_php.php 200 OK X 600ms.
When i check the ajax responnseText I always get a Status:0
Now my question is: "Can i do cross-domain ajax requests by default? Might this be a cross-domain ajax problem? Since it works when the requested file resides in my local server but DOESN'T work when the requested file is in another server, im thinking ajax requests to another remote server might be denied? Can you help me clear on this?
Thanks..
Cross-domain requests are not directly allowed. However, there is a commonly-used technique called JSONP that will allow you to avoid this restriction through the use of script tags. Basically, you create a callback function with a known name:
function receiveData(data) {
// ...
}
And then your server wraps JSON data in a function call, like this:
receiveData({"the": "data"});
And you "call" the cross-domain server by adding a script tag to your page. jQuery elegantly wraps all of this up in its ajax function.
Another technique that I've had to use at times is cross-document communication through iframes. You can have one window talk to another, even cross-domain, in a restricted manner through postMessage. Note that only recent browsers have this functionality, so that option is not viable in all cases without resorting to hackery.
You're going to need to have your response sent back to your client via a JSONP call.
What you'll need to do is to have your request for data wrapped in a script tag. Your server will respond with your data wrapped in a function call. By downloading the script as an external resource, your browser will execute the script (just like adding a reference to an external JS file like jQuery) and pass the data to a known JS method. Your JS method will then take the data and do whatever you need to do with it.
Lots of steps involved. Using a library like jQuery provides a lot of support for this.
Hope this helps.
location.href,
using hidden Iframe and setting its source dynamically,
setting return false; for onclick
Nothing is working for IE.
Basically, my dwr response generates a log file (foo.log) #business layer and it sends file name as response to dwr rpc request. Now I know the file name and its location I just want to download that file.(It works in FF not in IE).
To cause a web browser to download a file that it would otherwise display inline, you must have the web server serve it with the header:
Content-Disposition: attachment
Nothing you can do on the client-side with iframes or JavaScript will affect this.
worked for me --
Need to write struts action -
inputStream
application/octet-stream
attachment;filename=${fileName}
2048
and action class
download examples
http://jtute.com/codeDownload.html
Struts 2 Design and Programming: A Tutorial chapter 13 a, 13b will give you idea.
No other way we cant set header types in js. we have to action class which will set above mentioned properties.
Just wondering if there are any good server-side libraries for AJAX (prefer JSON rather then XML but anything is good) for classic ASP (VBScript)...
Rather not reinvent the wheel if it's already working and debugged.
Cheers,
Gaspard
EDIT: Server-side ASP VBScript... I have already seen many javascript client side libraries.
Try jQuery. It's amazing!
I am using ajaxed which seems to be one of the few still maintained ajax libraries for classic asp out there. Its working very well for me. It's using prototypejs as its js lib. JSON is fully supported.
You don't really need a server-side library. Accepting POSTs and GETs from AJAX is the same as accepting them the "old fashioned" way. What is key here are good design patterns.
I commonly use a single function to dispatch my simple Ajax calls in Javascript (I use Prototype):
function fetch(elelment,cmd,id) {
//general purpose AJAX function
$(elelment).innerHTML='Loading...<br /><img src="/images/spinner.gif">'
now = new Date()
url = 'http://..../Ajax.asp?CMD='+cmd+'&ID='+pid+'&now='+now
new Ajax.Updater(elelment, url, { method: 'get' });
}
Then on the server side I typically use a select case, break it down by command, fetch the record by the passed ID, and spit out an HTML fragment. I usually build a function to spit out any JSON I need separately.