Parsisiųsti jQuery Ajax failą

Ar galima naudoti tokį „jQuery“ kodą, kad galėtumėte įkelti failus, naudojant „Ajax“ užklausos metodą?

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

Jei įmanoma, ar turiu užpildyti „duomenis“? Ar tai tiesa? Aš siunčiu failą tik į serverį.

Dirbau su „Google“, bet tai, ką radau, buvo įskiepis, nors mano plane nenoriu jo naudoti. Bent jau šiuo metu.

645
23 февр. Willy nustatė 23 vasario mėn 2010-02-23 19:58 '10, 19:58, 2010-02-23 19:58
@ 22 atsakymai

failo atsisiuntimas neįmanomas per ajax. Galite įkelti failą neatnaujindami puslapio naudodami iframe. Daugiau informacijos galite rasti čia.

UPDATE:

Su XHR2 palaikomas failų įkėlimas per AJAX. Pavyzdžiui. per „ FormData“ objektą, tačiau, deja, tai nepalaikoma visų / senų naršyklių.

„FormData“ palaikymas prasideda šiomis darbastalio naršyklių versijomis. IE 10+, „Firefox 4.0+“, „Chrome 7+“, „Safari 5+“, „Opera 12+“

Daugiau informacijos rasite nuorodoje MDN

541
23 февр. „ Adeel“ atsakymas vasario 23 d 2010-02-23 20:03 '10, 20:03, 2010-02-23 20:03

„Iframes“ nebereikia siųsti failų per „ajax“. Neseniai tai padariau patys. Peržiūrėkite šiuos puslapius:

Naudojant HTML5 failo įkėlimą su AJAX ir jQuery

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

Atnaujino atsakymą ir jį pašalino. Naudokite funkciją getSize patikrinti dydį arba naudokite getType funkciją, kad patikrintumėte tipus. Pridėta pažangos kodas html ir css.

 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 + "%"); }; 

Kaip naudoti įkėlimo klasę

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

Išplėstinis HTML kodas

 <div id="progress-wrp"> <div class="progress-bar"></div> <div class="status">0%</div> </div> 

Išplėstinis CSS kodas

268
30 мая '12 в 10:00 2012-05-30 10:00 atsakymas pateikiamas Ziinloader gegužės 30 d., 12 val. 10:00 2012-05-30 10:00

Galima įrašyti ir atsisiųsti „Ajax“ failą. Aš naudoju jQuery $.ajax įkelti mano failus. Bandžiau naudoti XHR objektą, tačiau nepavyko gauti serverio rezultatų naudojant 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); } }); 

