jQuery Ajax File Upload
File upload is not possible through AJAX.
You can upload file, without refreshing page by using IFrame
.
You can check further details here.
UPDATE
With XHR2, File upload through AJAX is supported. E.g. through FormData
object, but unfortunately it is not supported by all/old browsers.
FormData
support starts from following desktop browsers versions.
- IE 10+
- Firefox 4.0+
- Chrome 7+
- Safari 5+
- Opera 12+
For more detail, see MDN link.
Iframes is no longer needed for uploading files through ajax. I've recently done it by myself. Check out these pages:
Using HTML5 file uploads with AJAX and jQuery
http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface
Updated the answer and cleaned it up. Use the getSize function to check size or use getType function to check types.Added progressbar html and css code.
var Upload = function (file) { this.file = file;};Upload.prototype.getType = function() { return this.file.type;};Upload.prototype.getSize = function() { return this.file.size;};Upload.prototype.getName = function() { return this.file.name;};Upload.prototype.doUpload = function () { var that = this; var formData = new FormData(); // add assoc key values, this will be posts values formData.append("file", this.file, this.getName()); formData.append("upload_file", true); $.ajax({ type: "POST", url: "script", xhr: function () { var myXhr = $.ajaxSettings.xhr(); if (myXhr.upload) { myXhr.upload.addEventListener('progress', that.progressHandling, false); } return myXhr; }, success: function (data) { // your callback here }, error: function (error) { // handle error }, async: true, data: formData, cache: false, contentType: false, processData: false, timeout: 60000 });};Upload.prototype.progressHandling = function (event) { var percent = 0; var position = event.loaded || event.position; var total = event.total; var progress_bar_id = "#progress-wrp"; if (event.lengthComputable) { percent = Math.ceil(position / total * 100); } // update progressbars classes so it fits your code $(progress_bar_id + " .progress-bar").css("width", +percent + "%"); $(progress_bar_id + " .status").text(percent + "%");};
How to use the Upload class
//Change id to your id$("#ingredient_file").on("change", function (e) { var file = $(this)[0].files[0]; var upload = new Upload(file); // maby check size or type here with upload.getSize() and upload.getType() // execute upload upload.doUpload();});
Progressbar html code
<div id="progress-wrp"> <div class="progress-bar"></div> <div class="status">0%</div></div>
Progressbar css code
#progress-wrp { border: 1px solid #0099CC; padding: 1px; position: relative; height: 30px; border-radius: 3px; margin: 10px; text-align: left; background: #fff; box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);}#progress-wrp .progress-bar { height: 100%; border-radius: 3px; background-color: #f39ac7; width: 0; box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);}#progress-wrp .status { top: 3px; left: 50%; position: absolute; display: inline-block; color: #000000;}
Ajax post and upload file is possible. I'm using jQuery $.ajax
function to load my files. I tried to use the XHR object but could not get results on the server side with PHP.
var formData = new FormData();formData.append('file', $('#file')[0].files[0]);$.ajax({ url : 'upload.php', type : 'POST', data : formData, processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType success : function(data) { console.log(data); alert(data); }});
As you can see, you must create a FormData object, empty or from (serialized? - $('#yourForm').serialize())
existing form, and then attach the input file.
Here is more information: - How to upload a file using jQuery.ajax and FormData- Uploading files via jQuery, object FormData is provided and no file name, GET request
For the PHP process you can use something like this:
//print_r($_FILES);$fileName = $_FILES['file']['name'];$fileType = $_FILES['file']['type'];$fileError = $_FILES['file']['error'];$fileContent = file_get_contents($_FILES['file']['tmp_name']);if($fileError == UPLOAD_ERR_OK){ //Processes your file here}else{ switch($fileError){ case UPLOAD_ERR_INI_SIZE: $message = 'Error al intentar subir un archivo que excede el tamaño permitido.'; break; case UPLOAD_ERR_FORM_SIZE: $message = 'Error al intentar subir un archivo que excede el tamaño permitido.'; break; case UPLOAD_ERR_PARTIAL: $message = 'Error: no terminó la acción de subir el archivo.'; break; case UPLOAD_ERR_NO_FILE: $message = 'Error: ningún archivo fue subido.'; break; case UPLOAD_ERR_NO_TMP_DIR: $message = 'Error: servidor no configurado para carga de archivos.'; break; case UPLOAD_ERR_CANT_WRITE: $message= 'Error: posible falla al grabar el archivo.'; break; case UPLOAD_ERR_EXTENSION: $message = 'Error: carga de archivo no completada.'; break; default: $message = 'Error: carga de archivo no completada.'; break; } echo json_encode(array( 'error' => true, 'message' => $message ));}