Our webform has a file upload, and just a regular picture box on it. Now we already have the code to save the pictures and retrieve them, but how would you display the picture they selected without first saving it, then refreshing the page and displaying it? Is this a javascript thing?
Thanks in advance.
Most browsers do not allow this. Filed picked will be submitted with the form, but will not be available to javascript. This is to prevent javascript from having access to local files.
Your best solution is to use AJAX to upload the file, then retrieve it from the server and display it. This solution makes it so the initial view takes longer, but if the user then decides it is the file they want, you can avoid sending it to the server again and just move it from a temporary storage area to a permanent one.
This definitely is not possible with JavaScript. It might be possible with a Flash uploader (but I really don't know Flash). JavaScript does not have any sort of direct access to the host's file system.
On second thought - it might be possible to inject an img tag whose src is a file:// URL. I'm not sure about this, though. Checking now.
Related
Is a very simple page, that have some buttons redirecting to external links. That external links have to change arbitrarely when certain people decides it.
I was wondering about making a login screen in other page and depending which user logs in, set the link writting it in a txt file that would be recovered by the main page. Don't need security so i just would make the user go to the other page and login and that would change the link in a txt file hosted in the same directory that the index.html is.
The problem is that i cannot make that idea (writing a .txt in the project folder) with JavaScript (or i think so), and i don't think that using a database worth it (neither want to because i read that would have to use node.js or something like that and i really don't know those tecnologies, only some python and sql server -that is in fact not supported by my hosting service-), cause are just 3 people associated to 1 link each. I can easily make that task with python but don't know how to call it from JS and neither if Ajax request would be useful for this case.
I hope someone can help me!
edit - the changes have to apply for the page itself not in the user session, so everyone who enters see the page with the changes
edit 2 - absolutely all the info (users and links) are always the same, doesnt change so i can put it in variables, are just 4 or 5 so i can easily use an array, the only thing that i would have to register is which one to pick (since it depends on who decides it).
IT seems you want to use some sort of client side storage across different html pages - for that, you can use cookies, localSotrage or sessionStorage.
I'd like to create an html (with javascript) file where I'd like to add/remove checkboxes at runtime, save them in the html code so that they are available when the file is opened next time. I do not want to use use a server (so no JSP or PHP).
Please tell me whether it is possible just by using javascript? If it is, please point to resources where I can get more information about it.
It is possible using HTML5 local storage or even client database storage. If you don't know whether the browser supports them yet, another possibility is to use persistent cookies.
I'm pretty sure this isn't possible in the way you request solely in javascript in-the browser (javascript cannot write to the source file).
You might have some luck however storing the definition of what checkboxes you've added in localStorage for example, then reload/redraw that same definition on reload of the page.
I'm trying to build a sample bookmarklet to grab current webpage source code and pass it to a validator. Validator is not a an online website, but a folder with bunch of javascript and html files. I'm trying to open file:///C:/Users/Electrifyings/Desktop/Validator/Main.html file with the help of javascript bookmarklet code and put the source code in the textarea in the newly opened window, but it is not working for some reasons that I'm not aware of.
Here is the sample code with algorithm:
javascript:(function(){var t = document.body.innerHTML;window.open('file:///C:/Users/RandomHero/Desktop/test.html',_self);document.getElementById("validator_textarea")=t;})()
Here are the steps:
Grab current web page source code in a variable.
Open locally stored HTML web page in current or new window or new tab (either way is fine with me, but no luck)
Put the source code from the variable into the validator textarea of the newly opened HTML file.
I have tried above code with a lot of variations, but got stuck on the part where it opens the new window. Either it's not opening the new window at all or it is opening blank window without loading the file.
Would love to get some help with this issue, thanks a lot.
Oh and btw,
Windows 7 x64, Tried IE, Firefox and Chrome. All latest and stable builds. I guess it's not a browser side issues, but something related to javascript code not opening the URI with file:/// protocol. Let me know if any more details are needed. :)
You wouldn't want a webpage you visit to be able to open up file://c:/Program Files/Quicken/YourSensitiveTaxInfo right? Because then if you make a mistake and go to a "bad" website (either a sleazy one or a good one that's been compromised by hackers), evil people on the intarweb would suddenly have access to your private info. That would suck.
Browser makers know this, and for that reason they put VERY strict limits to prevent Javascript code from accessing files on a user's local computer. This is what is getting in the way of your plan.
Solutions?
build the whole validator in to the bookmarklet (not likely to work unless it's really small)
put your validator code up on the web somewhere
write a plug-in (because the user has to choose to install a plug-in, they get much more freedom than webpages ... even though for Firefox, Chrome, etc. plug-ins are basically just Javascript)
* * Edit * *
Extra bonus solution, if you don't limit yourself to a purely-client-side implementation:
Have your bookmarklet add a normal (HTML) form to the page.
Also add an iframe to the page (it's ok if you hide it with CSS styling)
Set the form's target attribute to point to the iframe. This will make it so that, when the user submits the form and the server replies back to that submission, the server's reply will go to the (hidden) iframe, instead of replacing the page as it normally would.
Add a file input to your form - you won't be able to access the file within that input using Javascript, but that's ok because your server will be doing the accessing, not your bookmarklet.
Write a server-side script which takes the form submissions, reads the file that came with it, and then parrots that file back as the response. In other words, you'll have a URL that you can POST to, and when it sees a file in the POST's contents, it will respond back with the contents of that file.
Now that you've got all that the user can pick their validator file using the file input, upload it to your server, your server will respond back with the file it just got, and that file will appear as the contents of the iframe.
And now that you finally have the file that you worked so hard to get (inside your iframe) you can do $('#thatIframe').html() and viola, you have access to your file. You can save the current page's source and then replace the whole page with that uploaded file (and then pass the saved page source back to the new validator page), or you can do whatever else you want with the contents of the uploaded validator file.
Of course, if the file doesn't vary from computer to computer, you can make all of that much simpler by just having a server that sends the validator file back; this could be a pure Apache server with no logic whatsoever, as all it would have to do is serve a static file.
Either way though, if you go with this approach and your new file upload script is not on the same server as your starting webpage, you will have a new security problem: cross-domain script limitations. However, these limitations are much less strict than local file access ones, so there are ways to work around them (JSONP, cross-site policy files, etc.). There are already tons of great Stack Overflow posts explaining these techniques, so I won't bother repeating them here.
Hope that helps.
I am stuck at a point where I am getting an image from the server as a binary data and i need to save this image on my PC without any user interference.
Think about it for a moment. If JavaScript could save files to your PC without your explicit consent, every hacker in the world would have access to your PC in a fraction of a second. Flash has enough security problems, JavaScript doesn't need them.
In other words, what you're asking for is impossible for good reason
Maybe the HTML5 File API is something for you. But without user action it would be a huge security hole!
http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side
http://www.w3.org/TR/file-writer-api/#the-filesaver-interface
Why would you want to save something without user consent? That's never a good idea.
Anyways, JavaScript isn't able to mess with your computer's filesystem, thus it can't save the image to your hard drive. You could use JavaScript to create an image on your web page, using img or canvas, and then ask the user to save it, but exactly what you want is not possible with JavaScript.
On your server page, you could create the binary data, and set certain headers to treat the page as downloadable content, and that's about as close as you can get. It'd still ask for user consent, though.
I need to update a pair of old classic asp pages— a search.asp page that provides a simple form which is then posted to a results.asp page. One of the form options on the search page is a drop down list (<select) for the "format". If the user chooses the excel format the results page just sets the Response.ContentType to application/vnd.ms-excel and adds a content-disposition header to set the file name and make it an attachment. That's it: it's up to excel to then correctly render the html, and it generally does a pretty good job.
All that works pretty well, except for one thing. The reason for the Excel option is that in this case the users really do want to see as many as 10,000 items or even more for a single search. They'll use Excel to do some additional analysis on the results. So the search operation typically takes just over a minute and I can't change that.
The user experience during that minute is less than ideal. Not only is the user just sitting there with little to no feedback, but there are often enough results that the page overflows the response buffer. This means the page has to flush periodically, and therefore the file starts downloading right away but the download manager isn't able to provide meaningful feedback by itself. My mission is to improve the situation.
The first step is to just show a simple processing... message on the search page when the form submits, and I can do that easily enough. In fact, it's been doing this already for the "HTML" format option. The problem is that when downloading the Excel file I don't know how to tell anything about the download so I can hide the message again, and the existing implementation doesn't provide any feedback on download progress at all. Any ideas? If I can just get a javascript function to fire when the download completes I can hook just about anything to that, but I can't even do that yet.
Update:
I re-worded the question to try to present the problem more clearly.
As far as I know, browsers don't offer you any hooks as to how far a download has progressed. In theory, you could do something on the server side and use AJAX to query the server to see how much of the download has been sent, but I don't know how to do it.
hmm, would it be possible to do this via ajax maybe? ie, user selects the format, query is sent via ajax, and the appropriate document is loaded into an iframe on search.asp for example. you could then pick up the succesful event in your ajax call and appropriately deal with the messages.
I would recommend looking into modifying your upload method to use something like SWFUpload which allows for JavaScript callback on the code. Once the file is uploaded (assuming you are storing it), I would look into passing the filename and type to your Results.asp page where it would then retrieve it form the file store. It's not as secure as keeping it in memory which you elude to in your question; however, would provide a better user experience and may provide the callback solution you need.
http://swfupload.org/
Here's a jQuery plug in example that makes the upload process and SWFUpload integration easy:
http://blog.codeville.net/2008/11/24/jquery-ajax-uploader-plugin-with-progress-bar/
You could have the file download as an attachment by adding a header, so that the user's browser remains operational. I realize this isn't exactly what you're asking for; but if you combine this with the interstitial page you are using for the HTML version, it might be an improvement for user experience.
Response.AddHeader "Content-Disposition", "attachment; filename=report.xls"
The user would see the interstitial page with the processing graphic which would then re-post the search form. This would allow the "Processing..." graphic to display until the page popped up with a download prompt for the Excel file.
Update: I tried using an iframe, having the page periodically check the document object and trapping the "interface does not exist" error for when it switches to Excel, but it still locks the browser while the Excel document is downloading in the iframe... I don't think a pure js solution is going to work. After that I think the next best avenue to pursue is (unfortunately) Flash. Good luck.