Kaip matote, turite sukurti „FormData“ objektą, kuris yra tuščias arba iš (serializuotas?

Daugiau informacijos: - Kaip įkelti failą naudodami jQuery.ajax ir FormData - atsisiųskite failus per jQuery, pateikiamas FormData objektas ir failo pavadinimas, GET užklausa

PHP procesui galite naudoti kažką panašaus:

 //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 )); } 
160
24 июля '14 в 19:28 2014-07-24 19:28 atsakymą pateikė pedrozopayares, liepos 24 d., 14, 19:28, 2014-07-24 19:28

Paprasta atsisiuntimo forma

 <!--Upload Form--> <form> <table> <tr> <td colspan="2">File Upload</td> </tr> <tr> <th>Select File </th> <td><input id="csv" name="csv" type="file" /></td> </tr> <tr> <td colspan="2"> <input type="submit" value="submit"/> </td> </tr> </table> </form> 
87
19 янв. atsakymą pateikė vickisys 19 sausis 2015-01-19 15:36 '15 15:36 2015-01-19 15:36

Aš tai buvau gana vėlai, bet ieškojau „ajax“ pagrįsto vaizdo įkėlimo sprendimo, o atsakymas, kurio ieškojau, buvo išsklaidytas šiame pranešime. Sprendimas, kurį sustojau, įtraukė „FormData“ objektą. Aš sudariau pagrindinę kodo formą, kurią surinko kartu. Galite matyti, kaip jis rodo, kaip pridėti priskirtą lauką prie formos, naudodami fd.append (), ir kaip apdoroti atsakymo duomenis, kai vykdomas „ajax“ prašymas.

Atsisiųsti html:

 <!DOCTYPE html> <html> <head> <title>Image Upload Form</title> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> function submitForm() { console.log("submit event"); var fd = new FormData(document.getElementById("fileinfo")); fd.append("label", "WEBUPLOAD"); $.ajax({ url: "upload.php", type: "POST", data: fd, processData: false, // tell jQuery not to process the data contentType: false // tell jQuery not to set contentType }).done(function( data ) { console.log("PHP Output:"); console.log( data ); }); return false; } </script> </head> <body> <form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();"> <label>Select a file:</label><br> <input type="file" name="file" required /> <input type="submit" value="Upload" /> </form> <div id="output"></div> </body> </html> 

Jei dirbate su php čia, galite tvarkyti atsisiuntimą, įskaitant abiejų pasirinktų laukų, rodomų aukščiau pateiktame html, naudojimą.

upload.php

 <?php if ($_POST["label"]) { $label = $_POST["label"]; } $allowedExts = array("gif", "jpeg", "jpg", "png"); $temp = explode(".", $_FILES["file"]["name"]); $extension = end($temp); if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/pjpeg") || ($_FILES["file"]["type"] == "image/x-png") || ($_FILES["file"]["type"] == "image/png"))  ($_FILES["file"]["size"] < 200000)  in_array($extension, $allowedExts)) { if ($_FILES["file"]["error"] > 0) { echo "Return Code: " . $_FILES["file"]["error"] . "<br>"; } else { $filename = $label.$_FILES["file"]["name"]; echo "Upload: " . $_FILES["file"]["name"] . "<br>"; echo "Type: " . $_FILES["file"]["type"] . "<br>"; echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>"; echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>"; 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"; } ?> 
61
25 марта '14 в 0:53 2014-03-25 00:53 atsakymą pateikė „ lee8oi “ kovo 25 d. 14 val. 0:53 2014-03-25 00:53

„AJAX“ pakrovimas yra tikrai galimas naudojant XMLHttpRequest (). Nereikia jokio „iframe“. Galima rodyti atsisiuntimo pažangą.

Išsamesnės informacijos ieškokite: Atsakymas ngn-wiki.ru.site/questions/1822 / ... į „ JQuery“ įkėlimo ir „AJAX“ failo įkėlimo klausimą .

30
02 апр. atsakymas duotas koppor 02 Apr 2012-04-02 16:21 '12, 16:21 pm 2012-04-02 16:21

Jei norite tai padaryti taip:

 $.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'); }); 

nei

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

galbūt jūsų sprendimas.

13
17 сент. atsakymą pateikė „ lgersman“ rugsėjo 17 d 2012-09-17 17:40 '12, 17:40 2012-09-17 17:40
  • Naudokite paslėptą iframe ir nustatykite šios formos reikšmę šiam iframe pavadinimui. Taigi, pateikiant formą, bus atnaujintas tik iframe.
  • Norėdami apdoroti atsakymą, užregistruokite įvykių tvarkyklę iframe įkėlimo įvykiui.

Sužinokite daugiau apie savo dienoraščio įrašą: http://blog.manki.in/2011/08/ajax-fie-upload.html .

12
07 авг. atsakymas pateikiamas Manki 07 rug. 2011-08-07 07:31 '11, 07:31, 2011-08-07 07:31
 $("#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; }); 

redaguoti: nurodykite turinio tipą ir apdorojimo duomenis Jūs galite tiesiog jį naudoti failams įkelti per „Ajax“ ...... pateikimo įvestis negali būti išorinės formos elementas :)

10
29 янв. atsakymas, kurį pateikė Gvice Jan 29 2013-01-29 00:46 '13 - 0:46 2013-01-29 00:46

Įdiegus keletą failų su tiesioginiu peržiūra ir parsisiuntimu, pašalinus nepageidaujamus failus iš „Ajax“ peržiūros.

Išsamią dokumentaciją galite rasti čia: 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 = $('<tr class="imagePreviewRow_0"><td valign=top style="width: 510px;"></td>' + '<td valign=top><input type="button" value="X" title="Remove Image" class="removeImageButton" imageIndex="0" onclick="remove_selected_image(this)" /></td>' + '</tr> '); //Add image preview row $(imageContainer).html(imagePreviewRow); if (number_of_images > 1) { for (var i =1; i<number_of_images; i++) {  var newImagePreviewRow = $(imagePreviewRow).clone().removeClass('imagePreviewRow_0').addClass('imagePreviewRow_'+i); $(newImagePreviewRow).find('input[type="button"]').attr('imageIndex', i); $(imageContainer).append(newImagePreviewRow); } } for (var i = 0; i < files.length; i++) { var file = files[i];  var imageType = /image.*/; if (!file.type.match(imageType)) { continue; }  var img = document.createElement("img");  var preview = $(imageContainer).find('tr.imagePreviewRow_'+i).find('td:first');  preview.append(img);  preview.find('img').addClass('previewImage').css({'max-width': '500px', 'max-height': '500px'});  var reader = new FileReader();  reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);  reader.readAsDataURL(file); }  $(imageContainer).show(); } function remove_selected_image(close_button) {  var imageIndex = $(close_button).attr('imageindex'); $(close_button).parents('.imagePreviewRow_' + imageIndex).remove(); } function upload_images_selected(event, formObj) { event.preventDefault(); //Get number of images var imageCount = $('.previewImage').length; //Get all multi select inputs var fileInputs = document.querySelectorAll('.multipleImageFileInput'); //Url where the image is to be uploaded var url= "/upload-directory/"; //Get number of inputs var number_of_inputs = $(fileInputs).length; var inputCount = 0; //Iterate through each file selector input $(fileInputs).each(function(index, input){ fileList = input.files; // Create a new FormData object. var formData = new FormData(); //Extra parameters can be added to the form data object formData.append('bulk_upload', '1'); formData.append('username', $('input[name="username"]').val()); //Iterate throug each images selected by each file selector and find if the image is present in the preview for (var i = 0; i < fileList.length; i++) { if ($(input).next('.imagePreviewTable').find('.imagePreviewRow_'+i).length != 0) { var file = fileList[i]; // Check the file type. if (!file.type.match('image.*')) { continue; } // Add the file to the request. formData.append('image_uploader_multiple[' +(inputCount++)+ ']', file, file.name); } } // Set up the request. var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.onload = function () { if (xhr.status === 200) { var jsonResponse = JSON.parse(xhr.responseText); if (jsonResponse.status == 1) { $(jsonResponse.file_info).each(function(){ //Iterate through response and find data corresponding to each file uploaded var uploaded_file_name = this.original; var saved_file_name = this.target; var file_name_input = '<input type="hidden" class="image_name" name="image_names[]" value="' +saved_file_name+ '" />'; 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 {  $('.overlay').hide(); event.preventDefault(); } }; xhr.send(formData); }) return false; } 
6
23 дек. Atsakymas pateikiamas Ima gruodžio 23 d. 2014-12-23 14:05 „14, 14:05 2014-12-23 14:05

Aš juos apdorojau paprastu kodu. Demo versiją galite atsisiųsti čia.

Jūsų atveju tai yra labai įmanoma. Aš atliksiu žingsnis po žingsnio, kaip galite įkelti failą į serverį naudojant jQuery AJAX.

Pirma, sukurkite HTML failą, kad pridėtumėte kitą formos failo elementą, kaip parodyta žemiau.

 <form action="" id="formContent" method="post" enctype="multipart/form-data" > <input type="file" name="file" required id="upload"> <button class="submitI" >Upload Image</button> </form> 

Antra, sukurkite jquery.js failą ir pridėkite šį kodą, kad galėtume apdoroti failą serveryje

  $("#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"); } }); }); }); 

