I want to be able to preview an image for a user before they upload it.
I've of course discovered that all the modern browsers obscure the actual full path in one way or another, so my original plan of just setting an <img /> element with the local path is out of the question.
I've found this solution, which isn't bad, but I'm expecting the images to be a little bit large, and my users' internet connections to perhaps be a little slow, so this isn't exactly ideal.
I've found that FireFox has the getAsDataURL() method, which would work perfectly if there was some form of it in the other browsers, or at least even IE, but I haven't been able to find it.
Is there any other way to do this and have it work in IE7/8 (6 is a bonus but I don't care that much), FF2/3, and webkit without resorting to a plugin?
The answers to the question you have linked tell the truth: There is no way to read files from the user's file system using JavaScript. You will need to upload the image before you can append it to your page as an <img>.
Related
This question already has answers here:
Force a browser to save file as after clicking link [duplicate]
(2 answers)
Closed 7 years ago.
I am trying to get my file, which is in my image folder, to become downloadable. I have simply linked it in my site as
<a href="images/Resume.jpg" download> Resume</a>
I have edited it to this, but is still not working in Internet Explorer, therefore can I have another option available for internet explorer as well.
It's a simple jpeg. When clicked, it opens the page and the picture appears. But I want it to be downloaded the moment it's clicked. Not open in another page to be right clicked saved. Can I do this with java script as the download attribute isn't supported in internet explorer.
Current Knowledge - HMTL5/CSS/ Some JavaScript.
It should look like this:
Resume
You are missing the location. Unless the name of the file you are trying to download is just "Resume" and is in the same location as the page this is being displayed.
FYI, this is a HTML5 feature and is not supported by IE and Safari.
Source:
W3Schools
First off, you would only need download, not download='...'. This, however isn't supported by all browsers, see Force a browser to save file as after clicking link. I don't believe that you can accomplish what you want in pure HTML if your current html5 magic isn't working for you. This link may work for you if you go the .htaccess way - https://css-tricks.com/snippets/htaccess/force-files-to-download-not-open-in-browser/.
As far as I understand the download attribute, you shouldn't need to give a descriptor. So
<a href="images/Resume.jpg" download>Resume</a>
ought to work.
According to w3schools (as of 3/16/15), download isn't supported across all browsers, though, which might be leading to your problem (and a potential problem for folks looking to save your resume in a single click). Right now, it looks like Chrome and Firefox support it, but not IE or Safari.
If I have 5 javascript files and each of different size and same with CSS, is it possible to show "real time" progress bar when scripts/css get downloaded?
I know this can't be possible in HTML4 and would require Flash/Silverlight. But can I achieve this in HTML5? If yes, how would I do it?
I want to show a text like "Downloading" and as each script/css get downloaded real time, each letter of Downloading should start filling up. I am not asking for any code. Just want a high level concept of how that is possible.
Thanks.
Here's what I've been able to come up with; In HTML5 there is a <progress> element that you may be able to use. The bad news is that support for this element isn't as good as it could be. See the support chart here: http://caniuse.com/#search=progress There's no support in Safari 5 and below or IE9 and below. Partial support is in IE10 and any relevant versions of FireFox. If you need more support try a polyfil like this one: http://lea.verou.me/polyfills/progress/
If you choose to use the <progress> element here's a link about how to style it: http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/
Now the trick about making this work, you'll need to know the file size of the file(s) you'll be downloading and the number of bytes downloaded. As the files are being downloaded you'll have to get the header info that tells you how many bytes are transferred. You can see a sample of how to do that with jQuery here: http://markmail.org/message/kmrpk7w3h56tidxs#query:jquery%20ajax%20download%20progress+page:1+mid:kmrpk7w3h56tidxs+state:results
Note that this method will not work with IE. IE does not expose the header data of the XHR object.
At this point set the max attribute of the <progress> element to the total file size and using the setTimeout sample, update the value attribute of the <progress> element.
Knowing all this, maybe finding some kind of package solution with a built-in Flash fallback might be much easier to implement, and have better support. Anyone else have any ideas?
Good luck.
I got an AJAX function that loads a png from a canvas graph element and does (per user choice) open the image in a new browser window or force a download.
While the first works without a problem, I got a problem with adding the file extension to the download. Currently I simply get none, using the following HttpHeaders: image/octet-stream, application/download(force-download, x-download)
Gladly some SO user put a JsFiddle together. 1)
Question: How could I go and append a file extension (.png/.jpeg) to the forced download as seen in the JsFiddle example?
1) Sry, but I don´t know the User name anymore.
Unfortunately, with data uris, it is not possible to supply filenames. You should probably look at the HTML5 BlobBuilder API - http://blogs.msdn.com/b/ie/archive/2012/01/27/creating-files-through-blobbuilder.aspx
Even with BlobBuilder, I've found that only Chrome acknowledges the filenames you supply, not Firefox.
I'm trying to get it so that the clicking the image will play the video underneath. It works absolutely fine in all Mac browsers - here...
http://jsfiddle.net/SparrwHawk/KtbYR/14/
But doesn't work on Windows at all. Maybe it's a Windows security thing, maybe iframes can't have anything underneath? Not sure why this happens. Can anyone offer a work around?
I'm looking to place a still image over a video - the ones that YouTube generate are often blurry, whereas if I place my own over there I can ensure it's of high quality.
Simply add wmode=opaque to the URL params.
Using your code: http://jsfiddle.net/KtbYR/15/
EDIT: See this answer for an explanation
I am sure it's possible to be able to drag files onto a Flash movie inside a browser, but is it possible to achieve the same functionality with Javascript?
I have seen a site (can't remember) that did this, but I never checked if it was a pure Javascript solution compared to a Flash solution.
I am leaning towards the not side, I believe that breaks the limitations of Javascript, although if there is any solution I would love to hear it. My only worry is it won't be supported that well across different browsers.
I don't think it's possible to drag a file into a page as such.
Though some browsers may allow you to drag a file into a file upload input box. If this is the cease, perhaps you could stretch such an input via CSS and make it transparent/overlay on background to provide a "pretty" drop target.
You can do this with ActiveX, though it would only work in IE.. and here is an article describing how to do a drag/drop upload in Firefox http://straxus.javadevelopersjournal.com/creating_a_mozillafirefox_drag_and_drop_file_upload_script_p.htm
There isn't a generic way of doing this that will work for all browsers with javascript - but you could use a java applet like this: http://www.zackgrossbart.com/hackito/2007/11/28/drag-and-drop-file-uploading-made-easy/
The article which shows how to support drag and drop with an applet is at:
http://www.zackgrossbart.com/hackito/dnd-file-uploading
There's another article which shows how to do this with just JavaScript. This requires HTML5, but it works well.
http://www.thecssnin]ja.com/javascript/drag-and-drop-upload