I have multiple file upload boxes in a single HTML form and in each file box there is an associated upload button and a div container. Clicking the upload button should upload the respective file via AJAX (jQuery). I revered various questions and blogs where there is always a one file upload with one submit button. But my question here is how to upload the selected file on a click event on a button without submitting the entire form. Is that possible?
I put a mock HTML code and the corresponding jsfiddle also
<form id='parent-form' action='complete.php'>
<div>
<input type='file' name='img1'/>
<input type='button' value='upload' name='btnimg1' />
</div>
<div>
<input type='file' name='img2'/>
<input type='button' value='upload' name='btnimg2' />
</div>
<div>
<input type='file' name='img3'/>
<input type='button' value='upload' name='btnimg3' />
</div>
<br/>
<input type='submit' value='Complete' />
</form>
http://jsfiddle.net/z1bj4v9t/
Uploading files via AJAX is not support in all browsers, but in modern browsers it is possible. You'll need to attach a listener to the buttons next to the file fields, or you can upload multiple images at once.
Take a look at this answer: https://stackoverflow.com/a/20462576/1997303
Well this is a thing:
<form>
<input type="file" multiple>
</form>
In HTML5 compatible browsers, add the "multiple" property to the <input type="file">. A similar question was asked here.
I believe the fallback option is to actually use a Flash (of all things) plugin to force your input to be able to grab multiple files. At least this was how Facebook and others were doing it a couple years ago when I looked it up.
Edit to address your comment:
I might do something like:
$('[name^="btnimg"]').click(function(){
/* AJAX sexiness here */
return false; // IMPORTANT... keeps the main form from submitting
}
Then when submitting the main form, grab the data passed from AJAX uploads.
Related
As part of a class I've been asked to create a simple file upload system that uploads files in a single button to a folder called ./files. I've been able to do this and I have been able to keep it all contained in one a3.php file with this:
<form action="a3.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload" name="submitFile">
</form>
Which opens up a file dialog and only requires the user to press two buttons
I use the following function to run the upload function.
if(isset($_POST['submitFile']))
{
uploadFile();
}
The uploadFile() function simply uses move_uploaded_file to move to file to the ./files folder. Currently without any questions asked.
My issue is that my attempts to make the buttons for the file upload a single one have been stymied. I have attempted to use the following code to resolve the issue:
<form name="frm" action="a3 - Copy.php" method="post" enctype="multipart/form-data">
<input type="file" name="uploadFile" onchange="frm.submit();">
</form>
Which, while it refreshes the page as if an action is being performed, appears to do nothing. I have attempted to look into how exactly .submit() works but haven't gotten any closer to understanding any intricacies it may have while a part of onchange.
I've looked around and I've found code that can upload in a single button, and I've found code that can upload using an internal php function, but none that does both.
You can try using a button but not displaying it. When the file input is changed, using javascript trigger a click on the hidden button, like in the code below:
<form name="frm" action="a3 - Copy.php" method="post" enctype="multipart/form-data">
<input type="submit" name="submitFile" style="display:none" id="submit">
<input type="file" name="uploadFile" onchange="document.getElementById('submit').click()">
</form>
<?php
if(isset($_POST['submitFile']))
{
uploadFile();
}
?>
You're basically looking for an ajax upload. You can do this using javascript (on modern browser), and the easiest thing would probably be using a library like jquery. Otherwise, you can do it using an iframe.
Here are a few similar questions with example scripts-
Using HTML5 file uploads with AJAX and jQuery
jQuery Ajax File Upload
I need little help i am making an upload page, so i have two different forms and two different action
form is ajax picture upload (profile picture of user) its working fine action is action='ajaximage.php'
form is simple user info details like Name,Bio, etc etc. its also working fine.. and its action is action="add.php"
Doubt/Problem
In my website input boxes are not arranged orderly because of the design.
<form id="form" method="post" enctype="multipart/form-data" action='add.php'>
<b>Tittle</b>
<input type="text" name="name">
</form>
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
<input type="file" title="Choose Image" name="photoimg" id="photoimg">
</form>
<form id="form" method="post" enctype="multipart/form-data" action='add.php'>
<b>Description</b>
<textarea name="description" rows="1" cols="1"></textarea>
<button input="submit">Save Changes</button>
</form>
Ajax image uploader is working but in case of add.php it is working only for Description.
I cannot change the design so how can it be solved ?? Please Help
You need one submit button for each form. A submit button will just submit the form it is in.
#bwoebi is right about the submits but I'd be very surprised if your arrangement would work anyway. By my reckoning you have 3 forms. Just using the same name again wouldn't work. A single form needs to be distinct - unless you want to do a whole lot of javascript processing on submit. Have another look at fixing your layout to keep forms together.
Just saw your comments above. Why have separate forms with separate actions anyway? Why not have one form with one action that simply does both the file upload and adds the details (presumably to a database)?
You could also simply have different submit buttons on your form and add an onclick attribute to each setting the action for the form to be different:
<input type="submit" name="sub1" value="Upload Image" onclick="document.myform.action='ajaximage.php';">
<input type="submit" name="sub2" value="Add User" onclick="document.myform.action='add.php';">
This means the form action will be changed depending on which submit button is used .
To upload images via ajax you do not need to submt a form, that is the whole point of doing it via ajax. You can upload the image, and then submit the form for the text inputs.
pseudocode:
<form id="form" method="post" enctype="multipart/form-data" action='add.php'>
<input name="name"/>
<input name="profilePic" id="profilePic"/>
<input name="descrption"/>
</form>
You can then use javascript(I prefer jQuery) to upload your image via ajax, specifying #profilePic.
Also, you should look at: http://blueimp.github.io/jQuery-File-Upload/
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
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Ajax file upload
Is it possible to write an ajax request with JQuery that "submits" a form with a file field? I want to do it because in this way i can make the user upload a file without leaving the current page.
How should i write the $.ajax() call? and in particular how should i set into the ajax call the file field?
EDIT: I'd like to use only core JQuery functions, without plugins.
Thanks.
To maintain compatibility with the widest range of browsers this needs to be done through a hidden iframe.
Here is some sample code to demonstrate what I mean:
<iframe name="my_iframe" id="my_iframe" style="display: none;"></iframe>
<form action="/next_step.php" method="post" target="my_iframe" entype="multipart/form-data">
<input type="file" name="file_upload" />
<input type="button" id="upload_btn" value="Upload file" />
<label for="name">Name</label>
<input type="text" name="name" id="name" />
<input type="submit" value="Next step" />
</form>
<script type="text/javascript">
var btn = document.getElementById('upload_btn');
btn.onclick = function(){
var form_elem = document.forms[0];
// direct file uploads through the hidden iframe
form_elem.action = '/test_file.php';
form_elem.target = 'my_iframe';
// submit the form
form_elem.submit();
};
</script>
There are projects out there that make this easier such as Plupload
It's hard. You're much better to use a service that already exists.
I did this recently on a site because I needed the whole form to submit without reloading the page, and uploadify was the best AJAX file uploader I found.
I try to create an upload progress bar with PHP and jQuery. However, I have a problem when I bring it to the form data. The code is similar like this:
<form method="post" action="upload.php" enctype="multipart/form-data" id="upload-form" target="upload-frame">
Suburb:<input type="text" name="txtSuburb" id="txtSuburb">
Picture:
<input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $uid; ?>">
<input type="file" name="file">
<input type="button" name="submit" value="Upload!">
<iframe id="upload-frame" name="upload-frame">
</iframe>
<input type="submit" name="DataSubmit" value="Submit Data"/>
</form>
As you can see, I got 2 submit buttons. If I keep the form like this then the form can't submit data to server. It just submits the file to iFrame. If I change the action and target of the form then the upload progress function will not work.
Could anyone please help me to find the solution for this?
I want the user can click on upload button to upload their file. Then they can take the rest to fill the form. When everything is done, they can click on another submit data button to submit their data (included the file) to the server.
Make sure that you have only one input element of type submit within your form.
If you want the first button to trigger some Javascript, use a regular input element or even a styled link and attach a Javascript event to it's onclick event, then prevent it's default behavior, e.g. by returning false.
Like this only the second button will actually submit your form which should do what you're describing.
In general I'd second #Treffynnon's suggestion to use a existing library for this purpose. These hacks have a tendency to get pretty nasty, especially when it comes to crossbrowser compatibility.