Tai viskas. Rodyti daugiau

6
19 июля '16 в 8:36 2016-07-19 08:36 Atsakymą davė Danielis Nyamasyo liepos 19 d. 16 d. 8:36 am. 2016-07-19 08:36

FormData naudojimas yra kelias, į kurį nurodo daug atsakymų. čia yra keletas kodų, kurie yra puikūs šiam tikslui. Aš taip pat sutinku su įdėtų ajax blokų komentarais dėl sudėtingų aplinkybių. Įskaitant e.PreventDefault (); mano patirtis leidžia kodą labiau suderinti su naršykle.

  $('#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"); } }); }); 
5
24 мая '18 в 4:56 2018-05-24 04:56 atsakė Mike Volmarui gegužės 24 d. 18 val. 4:56 2018-05-24 04:56

Taip, galite paprasčiausiai naudoti „JavaScript“, kad gautumėte failą, įsitikinkite, kad skaitote failą kaip duomenų URL. Išardykite medžiagą iki base64, kad gautumėte pagrindinius 64 koduotus duomenis, o tada, jei naudojate php arba iš tikrųjų tam tikrą nugaros kalbą, galite iššifruoti pagrindinius 64 duomenis ir įrašyti į failą, kaip parodyta toliau.

 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"])); 

Žinoma, tikriausiai norite atlikti tam tikrus patikrinimus, pavyzdžiui, patikrinti failo tipą, su kuriuo susiduriate, ir visa tai, bet tai yra idėja.

4
12 окт. Atsakymą Piacenti pateikė spalio 12 d 2014-10-12 08:57 '14, 8:57 2014-10-12 08:57
 <html> <head> <title>Ajax file upload</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function (e) { $("#uploadimage").on('submit', (function(e) { e.preventDefault(); $.ajax({ url: "upload.php", // Url to which the request is send type: "POST", // Type of request to be send, called as method data: new FormData(this), // Data sent to server, a set of key/value pairs (ie form fields and values) contentType: false, // The content type used when sending data to the server. cache: false, // To unable request pages to be cached processData:false, // To send DOMDocument or non processed data file it is set to false success: function(data) // A function to be called if request succeeds { alert(data); } }); })); </script> </head> <body> <div class="main"> <h1>Ajax Image Upload</h1><br/> <hr> <form id="uploadimage" action="" method="post" enctype="multipart/form-data"> <div id="image_preview"><img id="previewing" src="noimage.png" /></div> <hr id="line"> <div id="selectImage"> <label>Select Your Image</label><br/> <input type="file" name="file" id="file" required /> <input type="submit" value="Upload" class="submit" /> </div> </form> </div> </body> </html> 
4
17 марта '17 в 7:50 2017-03-17 07:50 atsakymą pateikė Nikit Barochiya kovo 17 d., 17 val. 07:50 2017-03-17 07:50

Jei norite įkelti failą, kurį naudotojas siunčia kaip formą, naudodamas „jquery“, naudokite šį kodą:

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

Tada siųskite formos duomenų objektą į serverį.

Taip pat galime tiesiogiai į „FormData“ objektą įtraukti failą arba „Blob“.

 data.append("myfile", myBlob, "filename.txt"); 
3
09 авг. Atsakymą pateikė VISHNU Radhakrishnan 09 rug . 2016-08-09 12:15 '16 at 12:15 pm 2016-08-09 12:15

„AjaxSubmit“ metodą galite naudoti taip: pasirinkdami failą, kurį reikia įkelti į serverį, forma turi būti siunčiama į 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; }); }); 
3
16 февр. atsakymas suteiktas Quy Le 16 vas. 2014-02-16 06:40 '14 at 6:40 2014-02-16 06:40

Jei norite atsisiųsti failą naudodami AJAX, čia yra kodas, kurį galite naudoti failams įkelti.

 $(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('<div class="alert alert-error"><strong>'+ value +'</strong><div>'); } }); $("#validation-errors").show(); } else { $("#output").html("<img src='"+response.file+"' />"); $("#output").css('display','block'); } } 

