Javascript file upload hack, not working on all browsers - javascript

How can I improve the following so it works in multiple browsers?
$('#img').click(function() {
$('input[type=file]').click();
});
So when I click an image it will allow to select a file to upload. On the css I did the following:
input[type="file"]{display:none;}
Tried it on safari 5.1.2 & opera 11.61 and it did not work.... Test it on firefox and ie8 and it worked...

You can't do this with inputs type file in a x-browser compatible way.
Quirksmode, as always, has a lot to say about this topic:
http://www.quirksmode.org/dom/inputfile.html

Related

I can't get some jQuery to work in Safari

So I have problem in jquery for safari browser. Some of my jquery is perfectly working for GC, FF, IE and Opera but then when I tried to test it in Safari my jquery is not working anymore.
My questions is:
Is there any code that I will just paste or add in my website that will enable all my jquery in safari? Currently I'm re-program my jquery because of safari. Any suggestion beside in codes. Already tried to enable the javascript and jquery in safari browser but still not working.
Make sure you have turned on javascript on the safari. I can't see any other reason for it to not work , it is just a javascript file.

How to Draw lines using wz_jsgraphics.js library in IE 7/8/9

I am using wz_jsgraphics.js library to draw lines. It is working with all browser other than IE 7/8/9. Now I want to run it on any IE7/8/9 browser. Please guide me to resolve this problem.
Walter Zorn's wz_jsgraphics.js works fine in IE7, IE8, and IE9 when I use these browsers on four different computers.
Internet Explorer has quite many options. Maybe one of them needs to be changed on your computer. For instance, if you are running jsgraphics offline from an html document on a file, the advanced IE option Allow Active Content To Run From A File (or whatever it is called) must, of course, be checked.

Cross-browser file drag-n-drop solution for JS?

I'm looking for cross-browser desktop file into browser drag example. I've found a few good examples such as jQuery FileDrop and jQuery FileUpload , awesome examples, but I'm not sure they work in Opera or IE. Could you suggest me a really cross-browser solution? Thanks in advance!
For a completely cross-browser file drag drop solution, you would need to go in for a file upload control which uses a browser plug-in like Silverlight or Flash. Here is another SO question on the same lines
Multiple-target cross-browser drag& drop file upload

Drag and drop upload plugin

I want to create a jquery drag and drop file upload plugin or use an existing one.
Unfortunately I cannot find any plugin that does exactly what I want to achieve.
Can someone point me a good place to search or how to start to implement my own file upload plugin?
Thanks.
I need the following functionality:
The one should work perfectly for your needs. I have used it and it is pretty simple to configure and use.
http://valums.com/ajax-upload/
Here are the features
multiple file select, progress-bar in FF, Chrome, Safari
drag-and-drop file select in FF, Chrome
uploads are cancellable
no external dependencies
doesn't use Flash
fully working with https
keyboard support in FF, Chrome, Safari
tested in IE7,8; Firefox 3,3.6,4; Safari4,5; Chrome; Opera10.60;
also, you can try PLUpload (http://plupload.com/)
On that page you'll see that Drag&Drop is supported by HTML5, Gears(from Google) or BrowserPlus.
Note: Drag/drop support of files is currently only available in Firefox and WebKit. Safari on Windows has some strange problems and requires workaround.
In IE and/or Opera, that drag&drop could not work properly as you expected.

Rails image preview across all browsers

Is it possible to preview image (on upload) before saving across all the browsers.
I have implemented this way for Firefox:
document.getElementById("preview-photo").src = what.files[0].getAsDataURL();
this works fine, and, for IE
document.getElementById("preview-photo").src = what.value;
this docent work and same case with other browsers like Chrome and Safari.
Currently I can see preview only in Firefox, other browsers not showing preview.
Please, advise me how to work on this.
Thanks
There's no completely cross-browser way to do this due to security settings in most browsers preventing file control access.
This may indicate a work-around for FF3, IE7, and a handful of other cases:
How to upload preview image before upload through JavaScript

Categories