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?
Related
I'm making a simple site using html and php, this site is suposed to let me upload several files at the same time (Selecting them at once in the upload window which opens when I click on a 'select' button), my page already let me upload one file at once, my code is:
HTML:
<form action="php/cargaxml.php" method="POST" role="form" class="uploadForm" enctype="multipart/form-data" >
<input type="file" name = "test" class = "file">
<input type="submit" value="Carga de archivos" id="boton" class = "btn btn-success btn-lg">
</form>
cargaxml.php:
<?php
$target_path = "/public_html/uploads/carga";
copy($_FILES['test']['tmp_name'], $target_path);
echo "File successfully uploaded!";
?>
When I want to upload a file I click on the button:
Upload button
and the browser shows a window to select a file:
Upload window
but when I use ctrl+click to select several files it just unselect the previous file and let me use only one file, other way I've thought is to select a folder which contains several files and upload them in a massive way, but when I select a folder and click on open it just open the folder and doesn't let me to 'upload' the folder.
How can I do to select several files to upload? My site is hosted on 000webhost.com.
I apologise for my English (Isn't so well), thanks in advance:)
In HTML5 you can set the multiple attribute on . This works in browsers supporting HTML5.
<input type="file" name="test" multiple=""/>
For more Information in upload via Ajax https://www.creativefan.com/10-ajax-jquery-file-uploaders/
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.
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 designing a blogsite where everyone can write blogpost.
I am using ckeditor in the create_post.php but there is a problem:
An user could upload an image through the ckeditor and then could close the create_post.php page. So in this case an image is uploaded on the server but no one will see it because the user close the page before to post it.
Is there a way to a automatically attach images to a post after uploading ?
This is the form:
<form method="post" action="create_post.php" >
<textarea class="ckeditor" name="body" ></textarea>
<input type="submit" value="send" name="submit" />
</form>
Yes, you can use the CKEditor API to insert that image. Check this demo it automatically inserts any image that you add through various methods (drag&drop, paste, toolbar button).
But that doesn't solve your problem at all. The user can still close the page and the image will be stored but will not be used, so you should create some system to track that.
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/