I have this code that helps me to open a file input when I click on an image:
HTML/PHP:
<label for="img-input">
<img src=<?php echo "".$file[$n].""; ?> class="canvas-1">
<div class="alert-success pad-top-bottom text-center"><strong><?php echo basename($file[$n]); ?></strong></div>
</label>
<input type="file" id="img-input">
where "$file[$n]" is the address of the file on the server folder. There is a bunch of image that are rendered on the screen and when I click on one them, the file input opens. That is ok.
What I would like to do is that when I select a image from the file input by clicking on a specific image, The selected image should replace the image I clicked before.
I read many uploading solutions with JQuery but none provided the solution I wanted. Do someone know a way to handle that?
Thanks in advance.
You should use only JS for changing preview of picture in page.
Like this
If you want it to also change on server side then you should use AJAX solution. This solution are more complex, but you can find a lot of tutorials in internet.
Related
View
<form class="m-form" action="<?php echo AURL;?>products/update_product/<?php echo $products['product_id'];?>" method="post" enctype="multipart/form-data">
<input type="file" name="product_image_name" class="form-control m-input dropify" placeholder="" data-default-file="<?php echo Website_Assets.'images/'.$products['product_image_name'];?>" value="<?php $products['product_image_name'];?>" data-max-file-size="2M" required>
</form>
In above code product_image_name not taking any value but showing the image picking the path and when I change image it post the image_name
Controller
public function update_product($product_id)
{
echo "<pre>";
print_r ($_FILES['product_image_name']);
echo "</pre>";
exit();
}
changing the image works ok but if i donot change image its not picking the default value of the image
Short answer: An input of type file can not have a default value.
Instead use an <img />-tag to show default images. For example:
<img src=" <?php echo Website_Assets.'images/'.$products['product_image_name'];?>" />
Normal answer: Assuming you are trying to upload an image, save it to the entity that is behind the form and later edit it; try to think around using just the one field. Instead perhaps a sequence like this:
Upload a file using the upload field
Save the uploaded file on the machine that runs PHP (server-side)
Store the path to the uploaded file in the entity
In the edit view of the entity show both:
the image that was uploaded (or a placeholder)
an upload field to upload a new image
Good luck!
Tip: You might also want to have a look at open source libraries like dropzonejs. Existing libraries often give examples and excellent documentation. This example visually combines the upload field with the display field.
I have form which includes a file upload.After the form is submitted the selected filename is saved in the database.And i have a edit form of saved data.In that form in the file upload button,at the position where shows "no file chosen" i need to echo the saved file form the database.
<div class="col-md-3">
<div class="form-group">
<i class="fa fa-fw fa-cloud-upload"></i>
<label for="">File upload</label>
<?php echo $announcements_details['file'] ; ?>
<input type="file" id="captionfile" name="captionfile"></div>\
</div>
I need echo the $announcements_details['file'] in the no file choose chosen part. Can anyone help me?
It is impossible to do this, due to security reasons. you would be able to select and upload any file from the client to your website.
However, you can display a message below it saying a file has been uploaded. Or you could override the input style using css and display the text that way.
Yes, as Jerodev said it is not possible to takeout the same file in place of the choose file button. But there is a work around for this.
If the uploaded file is an image file, then you could pull up the filename from the database, and display a small thumbnail for the image below the choose upload button.
And if it is any other file, (pdf/txt..etc.), then you could display a link to the file below the choose upload button, so that the users can download the file and see what they have uploaded.
Hope this helps.
Thanks.
I have this Html code and I try to save my record in DB
<div>
<p> Item Name :
<input type = 'text' id = 'ItemName' />
</p>
<p> select Image :
<input type = 'file' id = 'Image' />
</p>
<input type='button' id ='btnSaveItem'>Save </input>
</div>
How can I upload a picture and save it using Jquery and PHP?
I have not been able to find a Jquery method to upload an image, but I need to do without a page refreshing.
Normally you just can't upload images via Ajax, you will need workarounds.
I use this jquery plugin, it's easy to use and you don't need to code almost nothing: http://malsup.com/jquery/form/
Not sure if it's possible, but seems to me like every other jquery post-without-refresh :) Put names in the desired fields, not only id's. Then post to a specific .php page the desired data via jquery, and make your upload logic there. The correspond will be between your jquery and .php page, so no refresh will be done. The text field you can get with the $_POST superarray in php, and the file with $_FILE.
This can be uploading with out refreshing using uploadify,
refer http://www.uploadify.com/demos/
I've recently added an answer for a similar question. Please take a look at this:
Upload image using jquery
It uses $.ajax to upload a file.
I have a button that allows a user to select an image - shown below:
<div id="fileUpload">
<form id="joinPhotoUploadForm" method="POST" enctype="multipart/form-data">
<input type="file" id="file"/>
</form>
<div id="fakefile">
<img src="../../images/button-grey-enhanced.png" id="usePhotoSubmit" alt="BROWSE for Photo">
<span id="usePhoto">BROWSE</span>
</div>
</div>
I then need to upload the image to the server and display the image on the same page without a page refresh. I've tried the following:
$('input#file').change(function() {
$('form#joinPhotoUploadForm').submit();
});
Any advise on how I can get the image upload and displayed on the same page without a page refresh?
thx
You could use the FileReader and File API available in modern browsers to read the file client side before uploading it and display a preview then allow the user upload after they've verified the preview. You can also implement drag and drop with an image from their desktop to the browser instead of a traditional file select input.
Here is a tutorial for it: http://www.html5rocks.com/en/tutorials/file/dndfiles/
In older browsers you can just fall back to a traditional file input with a page reload.
you can try the solution provided in this tutorial
http://www.youtube.com/course?list=EC7C25B2F18F68F3EF&feature=plcp
Have you considered a fancy uploader like Uploadify or Pupload?
now first thing is I've seen everywhere over the net what to do in the case that what I'm trying to do doesn't work, I've tried all of the solutions and they don't work, I'm obviously missing something.
I'm uploading multiple files from a form field. This works perfectly and runs some code that resizes etc deletes tmp files blah blah.
The problem is if I don't want to upload any files the upload and image processing script still runs throwing a bunch of errors.
I've tried the following... plus a bunch more with some weird variations :P
if($_FILES['gallery']['name']!=""){ // if files then...
include_once("gallery_edit_script.php");
}
and
if (count($_FILES["gallery"]["name"] > 0)){ // if files count is more than 0 then...
include_once("gallery_edit_script.php");
}
Would the fact that the gallery_edit_script.php is an include have something to do with it?
I checked the file error with...
$_FILES["gallery"]["error"]
It showed no files were selected to upload which was exactly what I wanted.
Any ideas people?
Thanks for anyone who has a look at this.
Cheers
Added HTML but like I said upload is working fine, it's when I want to post the form and not include files to upload that I want it to skip the gallery script. This is on an edit page, so the user has submitted form, data added to db and files uploaded, then comes back and wants to edit data but not upload files.
HTML (simplified as there are heaps of fields etc)
<form action="inventory_edit_lease.php" enctype="multipart/form-data" name="myForm" id="myForm" method="post">
Gallery Photos <input class="input-file" type="file" name="gallery[]" id="gallery" multiple="multiple" />
<input class="button-edititem" type="submit" name="submit" id="button" value="" onclick="javascript:return validateMyForm();"/>
</form>
Sorry I didn't add HTML first time round, form works so didn't think I really needed it ;)
Few check lists...
Make sure you have named your <input type="file" /> as gallery:
<input type="file" />
Make sure the <form> tag has a method="post" and action="" to the correct URL.
Also, make sure your <form> tag has enctype="multipart/form-data" else you won't be able to upload files via that form!
We need to see the HTML Code of your file before we can suggest something. Make sure you have followed the above checklists and even then if it isn't working, post the code and let us know!
Without HTML form I'm just guessing:
for multiple file uploads with same name you must have the filed as
on server side you will receive them as $_FILES["gallery"]
$_FILES["gallery"] will be an array of elements, eg:
foreach($_FILES["gallery"] as $file){
var_export($file);
}
For those interested this is what worked :)
I got this from another thread if($_FILES['files']['name']!="") run if files, don't run if no files headache
if(!empty($_FILES['gallery']['tmp_name']))
{
include_once("gallery_edit_script.php");
}
else
{
header("Location: inventory_list_sales.php");
}
Funny thing is I tried this with another site I'm working on with almost identical code as I copied all the files and only edited small parts and it doesn't work lol
Thanks for everyone's help :)