I don't want to use jQuery, but I'd like to use Ajax to do file uploading. Is that possible?
If so, where can I find information/tutorial on it?
No, it isn't possible to do this with javascript.
In order to give the 'AJAX' feel, however, you can submit a form to a hidden iframe and output the script results to it, then process from there. Google ajax iframe upload and get started from there.
If you are using jQuery, there is also the Form plugin which will automatically create this iframe for you if your form has any file fields in it. I haven't used it to do this, but I've heard good things.
As pointed out in the comments, you can also use something like the very popular SWFUpload to accomplish the desired effect with Flash.
Incase anyone is finding this question much later: yes this is possible with JavaScript now.
HTML5 defined 2 new APIs that you use together to accomplish this: Drag and Drop API and the File API. You can use jQuery to interact with the APIs effectively letting people drag and drop files for upload.
Here is a tutorial on how to do it.
The code currently works in Chrome 6+ and Firefox 3.6+, Safari 6 and IE 10. If you need Safari 5 support, the code stays almost exactly the same but you use the FormData object instead for the uploaded file list (more information in the post).
Opera supports the File API as of 11, but not the DnD API, the drop operation does not initiate the upload, but they support you getting access to the file with the API. I imagine in 12 they will finish off support for DnD API.
01-20-14 Update: All the major browsers implement all the standard APIs now so this tutorial works in all browsers.
i use swfupload for multiple ajax-like uploads (its javascript/flash based)
Here's a bit of detail about how gmail does it, using an iframe:
http://www.sajithmr.com/upload-files-like-gmail/
Assuming you are using Java, DWR version 3.0 (currently in RC1) has support for binary file upload/download, which makes the problem trivially easy. I have not had a chance to try this out yet but we use DWR extensively with total success; it is a great Ajax toolkit.
http://directwebremoting.org/blog/joe/2008/12/16/dwr_version_3_0_release_candidate_1.html
Strictly speaking there are possibilities to do real AJAX file uploads, but this is only possible in Firefox 3+, Safari 4 and Chrome 2. In all other browsers you must use a workaround like the iframe technique or a Flash based uploader.
Haven't used it personally, but Ajax Uploader is a component I recently came across which says it can do file uploads inside an UpdatePanel (assuming you're using ASP.NET).
Related
I have implemented an AJAX file uploader in HTML5 using xHR2 and File api for an internal project. We were only required to support Firefox/Safari/Chrome. I used the following links as a reference
http://www.html5rocks.com/en/tutorials/file/xhr2/
http://www.html5rocks.com/en/tutorials/dnd/basics/
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
Now I am required to support Internet Explorer 10 and below. IE 10 supports XHR2 but File API support is lacking. Is there a way to detect that these APIs are not supported? If I can detect that the APIs are not supported, then how do I implement AJAX file upload for IE?
I am using Google Closure JS library not jQuery or any other library. The choice of library cannot be changed. Please use jQuery or some ones to that effect in the response. However, any code snippets that use jQuery are perfectly alright.
probably the easiest way to detect if the File API exists is to
typeof File
In a browser that supports the File API it should return an object or function - Internet Explorer returns undefined
as far as how to fallback and make it work for all users
I've used this tool https://github.com/valums/ajax-upload that creates an iframe and posts the upload to the iframe and emulates an AJAX file upload - its all pure javascript no libraries required and supports all the way back to IE6
Recently I've been working on a file uploader to be used together with google closure library. I found the fine-uploader library a good start. It's not written with the closure library, but it provides me the basic guidelines: uses xhr to upload a file if supported, otherwise fallback to form post into a hidden iframe.
In my code, I implemented two classes: one uses a XMLHttpRequest to upload a file, and the other use goog.net.IframeIo's sendFromForm method to upload a file.
Take a look at the goog.net.iframeIo class in the Google Closure Library. This will take a file input element from a form and post it to an iFrame, giving the equivalent of an AJAX experience, even if it isn't in an actual XHR.
Here's a link to Google's documentation on how to implement it:
https://code.google.com/p/closure-library/source/browse/closure/goog/net/iframeio.js#48
As part of a third level project I am going to attempt to build a web based sound synthesiser using HTML5 and JavaScript.
Does anyone know of any APIs that would allow me to deploy it on all or most browsers?
I have so far seen an API that works with Firefox only and another on GitHub that works with Chrome only.
It would be great to be able to use this in Safari, as with the iPad it could become a stand alone instrument.
Is this feasible?
If you go to http://caniuse.com they will tell you if a technology is supported by Safari or not. Go check it out. Then, any API that you use will tell you what support you will get for it.
I think your best bet might be to do it server side. I would have your app use AJAX to call a server-side script to generate the sound file if it doesn't already exist, then return it's URL so you can use it in JS. Eventually, all the different sound files should be created by the server and named properly allowing you to look them up quickly.
http://mohayonao.github.com/timbre.js/ seems pretty powerful. Pity some of the documentation appears to be in Japanese only!
WebPd is a partial Puredata port to JS - https://github.com/sebpiq/WebPd - it works well with Chrome and Firefox. "It is also a standalone DSP library. Every object as you know it in Pure Data exposes a complete API, allowing developers to control everything with JavaScript."
I have a JavaScript function that loads a flash movie into a webpage div using swfobject.embedSWF().
I want to be able to, alternatively, load a .mov file into the same div, in the event that this is the file found instead of the .swf.
Is there a close equivalent to swfobject.embedSWF for the purposes of embedding a .mov file? If not, what is an efficient route to doing this using JavaScript?
QTObject might do what you need and it's from the same author as SWFObject. It's old though, so I'm not sure if it will work well in modern browsers.
EDIT I searched and found reports of it working fine in IE7, Firefox 2 and Opera 9, so you might just be in luck. Just make sure you test it thoroughly.
I am on the stage where I need to make my website cross-browser compatible.
I need tips on how to get started.
I have developed my website on firefox, so it works great with firefox.
I guess I have to download a couple of versions of all major browsers now, right?
Then just test each browser one by one?
Should I do this before uploading the entire website onto a server or afterwards?
All tips and SW which makes this easier is appreciated.
BTW, it is a classifieds website using MySql, Solr, PHP, js etc...
Thanks
Cross-browser compatibility is best planned for in advance, as there are ways to build your site that will make it much easier.
Consider using a CSS reset script like Eric Meyer's.
Consider using a JavaScript library like jQuery.
You can make use of Adobe BrowserLab to do cross-browser testing.
Consider the mobile audience.
You need to have some kind of local webserver so you can edit the code and test it in a comfortable way. It is also helpful if you make it accessible for validator.w3.org so you can do syntax checking.
Testing it in IE6, 7 and 8, Firefox and Chrome would be a good start I would say.
Since you are working with server side code, you need to have a server.
Once the site goes live you will need both a live and a development server.
Yes, I'd make it cross browser compatible before uploading to the server. The reason for this is that you may need to change the server-side code, adding ids and classes to the markup, plus it may well be necessary to change the markup. Make sure it's working locally first.
IE Tester is very useful for testing on the various IE browsers. I'd ensure that I've tested it on a Webkit browser (such as Chrome), a Gecko Browser (such as Firefox) and Opera. See this list for different browsers.
I'm busy experimenting with TiddlyWiki and trying to get it to run on my Nokia E51, which uses S60v3. The browser is based on webkit, which should mean that I'd be able to get it to work, but no luck so far.
Does anyone have any experience with saving files locally on this platform?
I skimmed through the source of TiddlyWiki. For its file operations it is using the jQuery.twFile plugin which in turn uses a custom Java applet on Webkit-based browsers. The S60 browser does not support java applets so I'm afraid you're out of luck.
I may be wrong here but a quick look at the widget training course on forum Nokia makes it seem like file system access from JavaScript isn't available on S60.
http://www.forum.nokia.com/Tools_Docs_and_Code/Documentation/Web_Technologies/
It really look like you're supposed to retrieve persistent data from the network.
I would hope the web browser cache allows you to query remote data several times while only transfering it once.
On my E51 I am able do download files the old-fashion way: A simple link to a file with a fitting mimetype.