I have a PHP file containing a form with a few text fields (Title, description etc.)
One of the fields is Image, where I want the user to either type the address to an image (http://www.domain.com/image.jpg) or upload one.
If the user uploads an image, I store it on my server and want to populate the text field in the form with the address to the file on my server (http://www.mydomain.com/images/image.jpg)
I have tried to solve it by adding an upload button next to the Image text field, which opens a jQuery UI dialog that contains a form with a File field and a Submit button.
It works fine, uploads the image and adds a record in a database table, but I don't know how to populate the Image text field in the first form with the address of the uploaded file.
Can I do it with PHP, should I use jQuery or should I do it in a totally different way ?
Html input type image do not have a text or value property to set. It has a src property which is the image url which it renders. In your case instead of using image input element you can show a span with the updloaded image url as inner text or html once the upload is complete.
Check out move_uploaded_file, put the file wherever and just put the value where you need it. You can use jQuery to change the value of the text field like $('#myfield').val('new_value');.
Related
Here is a situation,in which there are two page one for uploading image and other for displaying the image. on uploading image ,a choose file button is there and on display page ,the uploading image will be shown and a button is also for redirect to the first page ,now i want that when user click on display page (redirect button) then uploaded image in the database will automatically refill in the first page (choose file button).I am trying to feteh the image name and refill in the choose file button but the choose file button shows "No File Selected",how to do that
You cannot 'pre-populate' a FILE input value. (Its a browser security risk)
Its a good practice, to replace file upload inputs with image, and put there delete button. After that, show new, empty file input.
You cant use server path on file input.
Browser's prevent you from doing this, so that files cannot be uploaded without the users interaction.
I have a form that stores text fields to a database. For image upload, I am using Blueimp jQuery File upload.
I'm looking for a good way of combining these, so I can store the image URL to a field in my database.
The jquery variable file.url gives me the URL of the uploaded file (after renaming if another image has same name as uploaded file.
var link = $('<a>')
.attr('target', '_blank')
.prop('href', file.url);
console.log(file.url); // gives: http://localhost/uploads/image.jpg
Can I somehow send this URL to a hidden input field in my form? I'm aware that the image has to be uploaded before I submit form, otherwise the jQuery variable is empty.
Any suggestions?
I suggest you do this in steps. First you ask the main info and then you ask the user for the picture.
If you can't (or simply don't want it to be this way) the easiest way is to set a hidden field with this value.
As an alternative, you can upload this file to a temporary folder or with a specific name that you can associate to the data you are about to send, like an ID or session ID of the user + some unique identifier.
After you send the image via the plugin you will not need to send the image url with the form data, since you will know where it will be and can rename, move and build the url before saving the data to the database.
I have a form our guests use to submit a post to a very simple 'message board'.
Now we want to allow the users to upload 1-10 files, but the concern or requirement is to do this outside of the MAIN form submit.
MAIN FORM consists of:
input field 1
input field 2
text area 1
Submit button
I currently have it so there is an initial browse button.. ( below the text are and to the left of the main submit button) and once a file is picked.. and display a link for the user to add another 'browse' field..
What I would like to do is have an UPLOAD button below all these dynamically created browse/file upload fields... that will send all the file data to an external .php script to upload the files in question, and then just return the file path/name back to the main form (maybe in hidden fields? I dont care).. so that these file path/name string values are submitted when the MAIN FORM is submitted..
hope that make sense.
Is this possible? And if so how do I go about this? The concern is to handle the asset uploading/file handling outside of the main form submission so the users details are not lost if something goes wrong with the file upload portion of things.
You can do this with JQuery and Ajax. There are various plugins are available for this. You can try this - http://plugins.jquery.com/uploadfile/
I have got a simple form which has few fields like name, address, etc and two fields for uploading images and finally two buttons, one for preview and the other is a final submission.
I want to make the form much more user friendly, so that when the user clicks the preview button, I show a small prview and still if the user has to makes some changes in the fields which he has already entered, I want to the show the form echoing all the values which the user has entered.
In case of text field I am just using this piece of PHP code inside the tag to echo the name
<input type="text" name="name" value="<?php echo (isset($_REQUEST['name']) ? $_REQUEST['name'] : ""); ?>" />
and so for other fields in the form.
My question is that how can I echo/show the uploaded file names even after clicking the preview button, which in my case does upload the two images into the specified directory, that is I can see that the uploaded images are stored in the specified directory. In case if the user wants to upload only one image, then he can see the names of the already uploaded images in the output form, so that the user doesnot need to choose both the fields for uploading the images one more time.
I hope I explained it in a understandable way, in case if something is unclear then please let me know.
P.S. A small example would be good to follow.
Regards
Maks
Unfortunately if you're using the file input type you cannot modify their values in any way. This is done for the safety of the user so that you don't specify a default file to upload from the user's system (you could theoretically upload a sensitive file if they didn't change the field from the default).
You could try using a text input field that's read-only and shows the url to the file the user uploaded. An edit button next to this field could create a file upload field and allow them to upload a new file.
I will try to explain the situation as it is a little bit more complicated.
I have created a multiple picture upload form. It works like this:
In the form there are 2 submit buttons. 1 normal HTML submit button and another one is generated by jQuery. It is a "Browse" button which allows you to browse pictures on your HDD and add them to a collection. This is all happening without you actually submitting the form. Pictures are saved via ajax to a temporary table. I am using this plugin for this: http://www.uploadify.com/
I use jQuery to fetch the temporary pictures and display them above the normal submit button so users can see a complete set of pictures they are going to upload before actually submitting the form.
The way I do it is that I have a page which displays temporary pictures and I am useing jQuery get() method to fetch this page and display it in the form.
Now the important part, under every temporary picture there is a text input field so users can enter titles for all pictures they are going to submit.
However, when users hit the form submit button, the text input fields are not submitted because they are just fetched with ajax from a different page.
How can I get to these text fields?
EDIT:
Inside the form I have an empty div:
<div id="temporaryPhotos"></div>
And this is where I am putting all pictures (img tags) and text fields generated with jQuery (which are from a different page on the same website);
If the form's HTML isn't borked, this should work. One solution though is to create a hidden input field in your original form, collect all generated text input fields's values in an array, and put that array in the hidden input field on submit.
Check out serializing with JSON for more info on this.
If your form tag is before the body tag it will not post,
It needs to be:
<html>
<body>
<form>
...my dynamic form content...
</form>
</body>
</html>