Čia yra failo atsisiųsti HTML.

 <form class="form-horizontal" id="upload" enctype="multipart/form-data" method="post" action="upload/image'" autocomplete="off"> <input type="file" name="image" id="image" /> </form> 
2
02 авг. atsakymas pateikiamas Nikunj K. 02 rug . 2016-08-02 13:55 '16 at 13:55 2016-08-02 13:55

Norėdami gauti visą formą, įskaitant tipo = "failą", turite naudoti FormData objektą stiprus>. Formos duomenų turinį galite pamatyti debugger → network → Headers po to, kai pateikiate formą.

 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"); }); 
2
20 окт. Atsakykite Dovydui spalio 20 d 2016-10-20 09:38 '16 at 9:38 2016-10-20 09:38
 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 }); 
2
09 июня '17 в 13:48 2017-06-09 13:48 Atsakymą pateikė Jayesh Paunikar birželio 17 d. 17 val. 13:48 2017-06-09 13:48

Ajax nepalaiko failų įkėlimo, o vietoj to turėtų būti naudojamas iframe.

1
23 февр. atsakymą pateikė antyrat 23 vasaris 2010-02-23 20:02 '10 ne 20:02 2010-02-23 20:02

Štai idėja, apie kurią galvojau:

 Have an iframe on page and have a referencer. 

Laikykite formą, kurioje perkelsite INPUT: File elementą.

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

Rezultatas bus išsiųstas į rėmelį, o tada galite tiesiog nusiųsti gautus duomenis į norimą vaizdų žymos lygį:

 data:image/png;base64,asdfasdfasdfasdfa 

ir puslapio apkrovos.

Manau, kad tai veikia man, ir priklausomai nuo to, ar galite padaryti kažką panašaus:

 .aftersubmit(function(){ stopPropigation()// or some other code which would prevent a refresh. }); 
0
31 окт. Atsakymą pateikė Fallenreaper, spalio 31 d. 2013-10-31 16:03 '13, 16:03, 2013-10-31 16:03

Štai kaip aš jį veikiau:

HTML

 <input type="file" id="file"> <button id='process-file-button'>Process</button> 

Js

 $('#process-file-button').on('click', function (e) { let files = new FormData(), // you can consider this as 'data bag' url = 'yourUrl'; files.append('fileName', $('#file')[0].files[0]); // append selected file to the bag named 'file' $.ajax({ type: 'post', url: url, processData: false, contentType: false, data: files, success: function (response) { console.log(response); }, error: function (err) { console.log(err); } }); }); 

Php

 if (isset($_FILES)  !empty($_FILES)) { $file = $_FILES['fileName']; $name = $file['name']; $path = $file['tmp_name']; // process your file } 
0
atsakymą pateikė m.B. 22 gr 2018-12-22 00:39 '18 prie 0:39 2018-12-22 00:39