It seems to me if information is already being output to a user by a browser it ought to be accessible in the DOM in some manner via javascript. When you upload a file using a webkit browser (and possibly others) using the good old iframe trick the browser displays an upload percent in the status bar at the bottom of the browser window. It would be pretty amazing to be able to tap into that instead of needing to query the server for that same information. Has anyone ever tried to do so?
I have try something like this. If using old method with iframe for uploading files you can get upload information only if you have APC enable on server side (for php). With javascript the maximum that you can know is the start and the end of the upload (by using iframe onload event). So you can use an animated gif when file upload start and remove the animated gif when it ends (that causes the onload event of the iframe).
Then after upload iframe will contain any errors message of the upload status. You can do some more trick by returning file info as JSON when upload finish.
Related
I have a PhoneGap application in which I need to download certain images for offline usage and show those inside an iframe. Is this possible and do I need something like CorHTTPD (https://github.com/floatinghotpot/cordova-httpd) to serve the assets locally?
I have been trying to store the files on file system but when I try to show those (even without being inside iframe), those doesn't show. They seem to be loaded (can be seen in network console in remote debugging), though, but (of course) without any headers.
After spending more and more time on this and settings GapDebug correctly to remote debug my application, I was finally able to solve my problem by giving
{responseType: "arraybuffer"}
to AngularJS's $http.get method as config parameter as described here. Now I am able to get the images to ArrayBuffer correctly and from there to base64 encode them to be added inside HTML stored offline. Suitable solution for my case at least..
I have a page with a <source> for an HMTL5 video player; I need to obtain its file size.
Is it possible to check the size in MB of a video uploaded on the server from a <source>?
Does the HTML5 API provide some functions for this? Solutions with PHP or JavaScript are both fine.
While the best way to do this would be via a server side script that responds to (say) and Ajax request, reads the size of the file and responds (or depending on how the pages are being generated you could add it as a custom property to the element when you create the page the only way I can think of to answer your specific question would be to load the file itself via an ajax request and check the size of the respond - see Why don't all videos load on page in Chrome? for an example of how to do that
Is it possible to blur a remote image using http://www.blurjs.com?
I have our images hosted on a remote CDN and we want to use blurjs to blur the image for a background effect. When we try and use blur js directly with the remote image javascript cannot read the file and throws a unable to read image data error.
The way i'm currently doing it is regenerating the image in php and then using blurjs, but it is very slow and consumes a lot of resources.
We've tried the css solution too with filters but the browers runs too slow when we do.
does anybody have a solution?
Your problem is that pixel access in canvas is not allowed for images loaded from a different domain than the one the page is hosted on. What you need is a proxy script that runs on your server which that allows your javascript to load images from other domains via your server. Of course the downside is that all traffic will also run through your server and that the time to retrieve the image will increase (since the image has first to be loaded to your server and then to the client) and there is unfortunately no way around that.
The good news is that this is a problem that Flash developers had to face many years ago already so it has been solved many times:
Here's for example a php script: http://www.abdulqabiz.com/blog/archives/2007/05/31/php-proxy-script-for-cross-domain-requests/
Here's a more recent implementation in Node.js http://codelikebozo.com/creating-an-image-proxy-server-in-nodejs
Context:
I setup a photo upload that uses an iframe to upload the image, then that has an optional jCrop step.
the client doesn't want to have to wait for the image to be uploaded. here's what the client said:
"You shouldn't have to wait for anything on the server end.
I don't care if the cropping happens on the server or client.
The interaction for cropping shouldn't wait on upload"
Is the client crazy, or is there some kind of way for me to have the image available for front-end manipulation instantly?
Edit:
TLDR: using a <input type="file"/>, if a user picks an image, can I immediately reference that local file somehow? would that show up as the input's value after change?
I can think of three technics to do a browser based image manipulation possible:
- java applet
- flash
- html5: file api (to read the image) and canvas (to show and manipulate it). But the browser support for the file api is not quite good as far as I know.
I know that most of the media in web pages are temporarily stored to a temp folder or browser cache. Some are directly embedded in web pages so that we can see the source and can save them. But how to save images loaded using any other method?
You can see what I am talking about here. Is there any solution to save images from this site's gallery?
Yes there is a way to save the images by using the followings
1) Mozilla Firefox
2) Firebug
open the net console in it and select the tab named images
in that u can see all the images and save the images
for your reference, I attached a image.
then copy the location by right click and paste the location
and get the image.
~~~~~~ Happy Coding ~~~~~~~~~~~
Generally, js can't hold the image itself. but the Attribute src, a string instead. And js cannot handle the file on client, you can't modify, move, or copy files. So if you want to keep the images, you can send a http header like if-Modified-Since on server side with php or java, then the browser will not load the image again.
May this will help you. Good Luck!
You could try to use a offline browser.
They save whole webpages and deeping on software they catch more or less.
Offline Browsers