JQuery Ajax Faylını yükləyin

Aşağıdakı jQuery kodu Ajax sorğusundan poçt metodundan istifadə etmək üçün faylları yükləmək üçün istifadə edilə bilərmi?

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

Mümkünsə, "məlumatları" doldurmalıyam? Doğru mu? Faylı yalnız serverə göndərirəm.

Googling ilə işləyirdim, amma tapdığım şey bir plugin idi, amma planımda istifadə etmək istəmirəm. Ən azı an üçün.

645
23 февр. Willy 23 fevralda təyin etdi 2010-02-23 19:58 '10 at 19:58 2010-02-23 19:58
@ 22 cavab

faylı ajax vasitəsilə mümkün olmur . Bir iframe istifadə edərək səhifəni yeniləmədən bir fayl yükləyə bilərsiniz. Daha ətraflı məlumatı buradan əldə edə bilərsiniz.

ƏLAVƏ OLUNUB:

XHR2 ilə, AJAX vasitəsilə fayl yüklənməsi dəstəklənir. Məsələn, FormData obyekti vasitəsilə, lakin təəssüf ki, bütün / köhnə brauzerlər tərəfindən dəstəklənmir.

FormData üçün dəstək masa üstü brauzerlərin aşağıdakı versiyalarından başlayır. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

Ətraflı məlumat üçün MDN linkinə baxın

541
23 февр. Adeel Feb 23 tərəfindən verilmiş cavab 2010-02-23 20:03 '10 saat 20:03 'da 2010-02-23 20:03

Iframes artıq ajax vasitəsilə fayl yükləmək üçün tələb olunmur. Bu yaxınlarda mən özüm məşğul oldum. Bu səhifələrə baxın:

AJAX və jQuery ilə HTML5 Fayl Yükləmə istifadə

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

Cavab yenilənib və təmizləndi. Ölçüləri yoxlamaq və getType funksiyasını növləri yoxlamaq üçün getSize funksiyasından istifadə edin. Əlavə tərəqqi kodu html və 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 + "%"); }; 

Yükləmə sinfi necə istifadə edilir

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

Ətraflı html kodu

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

Ətraflı css kodu

268
30 мая '12 в 10:00 2012-05-30 10:00 Cavab Ziinloader 30 may, 12 saat 10: 00-da verilir. 2012-05-30 10:00

Ajax faylını qeyd və yükləyə bilərsiniz. Fayllarımı yükləmək üçün jQuery $.ajax istifadə edirəm. Bir XHR obyektini istifadə etməyə çalışdım, ancaq PHP istifadə edərək server nəticələrini ala bilmədi.

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

