I'm trying to upload image automatically upon selecting an image via file select box submit to php via AJAX then return it's temp folder location to display this in a div element.
There are many other input elements inside the same form and I only want to do this for image preview.
Is there a way we can do this via jQuery AJAX?
I presume you have to use something like onChange event...
Is this correct?
Yep, you will have to do a jQuery.bind() on the change event for this.
I think this is the behaviour you are after:
http://jsfiddle.net/cMEb2/2/
Be aware that for security reasons some browsers are picky about access to the input[type=file] tag, so you may not be able to read (or change) its properties as readily as for other DOM elements. You can read some of these effects in wikipedia.
Asynchronous file uploads are not really something to be desired, because to create a preview, you would need to upload the file in advance.
However, you might want to check this article. It could be of some help:
http://tomas.epineer.se/archives/3
Related
I want to create a simple way to bookmark pages in my PHP app using Javascript.
I have a list of items and each one will have an image (maybe an empty star) which when clicked, will toggle a value in MySQL field for that specific user, (from 0 to 1) and also change the image for that item in the list to bookmarked (likely a full yellow star)
Where do I start?
Here is a quick primer:
you'll need to use javascript to trigger an action when the star is clicked. I suggest you use jQuery.
The action you trigger to do the following:
call the server to tell it the image has been clicked, with the jQuery.ajax() function: http://api.jquery.com/jQuery.ajax/
read the response of the server to make sure the user's preference was recorded (I suggest you use JSON to encode the response from the server, easier to use in JavaScript).
change the image. You can read this: Change the image source on rollover using jQuery
Happy coding
I have a webpage on which contents are also added dynamically using ajax. For example adding images though image and add draggable to it using jquery so they can be dragged.
Now , i want to save the state of webpage after images are added and are made draggable, so if user navigates away from page and again come back to same page using a link, he is able to see his added images and can also drag it.
How this can be achieved using jquery or anything. I dont have a clue about how we can do this. Any pointers to this will be of great help.
I am using php and jquery.
You can use html5 web storage concepts for saving state of your page. sessionStorage would be easiest to implement.
You can find code samples of sessionStorage and other storage types here.
If html5 is not an option then you can use cookies to store the state of page. You can access cookies via Javascript. You can also use jquery plugin jquery-cookie for easy implementation.
You can also find more discussion on How do I set/unset cookie with jQuery?
You can save the state in some hidden field with javascript and access that hidden field through ajax call or post back with server side code (php). Extract the state of page interpret it and save in some persistent medium like database.
I've put together a PHP script and small form which allows the user to upload image files. As it stands at the moment, this is activated as a Pop Up Window via a 'onclick' event of a button on the parent HTML page.
From research I've done on this site, I know that 'Pop Up Windows' aren't to everyones liking, so I'm really asking for a bit of advice to see whether there is an alternative to the Pop Up Window. I've tried the jQuery modal Dialog, and I've run into all sorts of problems because I have multiple submit buttons, so I'd rather not revsit that if at all possible, although the styling of the modal dialog would be along the right lines.
Personally, I'm a fan of JQuery UI Modal dialog because it's lightweight and I'm already loading UI in my apps.
But there's more going on here....the problem isn't the dialog, it's the fact that you're trying to do a file upload in a dialog. The traditional method of uploading a file is via a $_POST. This works just fine, except that your form needs an action, and that action will by default force a load of the page, even if you have it posting to itself. So in practice, if you do uploads the traditional way, no modal dialog will work.
What you're probably looking for is to do the "Ajax" method of file upload. It's not really ajax.....what you'd be doing is uploading to a "hidden" iFrame in the page that facilitates and upload seemingly without reload. Here's a tutorial...there's a million others out there.
There is also a number of jQuery plugins to make uploads easier....Uploadify is just one of them.
Note that even if you use an "asynchronous" method, you're still under the limitations of HTML. Having an upload button or an <input type="submit"> will submit your form, albeit not correctly, making the form seem like it's just failing uncontrollably. So, to combat this, either setup your upload button as another non-form submit element such as an <a> or just an image with an id that you call onclick via javascript. Or, make it a button and use event.preventDefault() onclick to prevent the default HTML behavior. I generally do the latter with jQuery UI button styling.
Why not try a lightbox ? http://en.wikipedia.org/wiki/Lightbox_(JavaScript)
There are various lightbox clones available which you could use with a iframe with a uploader form. Check out a comparison over here: http://planetozh.com/projects/lightbox-clones/
As for as i know this was the very simple and less javascript popup window. This might help you. less javascript popup box
So I have my upload script working just fine, but now it's a matter of making it look the way I want for my layout.
<input type="file" name="userfile" id="userfile"/>
This obviously shows a textbox with a Choose File button. What I really need is my own custom button (which will ultimately be an image) that upon successful file select (not upload quite yet) triggers a jQuery event to show a div. I do NOT want the filename textbox to show.
Basic steps outlined below.
User clicks on image button to upload their file
User selects file
jQuery shows a div with more fields
User clicks submit and file is uploaded
File upload elements are notoriously difficult to access for security reasons. I think the best you can do is attach a handler to the change event of the file upload that displays the div if the file field's value is different from null.
A custom button is out of the question. To get that, you would have to resort to a file upload alternative like Flash-based SWFUpload.
There is a solution for this using jQuery here. It enables you to use an image for the upload button, and with a little customization I believe you could get it to do what you're looking for.
The few solutions to this that I've seen actually hide the upload input field and then display their own custom button. As the mouse moves over this custom button they use a script to reposition the input element beneath the cursor. Quite a lot of work.
Is it possible to reload a form after 'file-input' change?
I have a form where the user can chose an image for upload. I also have a php script which displays that image resized.
I only wonder if it is possible to reload a form OnChange of the file-input and then call the php code which uploads the picture, so that the user can preview it?
Does the php file have to be the same file as in the ? or can I call another php file for the image upload only, with javascript?
NOTE: The user will be able to upload multiple pictures...
Please guide me in the right direction with as much input you can...
UPDATE:
No ajax... can this be done without it? No problem for me if the page reloads, but with the image this time... can it be done?
Thanks
It is possible of course, as with all programming, in most cases if you can think it it is possible.
From what I see you are looking at a form that will update the result of an upload via AJAX. You will need to look at javascript frameworks like jQuery to accomplish this, and you will basically upload the image/resize it, and display it to the user all without a page reload.
Data in the form will be updated with an ajax call coming back from your PHP 'image resizer'
EDIT
Examples of ajax image uploads that may help:
http://www.phpletter.com/Demo/AjaxFileUpload-Demo/
http://pixeline.be/experiments/jqUploader/test.php
You have two issues here.
1) Multiple uploads, so the preview will need to be in a table for each upload. The user will click submit or send and the browser will send it to the server. To do this behind the scenes you will need to find a php script that will help you do this asynchronously.
One I found useful was: http://www.anyexample.com/programming/php/php_ajax_example__asynchronous_file_upload.xml
2) In the iframe response you can then pass back the urls for the thumbnails. This could be the id of each file. The best bet is to create an image tag that calls a php script, which will return the image directly, as a thumbnail.
<img src="/imageview.php?id=3&mode=thumbnail" />
This way you don't have to save the thumbnails, but the user will be able to see it immediately, as you update the src property with the new url.
When you submit the form, the entire page reloads. The only way around this is to put the upload form in an iframe. You cannot upload an image without submitting the form, and you cannot upload a thumbnail of the image, you have to upload the entire image, unless you use flash, silverlight or java.
<input type="file" name="…" onchange="this.form.submit();">
You will need to be smart about tracking which images have been loaded with a given form session and storing a reference to them in hidden inputs.