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.
Related
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
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
Hi guys actually I want to call a function by clicking on open button of browse field of HTML.Is it possible,if yes then provide me information
No. The "Browse" button is not accessible via JS (neither is just the text field next to it).
File uploads fields are very restricted not only regarding JS access - you cannot even style them properly.
Basically there is restriction on browse button, but there is a solution by "onchange" event to call another js function. And you can do as you want, e.g: gmail file upload attachment, and shows all uploaded files and you can deselect each of them, so these type of js operation can be perform by OnChange method.....
and there is a lot of example to do work with browse button.altering on type=file
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.
I have a file field in my form.
I want the user to be able to choose an image, press OK, and then without submitting the form, preview the image in a smaller resized way. If everything is to the satisfactory of the user, then hit submit and the image as well as the form is submitted...
How would you good professionals do this basically?
Thanks
You need to submit at least a form to upload the file and display it. You can simulate an Ajax upload by using an iframe.
You might want to have a look to the following:
http://www.atwebresults.com/php_ajax_image_upload/
I think the best method would be:
The user presses the OK button, an AJAX request is made in the background to submit the form which would upload the image in a temporary location, without the user knowing. The request would return to you the temporary files location.
Then you can display the resized image to the user and if they are satisfied they can choose to submit the form and upload the original image.
Here's an article which also might help you out
When you've uploaded the image once, there's no point uploading it a second time, you may as well keep the copy already on the server, so long as you have some way to tie it back to the form once that's submitted, or removing it if the form is never submitted.
Cleaning up uploaded images is a problem you will have to solve anyway. Once you've uploaded the image, the server will have to keep it around, as the browser will have to request the image in a second request to be able to display it.
I would do this then:
Have a separate form for the image(s), make sure it includes some id field so that you can tie them all together.
Have the image(s) form automatically submit using AJAX as part of an onchange event on the file field.
When the AJAX call succeeds, add an img element to your page to display the uploaded image.
Submit the rest of the form separately.
Cleaning up uploaded images that you don't want (say the user adds a couple of pictures, and then closes the browser without submitting the main form), is a separate issue, and how you deal with it will depend on what sort of application you are developing.
You can use the tag for this.
Basically, you put your upload field to an iframe. When a user uploads an image, the iframe gets reloaded, but not the whole page, at the mean time on the server side you peform resizing.