how i can make ajax uploader for images? - html

I need to implement Ajax uploader for image on my website. means when someone upload image i show them without refresh.
don't thing it's impossible like most of blog have a process that when upload a image they open pop-up and when i upload pop-up are closed and image now can seen in old windows i have where i write weblog.
can someone show me example or source code to implement this

you might want to check out:
http://pixeline.be/experiments/jqUploader/test.php
and
http://www.malsup.com/jquery/form/#code-samples
They are pretty neat :) Hope it helps! Cheers!

Most common solution for 'ajax' uploads is actually very simple, namely a hidden iframe. As long as it's within the same domain, you can access the contents and parse the response from it just like you would any other request.
The new XMLHttpRequest, most commonly used within HTML5 applications, is actually capable of transmitting files as well. Right now it's not the most broadly supported method, but depending on your situation it might work as well.
http://www.matlus.com/html5-file-upload-with-progress/

As far as I know.. you can't. This requires a multipart/form-data post and you may only do that with a form. You cannot transmit files asynchronously.
Ajax is an XmlHttpRequest, which does not contain files.

Related

Getting html content from one page and adding it to my website

I have affiliated with expedia and I am using their API system. One of their requirements for launching the site is adding the terms and agreements to my page and they give us this page: http://travel.ian.com/index.jsp?pageName=userAgreement&locale=en_US&cid=xxx. I do not want to go to a different site, and I can not copy and paste the information because of updates. I also prefer not to use an iframe. Does anyone have any ideas on how to do this? Here is a webpage using this on their site with their domain: http://www.helloweekends.com/terms.htm. Does anyone know how they did this? Any help would be greatly appreciated!
Since it originates from another domain, it wouldn't be possible to use JavaScript, due to the same origin policy. Also, relying on JavaScript for the update would be trouble for users who has JavaScript disabled, as they wouldn't see the terms. Since you don't want to use an iframe, or copy the content, I guess your best shot would be to scrape their page with a server-side language of your choice, and then display it on your page.
Scraping can be a bit tricky though, if you rely on their markup. If they change their markup, there is a chance that your script will break, thus stop updating the terms.
There are various tutorials available on how to scrape sites. Here are a few PHP examples:
Web scrape with PHP
PHP Screen Scraping Tutorial
Note Make sure that they allow you to scrape the page prior to implementing it, so that you don't violate their rules.
Do you know if their API serves something with JSON? A JSONP call can get the values to you, but it will make your page rely on javascript for the users to see the updated page.
Another option is to use PHP of any other server side language to get the contents of the url, process it and return the block you require.
I would suggest the load() function offered by jQuery. It makes a simple AJAX call to retrieve a file, and you could even use a selector to only grab part of the page. For example, load the contents of a HTML page into a div:
$('#div_id').load('my_file.html');
Or just load a part of the page:
$('#div_id').load('my_file.html #main_text_id');

Implementing notes option in website

I would like to implement/embed a notes area where people can write some notes on my website.
is this possible with some simple html script? And if yes, does someone know where to find?
Here you can see what I mean: http://bwmbroadcast.org/player/flash?stream=MP4BW489-3A.mp4
Any help would be appreciated.
Thanks
If i were you i would implement a HTML-5 local storage system, http://net.tutsplus.com/tutorials/html-css-techniques/building-persistant-sticky-notes-with-local-storage/
You cannot do this by simply using HTML+CSS.
You have several options:
Use a simple HTML form that submits data to the server and save the notes to a database (you can use PHP and MySQL for this). Form submission can happen through AJAX. This seems to be the right way to me.
Use Javascript and save the notes in a cookie (this way you do not tie it to a user but a browser, I don't recommend this)
Use benhowdle89's solution, you need Javascript for that too, and HTML5 local storage support is not in every browser right now (still, notes will be tied to the browser, so if I visit your site from a different computer/browser, I won't be able to access them).
UPDATE: If you don't want to store notes at all, and only want it for printing, you could check out contenteditable. No need for Javascript here. See: http://html5demos.com/contenteditable

How to upload a file to a website using HTML