Gördüyünüz kimi FormData obyektini boş və ya (serialized? -

Daha çox məlumat: - jQuery.ajax və FormData istifadə edərək fayl yükləmək - jQuery vasitəsilə faylları yüklə, FormData obyektini və fayl adını, bir GET tələbi təmin edir

PHP prosesi üçün aşağıdakı kimi bir şey istifadə edə bilərsiniz:

 //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 cavab 24 oktyabr, 19 : 35 -da pedrozopayares tərəfindən verilir 2014-07-24 19:28

Sadə yükləmə forması

 <!--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 янв. Cavab 19 yanvar tarixində vickisys tərəfindən verilir 2015-01-19 15:36 '15 saat 15:36 'də 2015-01-19 15:36

Bunun üçün olduqca gec idi, amma bir ajax əsaslı şəkil bərpa həllini axtarırdım və aradığım cavab bu mesaj boyunca dağılmışdı. Mən durduğum həll FormData obyektinə daxil oldu. Birlikdə tərtib etdiyim kodun əsas formasını tərtib oldum. Fd.append () istifadə edərək formaya xüsusi bir sahənin necə əlavə ediləcəyini və ajax sorğusu verildikdə cavab verilərini necə idarə edə biləcəyini görə bilərsiniz.

Html yükləyin:

 <!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> 

Burada php ilə işlədiyiniz halda yuxarıdakı htmldə göstərilən həm də xüsusi sahələrin istifadəsi də daxil olmaqla, yükləməni idarə edə bilərsiniz.

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 Cavab 25 mart '14 'da 0:53' da lee8oi tərəfindən verilmişdir 2014-03-25 00:53

AJAX loading XMLHttpRequest () ilə həqiqətən mümkündür. Bir iframeə ehtiyac yoxdur. Yükləmə tərəqqi göstərilə bilər.

Daha ətraflı məlumat üçün bax: Cavab karu.site/questions/1822 / ... sualına jQuery yüklə və AJAX faylını yükləyin .

30
02 апр. cavab koppor verilir 02 Apr 2012-04-02 16:21 '12 at 4:21 pm 2012-04-02 16:21

Bunu belə etmək istəyirsinizsə:

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

daha çox

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

bəlkə qərarınız.

13
17 сент. Cavab lgersman 17 sep tərəfindən verilir . 2012-09-17 17:40 '12 at 17:40 2012-09-17 17:40
  • Gizli iframe istifadə edin və bu forma dəyərini bu iframe adına təyin edin. Beləliklə, formu təqdim edərkən yalnız iframe yenilənəcəkdir.
  • Cavabın işlənməsi üçün iframe yükləmə hadisə üçün bir hadisə işleyicisini qeyd edin.

Blog yazı haqqında daha çox məlumat əldə edin: http://blog.manki.in/2011/08/ajax-fie-upload.html .

12
07 авг. Cavab Manki 07 avqustda verilir . 2011-08-07 07:31 '11 'də saat 07:31' də 2011-08-07 07:31 'də
 $("#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; }); 

redaktə: tərkib tipi və proses data göstərin. Sadəcə Ajax vasitəsilə faylları yükləmək üçün istifadə edə bilərsiniz ... təqdim təqdimatı xarici formanın bir elementi ola bilməz :)

10
29 янв. Gvice tərəfindən 29 yanvar cevap verildi 2013-01-29 00:46 '13 'da 0:46' da 2013-01-29 00:46

Əvvəlcədən önizləmə və istenmeyen faylları ajax önizlemesinden çıxardıqdan sonra endirdikdən sonra bir neçə faylın seçimi tətbiq etdim.

Ətraflı sənədləri burada tapa bilərsiniz: 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 дек. Cavab İma'ya 23 dekabrda verilir. 2014-12-23 14:05 '14 14:05 2014-12-23 14:05

Mən onları sadə kodla işləyirdim. Demo versiyasını buradan yükləyə bilərsiniz .

Sizin işiniz üçün çox mümkündür. JQuery AJAX istifadə edərək serverə bir fayl yükleyebileceğiniz kimi addım-addım edəcəyəm.

Birincisi, aşağıda göstərildiyi kimi aşağıdakı forma fayl elementini əlavə etmək üçün bir HTML faylı yaradın.

 <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> 

İkincisi, jquery.js faylını yaradın və dosyanızı serverdə işləmək üçün aşağıdakı kodu əlavə edin

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

Bütün bunlar. Daha çox göstər

6
19 июля '16 в 8:36 2016-07-19 08:36 Daniel Nyamasyo tərəfindən 19 iyul '16 'da saat 8: 36- da 2016-07-19 08:36 cavab verilir

FormData istifadə çox cavabların göstərdiyi yoludur. Burada bu məqsəd üçün böyük bir kod var. Daxili içərisindəki ajax bloklarının şərhlərini də çətin şərtlərdən tamamlayıram. E.PreventDefault () daxil olmaqla; Mənim təcrübəmdə kodu daha çox brauzer uyğunlaşdırır.

  $('#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 May 24'18 ' də Mike Volmar'a 4:56 2018-05-24 04:56' a cavab verdi

Bəli, faylın alınması üçün javascriptdən istifadə etməklə, faylın məlumatın URL kimi oxunduğundan əmin ola bilərsiniz. Əsas 64 kodlaşdırılmış məlumatı əldə etmək üçün base64-ə qədər material sökün və sonra, php və ya həqiqətən də bəzi geri dili istifadə edirsinizsə, aşağıda göstərildiyi kimi, əsas 64 məlumatın kodunu və faylya saxlaya bilərsiniz.

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

Əlbəttə ki, bəzi yoxlamalar aparmaq istərdiniz, məsələn, sizinlə işləyən faylın növünü yoxlayırsınız, amma bu, bir fikirdir.

4
12 окт. Cavab 12 oktyabrda Piacenti tərəfindən verilir . 2014-10-12 08:57 '14 da 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 Cavab Nikit Barochiya tərəfindən 17 Mart '17 'də 7:50 2017-03-17 07:50' də verilir

Jquery istifadə edərək, bir formanı istifadəçi tərəfindən göndərilən bir forma yükləmək üçün aşağıdakı kodu istifadə edin:

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

Daha sonra forma verilənlər obyektini serverə göndərin.

Formadata birbaşa bir fayl və ya Blob əlavə edə bilərsiniz.

 data.append("myfile", myBlob, "filename.txt"); 
3
09 авг. Cavab VISHNU Radhakrishnan 09 aug tərəfindən verilir . 2016-08-09 12:15 '16 saat 12:15 'də 2016-08-09 12:15

AjaxSubmit metodunu aşağıdakı kimi istifadə edə bilərsiniz: serverə yüklənmək üçün lazım olan bir fayl seçərkən forma serverə göndərilməlidir :)

 $(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 февр. Cavab verilib Quy Le 16 fevral. 2014-02-16 06:40 '14 saat 06:40 'da 2014-02-16 06:40

AJAX istifadə edərək fayl yükləmək istəyirsinizsə, burada faylları yükləmək üçün istifadə edə bilərsiniz.

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

Fayl yükləməsi üçün HTML burada.

 <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 авг. cavab Nikunj K. 02 avqustda verilir. 2016-08-02 13:55 '16 'da 13:55' də 2016-08-02 13:55 'də

Forma = "fayl" daxil olmaqla formanın bütün giriş məlumatlarını əldə etmək üçün FormData güclü> obyektindən istifadə etməlisiniz. Forma təqdim etdikdən sonra formData'nın məzmununu debugger → şəbəkə → başlıqlarda görə bilərsiniz.

 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 окт. Cavab David 20 oktyabrda 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 Cavab Jayesh Paunikar tərəfindən 09 iyun '13 ' da 13:48 2017-06-09 13:48' də verilir

Ajax fayl yükləmələrini dəstəkləmir, bunun yerinə iframe istifadə edilməlidir.

1
23 февр. Cavab antyrat 23 fevral tərəfindən verilir 2010-02-23 20:02 '10 at 20:02 2010-02-23 20:02

Burada düşündüyüm fikirdir:

 Have an iframe on page and have a referencer. 

GİRİŞ'i hərəkət etdiyiniz formu saxlayın: Fayl elementini.

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

Nəticə çərçivəyə göndəriləcək və sonra qəbul edilən məlumatları istədiyiniz şəkil etiketinin səviyyəsinə göndərə bilərsiniz:

 data:image/png;base64,asdfasdfasdfasdfa 

və səhifə yüklənir.

İnanıram ki, bu, mənim üçün işləyir və sizdən asılı olaraq bir şey edə bilərsiniz:

 .aftersubmit(function(){ stopPropigation()// or some other code which would prevent a refresh. }); 
0
31 окт. Cavab 31 oktyabr Fallenreaper tərəfindən verilir . 2013-10-31 16:03 '13 'da 16:03' da 2013-10-31 16:03

İşə necə başladım:

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
cavab m.B. tərəfindən verilir. 22 dekabr 2018-12-22 00:39 '18 at 0:39 2018-12-22 00:39

tags ilə bağlı digər suallar və ya bir sual