caricamento file Ajax jQuery

Posso usare il seguente codice jQuery per eseguire il caricamento di file usando il metodo post di una richiesta Ajax?

$.ajax({ type: "POST", timeout: 50000, url: url, data: dataString, success: function (data) { alert('success'); return false; } }); 

Se è ansible, devo compilare la parte “dati”? È il modo corretto? Inserisco solo il file sul lato server.

Sono stato su Google, ma quello che ho trovato era un plugin mentre nel mio piano non volevo usarlo. Almeno per il momento.

il caricamento del file non è ansible tramite ajax. Puoi caricare file, senza aggiornare la pagina usando IFrame. puoi controllare ulteriori dettagli qui

AGGIORNARE:

Con XHR2, è supportato il caricamento di file tramite AJAX. Ad esempio tramite object FormData , ma sfortunatamente non è supportato da tutti i / vecchi browser.

Il supporto di FormData inizia dalle seguenti versioni del browser desktop. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

Per ulteriori dettagli, consultare il link MDN

Gli iframe non sono più necessari per caricare file tramite ajax. L’ho fatto di recente da solo. Dai un’occhiata a queste pagine:

Utilizzo di caricamenti di file HTML5 con AJAX e jQuery

http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface

Aggiornato la risposta e ripulito. Utilizzare la funzione getSize per controllare le dimensioni o utilizzare la funzione getType per verificare i tipi. Aggiunto il codice html e css progressbar.

 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 classs so it fits your code $(progress_bar_id + " .progress-bar").css("width", +percent + "%"); $(progress_bar_id + " .status").text(percent + "%"); }; 

Come usare la class Upload

 //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(); }); 

Codice html Progressbar

 
0%

Codice CSS di Progressbar

 #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; } 

È ansible inviare e caricare file Ajax. Sto usando la funzione jQuery $.ajax per caricare i miei file. Ho provato ad usare l’object XHR ma non ho potuto ottenere risultati dal lato server con 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); } }); 

Come puoi vedere, devi creare un object FormData, vuoto o da (serializzato? – $('#yourForm').serialize()) modulo esistente, quindi albind il file di input.

Ecco ulteriori informazioni: – Come caricare un file utilizzando jQuery.ajax e FormData – Caricamento di file tramite jQuery, viene fornito object FormData e nessun nome file, richiesta GET

Per il processo PHP puoi usare qualcosa come questo:

 //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 )); } 

Modulo di caricamento semplice

   
  
File Upload
Select File

Sono piuttosto in ritardo per questo, ma stavo cercando una soluzione di caricamento di immagini basata su Ajax e la risposta che stavo cercando era un po ‘sparpagliata in questo post. La soluzione su cui ho optato riguardava l’object FormData. Ho assemblato una forma base del codice che ho messo insieme. È ansible vedere come viene illustrato come aggiungere un campo personalizzato al modulo con fd.append () e come gestire i dati di risposta quando viene eseguita la richiesta ajax.

Carica HTML:

    Image Upload Form     

Nel caso tu stia lavorando con PHP, ecco un modo per gestire il caricamento che include l’uso di entrambi i campi personalizzati dimostrati nel codice HTML sopra.

upload.php

  0) { echo "Return Code: " . $_FILES["file"]["error"] . "
"; } else { $filename = $label.$_FILES["file"]["name"]; echo "Upload: " . $_FILES["file"]["name"] . "
"; echo "Type: " . $_FILES["file"]["type"] . "
"; echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB
"; echo "Temp file: " . $_FILES["file"]["tmp_name"] . "
"; if (file_exists("uploads/" . $filename)) { echo $filename . " already exists. "; } else { move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/" . $filename); echo "Stored in: " . "uploads/" . $filename; } } } else { echo "Invalid file"; } ?>

Un caricamento AJAX è effettivamente ansible con XMLHttpRequest (). Non sono necessari iframe. È ansible visualizzare il progresso del caricamento.

Per i dettagli vedi: Rispondi a https://stackoverflow.com/a/4943774/873282 per interrogare jQuery Upload Progress e AJAX file upload .

Nel caso in cui vuoi farlo in questo modo:

 $.upload( form.action, new FormData( myForm)) .progress( function( progressEvent, upload) { if( progressEvent.lengthComputable) { var percent = Math.round( progressEvent.loaded * 100 / progressEvent.total) + '%'; if( upload) { console.log( percent + ' uploaded'); } else { console.log( percent + ' downloaded'); } } }) .done( function() { console.log( 'Finished upload'); }); 

di

https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.upload.js

