im trying to build a ajax multiple file upload because i found every plugin too complicated to configure, i started with a multi file upload in php, but i see that if i have too many file to upload at once when i submit the form it will take too much time to end, how is this latence handled? is this handled with jquery iframe transport?
http://cmlenz.github.com/jquery-iframe-transport/
$("#myform").submit(function() {
$.ajax(this.action, {
data: $(":text", this).serializeArray(),
files: $(":file", this),
iframe: true,
processData: false
}).complete(function(data) {
console.log(data);
});
});
thanks
These plugins use the new HTML5 file API to upload multiple files in parallel, with one POST per file.
By contrast, <iframe>-based uploaders send a normal <form> POST, which creates a single POST for everything and uploads the files in sequence.
Related
I'm using a lightweight image editor jQuery plugin called andyvr/picEdit
https://github.com/andyvr/picEdit
This is just a plugin that turns an input:file element into an HTML canvass, and allows the user to select/edit/crop/manipulate an image file on the client side. The actual uploading and processing is done via the usual FORM UPLOAD and PHP $_FILE processes.
What I wanted to do is grab the "edited" picture data from this plugin and send it via $.post() instead of through the Form submit action.
Do you guys know what element I should select to include in my post variables?
var postvars = {};
postvars.final_image = $("#what_element").val();
$.post("script-name.php", postvars ,function(data){.....
I tried to go through the JS file but I can't seem to figure it out.
PS
I hope I came across clear with this question. I was having a hard time structuring it.
Assuming you are using the same picedit as I used and are still looking for an answer:
The html file input:
<input type='file' name='thefile' id='thebox'>
The jquery to make the file input act like an image edit box:
$(function() {
$('#thebox').picEdit();
});
The post command:
$.post( "handler.php", { story_edited : 1, id : 1 }, function( data ){ document.getElementById( 'photos' ).innerHTML = html = data }, "html" );
Notes:
handler.php = the name of the file that you want to use to process the input!
<div id='photos' name='photos'>
is a standard div tag that I use to update onscreen info in another part of the page! So, document.getElementById( 'photos' ).innerHTML will load handlers.php in to the photos div tag!
Use:
foreach($_FILES as $file)
to process the images as normal file upload from a web page!
I have one other button that pulls it all together. After I finish editing the image, I click on an update button that calls the handler and uploads and saves the file as well as dynamic updating of a photoalbum section elsewhere on the page.
TODO:
If I could find a way to attach a callback function I would not need to use this separate button.
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.
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 am trying to make a 'simple" php+ajax script to show progress of multiple uploaded files.
I have found on this website and on other pages, packages ready to use, etc.... I want to start from scratch for several reasons, and one of them is learning.
Here is how I wanted to approach it:
First, I start with a ajax code in upload.php (this file contains the upload form and a to display upload progress)
<script>
$(document).ready(function(){
$("#uploadform").change(function(e)
{
e.preventDefault();
setInterval(function(){
$('div#upload_progress').load('upload_progress.php');
}, 1000);
});
});
</script>
upload_progress.php contains the code to get the instant file size on the server (I have not got there yet). So, as for now, the only line I have in 'upload_progress.php' is: 'VOILA'.
Here is my problem: the div #upload_progress does not load during the file uploaded, so I don't see the text in upload_progress.php. I have tried to upload large files or reduce the setInterval time, but without success. Except that when I put an alert window (alert('alertme');) after the setInterval, the div#upload_progress magically get loaded.
I'd really appreciate some help.
Try html5
<progress value="1" max="100">Loading</progress>
And increase value
U can use 2 divs like JMarc says..It's a little rusty and not very religious but it does the job.U retained the width in a session variable that holds the amount of file uploaded.
I am trying to submit a form via ajax using:
$(document).ready(function(){
$("#ajax-form").submit(function(){
$.post(
"albums.php",
$("#ajax-form").serialize(),
function(){
}
);
return false;
});
});
I am posting data to the facebook graph api. I need to send the form text fields and image data to the remote facebook api server. Is this possible? Thanks!
This is a simple jQuery plugin to implement and works for me for running file uploads seemingly via AJAX. It is meant to run on forms of all kinds, but it does support file uploads. Though it uses iFrames, it runs everything silently without notice, and it works flawlessly every time for me:
http://jquery.malsup.com/form/
Is this possible? Thanks!
No, doesn't look like it:
How can I upload files asynchronously?