i have a simple form:
<input type="hidden" name="MAX_FILE_SIZE" value="2097152" id="MAX_FILE_SIZE">
<input type="file" name="file_upload" id="file_upload" class="picture_main">
<input type="submit" name="upload_picture" id="upload_picture" value="Submit">
i am trying to to an ajax upload:
submit.on("click", function(){
var file = $('#file_upload').val();
uploadImageAjax(file);
return false;
});
var uploadmageAjax = function(file)
{
$.ajax({
type: "POST",
url: "/test/index/imageupload",
data: {
'file': file
},
dataType: "json",
success: function (data) {
console.log(data);
}
});
}
what i get back is, for example, file: "C:\fakepath\weirdan003-10.jpeg"
but im not sure what that fakepath is !?
if i were to do it in php only i would get the image like this:
if (isset($_POST['upload_picture']) ) {
$data = $formImageUpload->getValues();
$pictureName = $data['picture'];
....
and then upload it.
So what i want to figure out is if the ajax call POST's to that action the right file so i can then upload it to the disk.
will $('#file_upload').val(); hold the $_FILE??
any ideas?
thanks
var file = $('#file_upload').val();
This will return only a path to file on client machine. for securit reason it is returned like c:\fakepath\file_name.ext. If I remember correctly, in some older browsers it was possible to get a real path. But still, it does not helps you to get a file on server.
For ajax style upload you can use some of plugins you got recommended. Or just use jQuery Forms plugin. It will work very similar to $.ajax.
Now, when file is uploaded correctly, you will find all required info about it in $_FILES
In your case it will be something like $_FILES['file_upload'] where 'file_upload' is a name of your file input.
Now you can move it from temporary storage with move_uploaded_file. And do whatever you want with that file
EDIT:
And I see you are using Zend. Take a look at this about how to work with FileUpload element on the server side. With Zend you may use FileUpload methods instead of move_uploaded_file
jQuery ajax does not support asynchronous file uploads. See jQuery upload file using jQuery's ajax method (without plugins).
If you want to use ajax file upload, it is recommended to implement plugins:
http://valums.com/ajax-upload/ (is my favorite)
http://www.webdeveloperjuice.com/2010/02/13/7-trusted-ajax-file-upload-plugins-using-jquery/ lists several more
For client side, I suggest you to use a plugin.
http://blueimp.github.com/jQuery-File-Upload/
http://valums.com/ajax-upload/
For server side, you will need to handle it to read from the stream. I think there is a full example (client and server side) on valums git.
Related
I'm trying to upload a file send in a form. I'm trying it with php, but between html and php I use JS and Jquery and ajax (because I don't want the page to reload). And I'm having troubles with the $_FILES.
Here it is, I'm using a form (which contains a file input) with a javascript action (action="javascript: SendPresupMail();").
In that JS function I use a little Jquery and ajax, inside it, there is a call to a php function.
The problem is that inside that php function the $_FILES is empty, and I need to upload the file send in the form.
Here is the code:
HTML form, calling to JS:
<form action="javascript: sendPresupMail();" method="post" id="formId" enctype="multipart/form-data">
<input type="text" id="mail" name="mail" />
<input type="file" id="file_selected" name="file_selected" />
<input type="submit" value="Submit" />
JS function, and call to PHP with AJAX and JQUERY:
function sendPresupMail() {
$.ajax({
url: 'remote.php',
type: 'post',
data: {
'w': 'sendPresupMail',
'mail': document.getElementById('mail').value
},
success: function(data) {
if(data != "ok" && data != ""){alert(data);}
if(data == "ok"){alert("mail send.");}
}
});
}
Finally, the PHP code:
private function sendPresupMail(){
$filename = ($_FILES['file_selected']['name']);
...
...
}
The code there is irrelevant, the issue is that $filename is not receiving anything because $_FILES it's empty (I checked it with a var_dump, and it's empty). So I can not upload the file, what should I do?
SOLVED
Here is the solution:
Actually it was a lot simplier than I thought. First, I create an iframe, so now all the form, javascript, ajax, etc. is hapenning inside the iframe. So it seems like the page is not refreshing, because the iframe is doing it.
Thanks all for your answers anyway!
You can't do it with pure Ajax/jQuery, but you can do it in combination with the JavaScript FormData object which is supported in all latest versions of the major browsers.
A really simple jQuery example can be found here: https://coderwall.com/p/p-n7eq
A more detailed, yet pure JavaScript, can be found here: https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects?redirectlocale=en-US&redirectslug=Web%2FAPI%2FFormData%2FUsing_FormData_Objects
The $_POST variable on the page you are posting to is populated from the data you are submitting in the $.ajax call. That data has no file inputs, and I'm not sure it can. Take a look around for some handy plugins.
This recommends using the jQuery Form Plugin: jQuery AJAX post with fileupload
I've personally used Uploadify previously: http://www.uploadify.com/
Or manually do it: http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/
Check if $_POST is also empty. $_POST and $_FILES tend to be empty when the file uploaded exceeds upload_max_filesize or post_max_size
I was wondering how I could go about sending a .csv file from a file input container in HTML to another .php file in ajax.
Here's my code:
$(document).ready(function () {
$(".Rsubmit").click(function () {
?????What would I declare to contain the .csv file?
var checkurl = './CSVRemove/getAccountsCSV.php';
runCSVcheck(checkurl);
});
});
function runCSVcheck(checkurl)
{
$.ajax({
type: "POST",
//dataType: "json",
url: checkurl,
data:
{
???? what would I put here?
},
success: function(response) {
code....
});
}
HTML:
Input boxes.....
<span>Enter .csv File: </span><input type="file" name="file" value="" />
Please let me know if there is a solution!
David
If you're planning on sending a file upload via Ajax, I suggest using a jQuery form plugin that support file uploads.
There are a number of them available, but I've had good success with this one: http://www.malsup.com/jquery/form/
It allows you to post a form via Ajax, even if the form includes file upload fields. PHP will receive the form post exactly as it would have done normally if it had been posted via a regular form submit.
Alternatively, you could use HTML5's file API, but only if you don't need to support older browsers like IE8. The jQuery form plugin is probably the safer way to go for now.
hope that helps.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
File Upload via AJAX within JQuery
How to easily upload files without form submission (with jQuery + AJAX)
I know for a fact that we can upload files using forms with enctype="multipart/form-data" but what i'm trying to figure out is upload files using Jquery Ajax..
Any tips?? Thanks in advance.
Try this jQuery plugin http://valums.com/ajax-upload/
Then use this javascript code
var uploader = new qq.FileUploader({
// pass the element
element: $(selector)[0],
// path to server-side upload script
action: '/server/upload'
});
For more info check the documentation
I have used http://blueimp.github.com/jQuery-File-Upload/ in the past and it comes up with great demo(s) and documentation.
Check it out on https://github.com/blueimp/jQuery-File-Upload
depends on your needs.
for single file,http://valums.com/ajax-upload/ is good enought
for multipla files upload + multi file selects you will need other technologies like flash or html5, you can check plupload or Uploadify
plupload supports flash, html5, silvernight html4 upload methods. and also support multi files select (except for html4)
uploadify supports flash and html5 for multi file selects
The mentioned plugins are all useful but if you would like to know the logic behind the process its something like this:
Create a php file that handles uploading files and can return errors (echo).
Create an HTML page with your form and everything
Create a jquery function to :
Avoid the form from being submitted
create an ajax request to your php file you created in the first step
show the result from the php file in a div.
You need to use FormData object, but it will work only in newer browsers.
if (window.FormData) {
$('input[type=file]').change(function() {
var formdata = new FormData();
var file = this.files[0];
formdata.append("files[]", file);
$.ajax({
url: "upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false
});
});
}
Some more info: https://developer.mozilla.org/en/XMLHttpRequest/FormData
You can also see lib with example HTML and some additional features: http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/
For supporting older browsers, you can make iframe, clone file input element to the iframe and submit form there. In this way, page will not refresh and it will be AJAX-like.
I have this HTML:
<form action='uploadhandle.php' method='POST' enctype="multipart/form-data">
<input type='file' class='fileinput' id='photo1' name='photo1'>
<input type='button' id='upload1' name='upload1' value='Upload'>
</form>
My jquery code is:
$('#upload1').click(function(){
$.ajax({
url: "uploadhandle.php",
data: 'photo1='+photo1,
success: function(data){$('#result_div').html(data)}
});
In my uploadhandle.php, when I try to display the $_POST['photo1'], nothing comes up, it's "undefined".
Does anyone know what I did wrong?
Thanks a lot,
Regards
You cannot upload a file via AJAX. It isn't possible.
What IS possible is using a plugin or another method that "simulates" ajax by creating an iframe and submitting the info in the background. There are several plugins that handle this, some are very complex, some simply extend the ajax function itself.
That being said, your syntax server side is also wrong. You have to deal with $_FILES not $_POST to find and use the submitted file.
Good luck.
You can't upload file data through XHR (i.e. ajax). There is a file upload API in XHR2, but the most practical and cross browser compatible way today seems to use a hidden iframe to do the file upload.
Edit: See How do you post to an iframe?
I'm using jquery-ajax to check whether the file already exist in my server.
I have this code:
Upload an Event Photo <br>
<input type='file' name='imageSrc' id='imageSrc' /><br>
<a href='#' class='uploadPhoto'>Upload Image</a><br>
<div class='uploadMessage'></div>
<span>Maximum size: 1MB (jpg,png,gif)</span>
This is my jquery code:
jQuery(document).ready(function() {
jQuery('.uploadPhoto').click(function(){
// alert(1);
jQuery.ajax({
type: "POST",
url: "index.php?option=com_eventsandrsvp",
data: "task=uploadEventPhoto&format=raw",
success: function(data) {
jQuery(".uploadMessage").html(data);
}
})
});
});
I want to get the information that was there in the <input type='file' name='imageSrc' id='imageSrc' />
I know that that is a file type so there are information such as:
name,type,size, and tmp_name.
How would I do that using ajax?
I am trying to use a GET method but it doesn't work. maybe because it only works on <input type='text' />
Any help would be greatly appreciated.
Thanks!
You can't upload files using just jQuery.ajax(), to upload files via ajax, you can resort to:
Flash
Iframe trick
Above methods have their own drawbacks though.
Fortunately, there exists nice script uploadify you can use to upload files via ajax easily.