potrebbe essere la tua soluzione.

  • Usa un iframe nascosto e imposta l’objective del tuo modulo sul nome di quel iframe. In questo modo, quando viene inviato il modulo, verrà aggiornato solo l’iframe.
  • Avere un gestore di eventi registrato per l’evento di caricamento dell’iframe per analizzare la risposta.

Maggiori dettagli sul mio post sul blog: http://blog.manki.in/2011/08/ajax-fie-upload.html .

 $("#submit_car").click( function() { var formData = new FormData($('#car_cost_form')[0]); $.ajax({ url: 'car_costs.php', data: formData, async: false, contentType: false, processData: false, cache: false, type: 'POST', success: function(data) { }, }) return false; }); 

modifica: nota contentype e dati di processo Puoi semplicemente usare questo per caricare file tramite Ajax …… non puoi inserire l’input all’esterno di form 🙂

Ho implementato una selezione di file multipli con l’anteprima istantanea e il caricamento dopo aver rimosso i file indesiderati dall’anteprima tramite ajax.

La documentazione dettagliata può essere trovata qui: http://anasthecoder.blogspot.ae/2014/12/multi-file-select-preview-without.html

Demo: http://jsfiddle.net/anas/6v8Kz/7/embedded/result/

jsFiddle: http://jsfiddle.net/anas/6v8Kz/7/

Javascript:

  $(document).ready(function(){ $('form').submit(function(ev){ $('.overlay').show(); $(window).scrollTop(0); return upload_images_selected(ev, ev.target); }) }) function add_new_file_uploader(addBtn) { var currentRow = $(addBtn).parent().parent(); var newRow = $(currentRow).clone(); $(newRow).find('.previewImage, .imagePreviewTable').hide(); $(newRow).find('.removeButton').show(); $(newRow).find('table.imagePreviewTable').find('tr').remove(); $(newRow).find('input.multipleImageFileInput').val(''); $(addBtn).parent().parent().parent().append(newRow); } function remove_file_uploader(removeBtn) { $(removeBtn).parent().parent().remove(); } function show_image_preview(file_selector) { //files selected using current file selector var files = file_selector.files; //Container of image previews var imageContainer = $(file_selector).next('table.imagePreviewTable'); //Number of images selected var number_of_images = files.length; //Build image preview row var imagePreviewRow = $('' + '' + ' '); //Add image preview row $(imageContainer).html(imagePreviewRow); if (number_of_images > 1) { for (var i =1; i'; file_info_container.append(file_name_input); imageCount--; }) //Decrement count of inputs to find all images selected by all multi select are uploaded number_of_inputs--; if(number_of_inputs == 0) { //All images selected by each file selector is uploaded //Do necessary acteion post upload $('.overlay').hide(); } } else { if (typeof jsonResponse.error_field_name != 'undefined') { //Do appropriate error action } else { alert(jsonResponse.message); } $('.overlay').hide(); event.preventDefault(); return false; } } else { /*alert('Something went wrong!');*/ $('.overlay').hide(); event.preventDefault(); } }; xhr.send(formData); }) return false; } 

Li ho gestiti in un codice semplice. Puoi scaricare una demo funzionante da qui

Per il tuo caso, questi molto possibili. Ti guiderò passo dopo passo come puoi caricare un file sul server usando jQuery AJAX.

Per prima cosa creiamo un file HTML per aggiungere il seguente elemento del file del modulo come mostrato di seguito.

 

In secondo luogo, crea un file jquery.js e aggiungi il seguente codice per gestire l’invio dei file al server

  $("#formContent").submit(function(e){ e.preventDefault(); var formdata = new FormData(this); $.ajax({ url: "ajax_upload_image.php", type: "POST", data: formdata, mimeTypes:"multipart/form-data", contentType: false, cache: false, processData: false, success: function(){ alert("file successfully submitted"); },error: function(){ alert("okey"); } }); }); }); 

Ecco fatto. Vedi di più

Sì, puoi semplicemente usare javascript per ottenere il file, assicurandoti di leggere il file come URL di dati. Analizza le cose prima di base64 per ottenere effettivamente i dati codificati di base 64 e poi se stai usando php o qualsiasi linguaggio di back-end puoi decodificare i dati di base 64 e salvarli in un file come mostrato di seguito

 Javascript: var reader = new FileReader(); reader.onloadend = function () { dataToBeSent = reader.result.split("base64,")[1]; $.post(url, {data:dataToBeSent}); } reader.readAsDataURL(this.files[0]); PHP: file_put_contents('my.pdf', base64_decode($_POST["data"])); 

