I want to have a single button that when clicked opens a file dialogue, and then after the user selects the photo they want to upload and the dialogue closes. I want the photo to upload. I cant think of a way of doing this because in the form you cant use both the type = file and type = submit together. Would I need to use jquery to achieve this? Thanks.
Yes, the idea is to use jQuery for the inital part of having a user pick a file to upload... and then some sort of other, server-side language (like PHP,) will actually do the heavy lifting (by actually uploading the file.)
Here's a jQuery plugin that helps you do this:
http://blueimp.github.com/jQuery-File-Upload/
EDIT:
Yes, I believe with jQuery (or some other library... or plugin,) it would be possible to have an event listener (or something,) pick up when a user browses for a file to upload... and automatically starts to upload it once the file has been chosen. But, again, as was said earlier, it's probably safer to take a two-step approach to file uploads for now.
try this
One-Click Upload is a jQuery plugin that replaces the standard file
input element, allowing you to use any link, image or element to be
used for the purpose of bringing up the "file browse" dialogue. It
completes the upload behind the scenes without refreshing the page,
making it less obtrusive and easier to style than a standard upload
form.
To get the upload started the way you describe you will need to use JavaScript. jQuery is a very good library to use to make that process easier, but it is not required.
Related
I want to make a button generator with javascript in my site, something like this http://css-tricks.com/examples/ButtonMaker/ .
But I want to add a save button too, so that the user will be able to save the button image he creates. I want to save the image in my server with PHP if possible.
Does anyone have an idea, of what should I really read or search for?
Thanks in advance
The button in the example generator is rendered by your browser. It is just a button element which is styled. I don't think you can easily save it using php.
What you could do is create a button generator that accepts parameters and then renders the image serverside (using php) and sends it to the browser for displaying. This rendered image can then easily be saved.
The link you've provided just defines the CSS for the element - you just eed to send this back to the server - via a form or ajax.
One approach would be to send the css settings to your server and execute an html renderer which somehow allows you to save a screenshot of the button.
Googling for "html renderer" yields several results, but I can't tell whether any of them offers an API that allows you to easily save images of desired elements.
(Of course, Firefox and Chrome all count as html renderers too).
In the worst scenario, using my approach, you'd have to render the button server side, take an screenshot and use some algorithm to find and cut the button from the screenshot.
I'd say this is a complicated approach overall. I'd go with what Iljaas' says.
Upload file without form
Yes i used the search button but i just couldn't find the solution i need.
Is there any way to upload a file so that user wouldn't need to press any form buttons?
My first idea was to use CURL but then i remembered that CURL is server sided.
I know it's possible thru Java and/or Flash but is there any way to do that using PHP & OR Javascript?
Edit:
Thanks for clearing this for me but...
But what about PHP based FTP upload?*
No, it isn't. That would have been a huge security hole. Your best bet is really an officially signed(!) Java applet. An unsigned or a manually signed one would still emit scary warnings to the enduser before proceeding.
I have found a solution. Copy does not take local files and the example of submiting the file does not work if it is local. What you have to do is:
file_get_contents("file:///C:\img.jpg")
then write to a text file the contents in the server (for example /uploads/img.txt) and rename to the same extension of the file to see the image.
It really works with any kind of file.
what do you mean without pressing any form buttons ?
well you could do a javascript document.getElementById('FORM_NAME').submit(); if you want some function in javascript to do the upload , where FORM_NAME is the id or your current html form .
but you CAN NOT make your webpage select the file to upload , you have to let the user select the file in an <input type="file"> element .
otherwise use a java applet
I have a classifieds website, and when posting a new ad, users may chose to upload pictures.
Currently, the form on the page submits to itself whenever a file is chosen, and then PHP uploads the actual file, which is then lastly displayed to the user.
I use javascript to set some hidden-inputs on the page, and then submit the form to itself:
if (action!='remove'){
document.getElementById("pic_nr").value=nr;
document.getElementById("total_pics").value=nr;
document.getElementById("pic_action").value='upload';
var form = document.forms['ad'];
form.action='new_ad.php';
form.submit();
}
Then in PHP, it processes and uploads the image (which takes some time) and after its done the image is displayed in the same form.
Now I need to have a progress bar of some kind, which shows the user that the server is actually DOING something.
Because uploading a standard 2,5MB file from a digital-camera takes some time (around 10s), and usually the user doesn't understand that "something is happening" in the background.
Is there any standard reliable, cross-browser solution to add a loading bar with either JS or PHP, or even maybe both combined?
Any tips and ideas are appreciated.
Thanks
This site seems to have a pretty comprehensive list of tutorials with various approaches. JQuery to me would seem to be the best option to go with as it usually is pretty reliable between browsers and platforms.
you could POST the form using AJAX and on firing the form POST load a "loading" spinner on the page until you get a postback with a status from the server.
I'm adding a link to a sample HTML5 script that does it with drag-n-drop...
http://craigslist.fatherstorm.com/dragndrop.php
I have form that uploads file's perfectly, with a post-page-refresh-form.
However I have ajaxiefied the form with jquery's $.post
All of the data except for the file upload is saving nicely.
Is there somthing special I need to do to the form or in jquery to get the upload to work?
Thanks!
You cannot upload with javascript (it would mean granting js file access on your computer, a no go from security standpoint). Uploadify has a nice solution.
First off, I agree with Wrikken about Uloadify being a great solution.
But, yes, Javascript does not have access to upload files. There is a way around this by using Flash, but I would not go through all the trouble to build it yourself when there are other plugins out there that will take care of it all for you.
You can make it "lookalike" AJAX.
Use a hidden iframe and send your form into this iframe, you will be able to observe the onload of the iframe and get a response.
This way gives you also the option for an easy fallback if JS is disabled.
I wud like to use file upload(ajax/javascript with php) in my form that has other controls also.
when i uploaded an img it displays on the same form with delete option.
if i click on submit it goes into folder as well as database &
if i click on delete it deletes an img....
anybody can help me?pls
u knw gmail file upload exact like that
It boils down to "Don't use XHR. Do use Flash or iframes". There are libraries that will do the heavy lifting for you.
Just use jQuery ajax upload plugin http://valums.com/ajax-upload/. It is actually not ajax, it's invisible iframe, but result is almost same.
For server-side you can use php with gd-library and some simple MySQL queries.