So I know how to do uploading in php, especially images. What I dont know is how to turn a image into a button such that clicking on it allows you to then be presented with an upload dialog that allows you to upload an image (or another file).
The typical way of doing upload input is: <input type="file" name="files[]" multiple />
But how do I take an <img /> and turn it into an image upload button?
I would use javascript for this, the principle is to hide the real file input and "click" it using javascript attached to an image
The input is positioned off the screen, if you hide it (display:none) with CSS, it will stop working in some browsers
<input type="file" class="file-select" name="files[]" style="position:absolute; left:-9999px" />
<img class="file-button" src="https://storage.googleapis.com/cdn.bark.com/qa/b5dc2e3e/a61da61d/3185c5d0/d0bfa4e1/d7d2cff4/dd6dff79/00457b9a/1009914c/6cbe2b57/fb0d89c1/d292ac8a/d6800521/a797a21a/fe1de44a/ef665fad/f1d83fce/thumbnail_529621c60502a.jpeg"/>
Then we simply use javascript to say that when the image is clicked, "click" on the file input:
$('document').ready(function(){
$('.file-button').on('click', function(e){
$('.file-select').click();
e.preventDefault();
});
});
See this JSFiddle for full demo:
http://jsfiddle.net/HhLzD/
Related
Does anyone know of a jQuery-AJAX image uploader, where I can have multiple instances of the form on the same page?
Let me elaborate on my situation! I have a front end page, where a user can change his profile, when the page loads, it loops through all the content-type rows in the database.
I need to apply an image upload form for every type of img.
The problem is, that every plugin I have tried will only allow me to have 1 upload form per page, but I need one for user profile image, one for signature image one for ... as defined by the content elements in the table.
Example:
<form id='upload' method='post' action='script.php?val=profilepic' enctype='multipart/form-data'>
<div id='drop'>
Drop Here
<a>Browse</a>
<input type='file' name='upl' multiple />
</div>
<input style='visibility:hidden' id='".$var2['id']."' value='page_session_weo' />
<ul style='display:none'>
<!-- The file uploads will be shown here -->
</ul>
</form>
<form id='upload' method='post' action='script.php?val=sigpic' enctype='multipart/form-data'>
<div id='drop'>
Drop Here
<a>Browse</a>
<input type='file' name='upl' multiple />
</div>
<input style='visibility:hidden' id='".$var2['id']."' value='page_session_weo' />
<ul style='display:none'>
<!-- The file uploads will be shown here -->
</ul>
</form>
<form id='upload' method='post' action='script.php?val=homepagepic' enctype='multipart/form-data'>
<div id='drop'>
Drop Here
<a>Browse</a>
<input type='file' name='upl' multiple />
</div>
<input style='visibility:hidden' id='".$var2['id']."' value='page_session_weo' />
<ul style='display:none'>
<!-- The file uploads will be shown here -->
</ul>
</form>
Below is the picture to get better understanding of my problem:
Any help or advise would be appreciated.
Yes, you could! I would recommend Uploadify script that works very well. It supports multiple file uploads and multiple instances of the uploader.
Example:
$(function() {
$("#file_upload_1").uploadify({
height : 30,
swf : '/uploadify/uploadify.swf',
uploader : '/uploadify/uploadify.php',
width : 120
});
});
and
$(function() {
$("#file_upload_2").uploadify({
height : 30,
swf : '/uploadify/uploadify.swf',
uploader : '/uploadify/uploadify.php',
width : 120
});
});
In your case your uploader doesn't work simply because you have multiple ids with the same name on the page. It's invalid. Look at the example about, it represents correct idea that you would have to implement using your code or to use the other script to do it!
Important: User Ray Nicholus comments below that the iframe "trick" mentioned in this answer only works in IE9. For all modern browsers, XHR2 (ajax) requests are used to upload the files.
Not sure if this is what you're looking for:
Multiple file upload plugin with progress-bar, drag-and-drop.
The Widen/fine-uploader AJAX file upload plug-in allows users to upload multiple files without having to refresh the page. In addition, you can use any element to trigger the file selection window. The plug-in creates a semi-transparent file input screen over the button you specify, so when a user clicks on the button, the normal file selection window is shown. After the user selects a file, the plug-in submits the form that contains the file input to an iFrame. So it isn’t true AJAX but provides the same user experience.
It has been turned into a commercial product: fineuploader.com
Github project is here
I am developing a social website.In the user registration page,user has the provision to add his photo.I have done this with little effort.My problem is that I want to display the image which has been uploaded by the user to a div,before clicking the submit button at the end of the form.I have searched a lot,but couldn't get the right one.
My html code is like this:
<img src="<?php echo $row_picture;?>" name="picture" class="settingspic" width="75" height="91" alt="profile pic" name="picture"/> Upload</li>
<input type="file" name="file" id="file" style="display:none;" />
My jasvascript code is:
function uploadimg()
{
var uploader = document.getElementById('file');
uploader.click();
return false;
}
You have to make a Ajax call to fetch the uploaded image instantly .
Reference URL => http://www.finalwebsites.com/demos/php_ajax_upload_example.php
Jquery File Upload plugin is the one that you want.
http://blueimp.github.com/jQuery-File-Upload/
this will help because in above plugin as you asked "before submitting form you want to show image in div" this plugin working that way.
try it
here many plugins r present, I guess most of them wil be useful for your project
http://www.jquery4u.com/plugins/10-jquery-ajax-file-uploader-plugins/
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?
Good Day, I have a form with multiple file input fields. I have a script that automatically adds another file input field on change. This is for a image upload functionality ( so that the user can upload multiple images in one go ). In Firefox, it works fine, but it fails on ie8.
this how the form looks like when many images were selected
form.html
<form class="ysForm" action="uploadImage.php" encType="multipart/form-data" method="post">
<input name="ys-file_0" class="ysFile" type="file" multi_selector="[object Object]"/>
<input name="ys-file_1" class="ysFile" type="file" multi_selector="[object Object]"/>
<input name="ys-file_2" class="ysFile" type="file" multi_selector="[object Object]"/>
</form>
uploadImage.php
foreach( $_FILES as $theFile ) {
//do image resize and save to a directory code
}
But uploadImage does not seem to get the image files.
Please help
According to other answers, such as the one here, IE8 doesn't support the multiple option for file inputs.
IE8 doesn't support multiple file uploading with
You can see this info:
IE8 - input (type="file") get files
http://social.msdn.microsoft.com/Forums/en-US/f0e72657-962f-4254-b95c-c47482401899/multiple-file-uploading-in-ie9-and-older-versions?forum=ieextensiondevelopment
Most modern browsers (including IE8) support multiple file uploading with a single dialog. The syntax is
<input type="file" multiple="true" name="upload" />
Your form will call your php script multiple times, once for each image.
That being said, I suggest using Uploadify, http://www.uploadify.com/, as it's a lot easier. There are also some fancy JQuery based solutions.
I have used a input file code to upload image to my wallpaper site..
<input type="file" name="img" id="img" />
Is there anyway to select a image without selecting image file..like entering URL to text box?
<input name="img" type="text" id="img" value="http://www.somesite.com/image.my.jpg" size="40" />
I tried its not working...please help me! Anyway to enter image url to text box except select browse button and selecting image file? help me i tries in different ways...
Is there anyway to user type="text" excepts type="file" so We can enter image url in that text box and upload?
With that <input> you then have to tell your PHP code to go and download that file e.g.
<?php
if (!empty($_POST['img'])) {
file_put_contents('savedImage',file_get_contents($_POST['img']));
}
However doing so opens you up to some potential security issues, so be careful!
I think what you want to do is upload an image and then display that on a page.
You need to move the image into a folder on your webserver then display that output.
More info about it here.