Ovviamente probabilmente vorrai fare delle validazioni come verificare quale tipo di file hai a che fare e cose del genere ma questa è l’idea.

È ansible utilizzare il metodo ajaxSubmit come segue 🙂 quando si seleziona un file che deve essere caricato sul server, si deve inviare al server 🙂

 $(document).ready(function () { var options = { target: '#output', // target element(s) to be updated with server response timeout: 30000, error: function (jqXHR, textStatus) { $('#output').html('have any error'); return false; } }, success: afterSuccess, // post-submit callback resetForm: true // reset the form after successful submit }; $('#idOfInputFile').on('change', function () { $('#idOfForm').ajaxSubmit(options); // always return false to prevent standard browser submit and page navigation return false; }); }); 

per caricare un file che viene inviato dall’utente come parte del modulo utilizzando jquery, segui il seguente codice:

 var formData = new FormData(); formData.append("userfile", fileInputElement.files[0]); 

Quindi inviare l’object dati del modulo al server.

Possiamo anche aggiungere un file o un BLOB direttamente all’object FormData.

 data.append("myfile", myBlob, "filename.txt"); 

Se si desidera caricare il file utilizzando AJAX qui è il codice che è ansible utilizzare per il caricamento di file.

 $(document).ready(function() { var options = { beforeSubmit: showRequest, success: showResponse, dataType: 'json' }; $('body').delegate('#image','change', function(){ $('#upload').ajaxForm(options).submit(); }); }); function showRequest(formData, jqForm, options) { $("#validation-errors").hide().empty(); $("#output").css('display','none'); return true; } function showResponse(response, statusText, xhr, $form) { if(response.success == false) { var arr = response.errors; $.each(arr, function(index, value) { if (value.length != 0) { $("#validation-errors").append('
'+ value +'
'); } }); $("#validation-errors").show(); } else { $("#output").html(""); $("#output").css('display','block'); } }

Ecco l’HTML per caricare il file

 

Per ottenere tutti gli input del modulo, incluso type = “file”, è necessario utilizzare l’object FormData . sarai in grado di vedere il contenuto di formData nel debugger -> network -> Intestazioni dopo che avrai inviato il modulo.

 var url = "YOUR_URL"; var form = $('#YOUR_FORM_ID')[0]; var formData = new FormData(form); $.ajax(url, { method: 'post', processData: false, contentType: false, data: formData }).done(function(data){ if (data.success){ alert("Files uploaded"); } else { alert("Error while uploading the files"); } }).fail(function(data){ console.log(data); alert("Error while uploading the files"); }); 

Usare FormData è la strada da seguire, come indicato da molte risposte. ecco un po ‘di codice che funziona alla grande per questo scopo. Sono anche d’accordo con il commento di annidare i blocchi ajax per completare le circostanze complesse. Includendo e.PreventDefault (); nella mia esperienza rende il codice più compatibile con i browser.

  $('#UploadB1').click(function(e){ e.preventDefault(); if (!fileupload.valid()) { return false; } var myformData = new FormData(); myformData.append('file', $('#uploadFile')[0].files[0]); $("#UpdateMessage5").html("Uploading file ...."); $("#UpdateMessage5").css("background","url(../include/images/loaderIcon.gif) no-repeat right"); myformData.append('mode', 'fileUpload'); myformData.append('myid', $('#myid').val()); myformData.append('type', $('#fileType').val()); //formData.append('myfile', file, file.name); $.ajax({ url: 'include/fetch.php', method: 'post', processData: false, contentType: false, cache: false, data: myformData, enctype: 'multipart/form-data', success: function(response){ $("#UpdateMessage5").html(response); //.delay(2000).hide(1); $("#UpdateMessage5").css("background",""); console.log("file successfully submitted"); },error: function(){ console.log("not okay"); } }); }); 

Ajax non supporta upload di file, dovresti usare iframe

  var dataform = new FormData($("#myform")[0]); //console.log(dataform); $.ajax({ url: 'url', type: 'POST', data: dataform, async: false, success: function (res) { response data; }, cache: false, contentType: false, processData: false }); 
   Ajax file upload     

Ajax Image Upload





Ecco un’idea che stavo pensando:

 Have an iframe on page and have a referencer. 

Have a form in which you move the INPUT:File element to.

 Form: A processing page AND a target of the FRAME. 

The result will post to the frame, and then you can just send the fetched data up a level to the image tag you want with something like:

 data:image/png;base64,asdfasdfasdfasdfa 

and the page loads.

I believe it works for me, and depending you might be able to do something like:

 .aftersubmit(function(){ stopPropigation()// or some other code which would prevent a refresh. });