I'm developing a website and I'd like the users be able to upload files to the server using a webpage.
The server side is .NET, but it's not ASP.NET. That means, I'm generating the html code myself instead using ASP.NET, and I'm working with the GET string and POST stream directly. It's a good exercise to learn what happens under the hood :D, specially nowadays when there is a framework for everything.
I've been trying to find information about this, but I found several approaches, some of them javascript (thing I want to avoid for the time being) and lots of premade controls. What I want is to do it myself, I don't care if there is a nice, nifty and well-proven ASP.NET control... what I want is understand how it do that with all its implications.
Cheers!
In the HTML you need a form with an input of type="file" and the enctype attribute of the form set to "multipart/form-data" rather than the default of "application/x-www-form-urlencoded".
Multipart/form-data is defined in RFC 2388, and will behave differently to the application/x-www-form-urlencoded you've been parsing with this experiment so far, though it's quite straight-forward. The RFC should give you all you need to know to replicate how the HttpRequest.Files property works in ASP.NET.
An extension of this, try sending streams from XMLHttpRequest in a page or HttpWebRequest in a .NET client application, using both POST and PUT (you may have to change IIS settings to allow the PUT through), as this the overlap of working on that along with your experiments here will cover some knowledge that has some real applicability even when you are using all the toolkits. Another extension is to try implementing both sides of both schemes in RFC2617 without any help from the framework (sometimes the server side of this is genuinely useful).
Kudos for experimenting with this, it should bring real experience to back up what you can learn from reading RFC 2616 (though that's still absolutely vital for anyone doing web stuff to be intimiately familiar with, as reading will cover some cases your experiments don't touch on, and explain anything that seems strange in your results).
I think this should have what you need.
Basically you need an <input type="file"> and to set the encoding of your form to multipart/form-data.
<input type="file" name="somename" size="n">
You put that in a form, and hasta la vista baby !
You can't do a file upload using pure HTML: You will need to handle the uploaded files on server side.
You could parse the uploaded file(s) out of the raw POST data if you want to learn how it works "under the hood" (see here for an example how to do it in ASP), but you will need some kind of server side language to do it.

How to hide precious HTML from user eyes?

I am thinking to create an website that generates HTML through a wizard.Finally, I want to make the users to buy the generated HTML source if they like what they see.
But I don't want to let the users to steal the HTML, CSS and JS that I use to create the effect they want.
I want a technique which is immune to Firebug and Right Click -> View Page Source.
Any thoughts ?
edit: I remember something about iframes or frameset, but I'm not sure how to fool the browser and Firebug to execute the code without updating their capability of showing that source code. A popup is also a possible solution.
edit 2: html hosted in silverlight ? will you use it ?
The best thing you can do is to just obfuscate your code. Trying to hide the source is not going to work (for ex: if you disable right click-> view source that doesn't stop them from using the menu or saving the page or using a shortcut key or writing an app to stream the http request into a file and open that, etc).
Firstly, depending on what you are doing you can have the HTML code loaded through JS after the page load (AJAX).
As far as your JS goes:
Free Obfuscator
Not Free Obfuscator
In the end though, there is no stopping someone who really wants to get that source. Even obfuscated code can be rebuilt (though it's hell on wheels painful depending on how good the obfuscator is).
To really protect the sample HTML from prying eyes, you'd need to render it on the server-side and only pass image data to the client. If you want the user to be able to interact with the sample as if it were a normal Web page, you'll also need to send their pointer and keyboard inputs to the server and update the displayed image when necessary. At that point, though, you're basically making an HTTP-based version of VNC. This is definitely possible, but I don't think it will be easy, and I doubt there are any existing software packages to let you do this. If I were you, I'd rethink my business model a bit.
Sending XSL-templated XML to the browser may be enough fool some, and it will work more or less the same in many modern browsers including IE6 (maybe even 5.5).
But really, trying to hide the HTML code isn't going to work if anyone halfway serious wants to get it.
I am thinking to create an website that generates HTML through a wizard.
Finally, I want to make the users to buy the generated HTML source if they like what they see.
If this is what you need you might consider the possibility of creating a preview of the page as an image, and provide the download of the source only after the user agreed and paid. There is no magic way to let a browser display a code that you can't see.
You can make a video, showing the functionality and upload the same, which may help users to view / feel it.

Detecting an URL that redirects to another location

I need to detect when an URL redirects the browser to another location, including javascript redirects. I thought of using an actual web browser engine with javascript support to achieve this, by loading and interpreting the html from the url and setting some sort of "hook" to be notified whenever the browser changes the address.
Can anyone tell me if that's possible and with what browser engine? Or if there's a better method doing this task?
You can't. There will always be a way around your code. Frames, framebusting, 202 status codes, iframes, ajax content loading, and more.
You can write code that covers most cases, but it won't be 100% effective. What's the reason you're trying to do this? Maybe there's a better solution.