Kaip aš galiu įkelti failus asinchroniškai?

Norėčiau įkelti failą asinchroniškai, naudojant jQuery. Tai mano HTML:

 <span>File</span> <input type="file" id="file" name="file" size="10"/> <input id="uploadbutton" type="button" value="Upload"/> 

Ir čia yra mano Jquery kodas:

 $(document).ready(function () { $("#uploadbutton").click(function () { var filename = $("#file").val(); $.ajax({ type: "POST", url: "addFile.do", enctype: 'multipart/form-data', data: { file: filename }, success: function () { alert("Data Uploaded: "); } }); }); }); 

Vietoj to, kad failas būtų įkeltas, gaunu tik failo pavadinimą. Ką galiu padaryti, kad išspręstumėte šią problemą?

Dabartinis sprendimas

Norėdami įkelti failus, naudoju jQuery formos papildinį .

2695
03 окт. nustatė Sergio del Amo 03 okt. 2008-10-03 13:22 '08 13:22 pm 2008-10-03 13:22
@ 33 atsakymai
  • 1
  • 2

Naudodami HTML5, galite įkelti failus naudodami „Ajax“ ir „jQuery“. Be to, galite atlikti failų patikrinimus (pavadinimas, dydis ir MIME tipas) arba apdoroti pažangos įvykį su HTML5 (arba div) pažangos žyme. Neseniai turėjau atlikti failų įkėlimo programą, tačiau nenorėjau naudoti „ Flash“, „ iframe“ ar „plugins“, o po kai kurių tyrimų aš pateikiau sprendimą.

HTML:

 <form enctype="multipart/form-data"> <input name="file" type="file" /> <input type="button" value="Upload" /> </form> <progress></progress> 

Pirma, galite atlikti kai kuriuos patikrinimus, jei norite. Pavyzdžiui, faile „Keisti įvykį“:

 $(':file').on('change', function() { var file = this.files[0]; if (file.size > 1024) { alert('max upload size is 1k') } // Also see .name, .type }); 

Dabar pateikite „Ajax“ mygtuką:

 $(':button').on('click', function() { $.ajax({ // Your server script to process the upload url: 'upload.php', type: 'POST', // Form data data: new FormData($('form')[0]), // Tell jQuery not to process data or worry about content-type // You *must* include these options! cache: false, contentType: false, processData: false, // Custom XMLHttpRequest xhr: function() { var myXhr = $.ajaxSettings.xhr(); if (myXhr.upload) { // For handling the progress of the upload myXhr.upload.addEventListener('progress', function(e) { if (e.lengthComputable) { $('progress').attr({ value: e.loaded, max: e.total, }); } } , false); } return myXhr; } }); }); 

Kaip matote, su HTML5 (ir kai kuriais tyrimais) failų įkėlimas yra ne tik galimas, bet ir labai paprastas. Išbandykite „ Google Chrome“, nes kai kurie pavyzdžių HTML5 komponentai nėra prieinami kiekvienoje naršyklėje.

2393
06 янв. Atsakymas pateikiamas olanod Jan 06 2012-01-06 16:34 '12 at 4:34 pm 2012-01-06 16:34

JQuery failams atsisiųsti yra įvairių paruoštų įskiepių.

Šio tipo įkrovos užkardų naudojimas nėra maloni patirtis, todėl žmonės mėgsta naudoti paruoštus sprendimus.

Štai keletas:

Galite ieškoti daugiau projektų „NPM“ (naudodami „jquery-plugin“ kaip raktinį žodį) arba „Github“.

336
15 окт. Atsakymas pateikiamas Cheery 15 oct. 2008-10-15 13:35 '08, 13:35 2008-10-15 13:35

2017 m. Atnaujinimas: jis vis dar priklauso nuo naršyklių, naudojančių jūsų demografiją.

Svarbu suprasti naudojant naują HTML5 file API yra tai, kad ji nebuvo palaikoma prieš IE 10 . Jei konkreti rinka, kuriai taikote, yra didesnė nei vidutinė ankstesnių „Windows“ versijų prognozė, gali būti, kad neturėsite prieigos prie jos.

Nuo 2017 m. Apie 5% naršyklių yra vienas iš IE 6, 7, 8 arba 9. Jei einate į didelę korporaciją (pvz., Tai yra B2B įrankis arba kažkas, ką teikiate mokymui), šis skaičius gali būti raketas. Vos prieš kelis mėnesius - 2016 m. - dirbau su kompanija, kuri naudoja IE8 daugiau nei 60% savo mašinų.

Taigi, prieš ką nors darydami: patikrinkite, ar naršyklę naudoja jūsų vartotojas . Jei to nepadarysite, sužinosite greitą ir skausmingą pamoką, kodėl „darbas mano labui“ nėra pakankamai geras pristatymui klientui.

Po to atsakau nuo 2008 m.


Tačiau yra perspektyvių ne JS failų įkėlimo būdų. Galite sukurti „iframe“ puslapį (kurį paslėpti su CSS) ir nukreipti formą, kad paskelbtumėte „iframe“. Pagrindiniame puslapyje nereikia judėti.

Tai „tikras“ pranešimas, kad jis nebūtų visiškai interaktyvus. Jei jums reikia būsenos, jums reikia kažko serverio. Tai priklauso nuo jūsų serverio. ASP.NET turi patogesnių mechanizmų. PHP paprastas neveikia, tačiau galite naudoti „ Perl“ arba „Apache“ modifikacijas, kad galėtumėte dirbti aplink jį.

Jei jums reikia keleto failų atsisiuntimų, geriausia daryti kiekvieną failą vienu metu (norint įveikti didžiausias failų atsisiuntimo ribas). Pateikite pirmąją formą į iframe, sekite jo pažangą, naudokite aukščiau pateiktą ir kai jis yra baigtas, įterpkite antrą formą į iframe ir tt

Arba naudokite „Java“ / „Flash“ sprendimą. Jie yra daug lankstesni, ką jie gali padaryti su savo pranešimais ...

246
03 окт. Atsakymas pateikiamas Oli 03 okt. 2008-10-03 13:41 '08 13:41 pm 2008-10-03 13:41

Šiuo tikslu rekomenduoju naudoti „ Fine Uploader“ papildinį. Jūsų „ JavaScript kodas bus:

 $(document).ready(function() { $("#uploadbutton").jsupload({ action: "addFile.do", onComplete: function(response){ alert( "server response: " + response); } }); }); 
108
21 нояб. atsakymas pateikiamas pixxaar 21 nov. 2008-11-21 19:38 '08, 07:38 pm 2008-11-21 19:38

Pastaba Šis atsakymas yra pasenęs, dabar galite įkelti failus naudodami XHR.


Negalite įkelti failų naudodami XMLHttpRequest (Ajax). Galite imituoti efektą naudodami iframe arba „flash“. Puikus jQuery formos įskiepis, kuris siunčia failus per iframe, kad gautų efektą.

92
03 окт. Mattias atsakymas, pateiktas spalio 3 d 2008-10-03 13:36 '08 13:36 pm 2008-10-03 13:36

Šis „ AJAX“ failas, įkeliantis jQuery įskiepį, įkelia failą kažkaip ir siunčia atsakymą į atgalinį, nieko daugiau.

  • Tai nepriklauso nuo konkretaus HTML, tiesiog nurodykite <input type="file">
  • Tai nereikalauja, kad jūsų serveris atsakytų tam tikru būdu.
  • Nesvarbu, kiek failų naudojate arba kur jie yra puslapyje.

- Naudokite tik

 $('#one-specific-file').ajaxfileupload({ 'action': '/upload.php' }); 

- arba kiek -

 $('input[type="file"]').ajaxfileupload({ 'action': '/upload.php', 'params': { 'extra': 'info' }, 'onComplete': function(response) { console.log('custom handler for file:'); alert(JSON.stringify(response)); }, 'onStart': function() { if(weWantedTo) return false; // cancels upload }, 'onCancel': function() { console.log('no file selected'); } }); 
83
29 июля '11 в 3:34 2011-07-29 03:34 atsakymą pateikė Jordan Feldstein , liepos 29 d. 11 d. 03:34 2011-07-29 03:34

Apibendrinimas būsimiems skaitytojams.

Atsisiųskite asinchroninį failą

Iš HTML5

Galite įkelti failus naudodami jQuery, naudodami $.ajax() metodą, jei yra palaikomos FormData ir failo API (abi HTML5 savybės).

Be to, galite siųsti failus be „FormData“, bet bet kuriuo atveju failų API turi būti tvarkomi failams apdoroti, kad juos būtų galima siųsti naudojant „XMLHttpRequest“ („Ajax“).

 $.ajax({ url: 'file/destination.html', type: 'POST', data: new FormData($('#formWithFiles')[0]), // The form with the file inputs. processData: false, contentType: false // Using FormData, no need to process data. }).done(function(){ console.log("Success: Files sent!"); }).fail(function(){ console.log("An error occurred, the files couldn't be sent!"); }); 

Greito, švaraus „JavaScript“ ( be „jQuery“ ) pavyzdžio žr. „ Failų siuntimas naudojant„ FormData “objektą “.

Retreat

Kai HTML5 nepalaikomas (nėra failo API), vienintelis kitas švarus „JavaScript“ sprendimas (be „Flash“ ar kito naršyklės papildinio) yra paslėpta „ iframe“ technika, leidžianti emuluoti asinchroninį užklausą nenaudojant XMLHttpRequest objekto.

Ją sudaro „iframe“ nustatymas kaip formos su įvesties failais tikslas. Kai naudotojas siunčia užklausą ir failai yra įkeliami, tačiau atsakymas rodomas iframe viduje, o ne iš naujo pateikiant pagrindinį puslapį. Paslėpęs iframe, visas procesas tampa skaidrus vartotojui ir imituoja asinchroninį prašymą.

Jei tai padaryta teisingai, ji turėtų veikti beveik bet kurioje naršyklėje, tačiau ji turi tam tikrų įspėjimų, kaip gauti atsakymą iš „iframe“.

Tokiu atveju galite naudoti korpuso įskiepį, pvz., „ Bifröst“, kuris naudoja iframe techniką, bet taip pat teikia jQuery Ajax transportą, kuris leidžia siųsti failus naudojant tik $.ajax() :

 $.ajax({ url: 'file/destination.html', type: 'POST', // Set the transport to use (iframe means to use Bifröst) // and the expected data type (json in this case). dataType: 'iframe json', fileInputs: $('input[type="file"]'), // The file inputs containing the files to send. data: { msg: 'Some extra data you might need.'} }).done(function(){ console.log("Success: Files sent!"); }).fail(function(){ console.log("An error occurred, the files couldn't be sent!"); }); 

Įskiepiai

„Bifröst“ yra tik nedidelis apvalkalas, kuris papildo „jQuery ajax“ metodą, tačiau daugelis minėtų priedų, pvz., „ JQuery Form Plugin“ arba „ jQuery“ failo įkėlimas, apima visą HTML5 krūvą į įvairias atsargines kopijas ir kai kurias naudingas funkcijas, kad procesas būtų paprastesnis. Priklausomai nuo jūsų poreikių ir reikalavimų, galite apsvarstyti plataus įgyvendinimo versiją arba bet kurį iš šių papildinių.

82
25 авг. atsakymas duotas 404 25 rug. 2014-08-25 17:17 '14, 17:17 pm 2014-08-25 17:17

Naudojau žemiau esantį scenarijų, jei norite įkelti puikiai veikiančius vaizdus.

HTML

 <input id="file" type="file" name="file"/> <div id="response"></div> 

„Javascript“

 jQuery('document').ready(function(){ var input = document.getElementById("file"); var formdata = false; if (window.FormData) { formdata = new FormData(); } input.addEventListener("change", function (evt) { var i = 0, len = this.files.length, img, reader, file; for ( ; i < len; i++ ) { file = this.files[i]; if (!!file.type.match(/image.*/)) { if ( window.FileReader ) { reader = new FileReader(); reader.onloadend = function (e) { //showUploadedItem(e.target.result, file.fileName); }; reader.readAsDataURL(file); } if (formdata) { formdata.append("image", file); formdata.append("extra",'extra-data'); } if (formdata) { jQuery('div#response').html('<br /><img src="ajax-loader.gif"/>'); jQuery.ajax({ url: "upload.php", type: "POST", data: formdata, processData: false, contentType: false, success: function (res) { jQuery('div#response').html("Successfully uploaded"); } }); } } else { alert('Not a vaild image!'); } } }, false); }); 

Paaiškinimas

Naudodamas atsakymą „ div , rodomas animacijos įkėlimas ir atsakymas po atsisiuntimo pabaigos.

Geriausia tai, kad galite siųsti papildomus duomenis, pvz., Identifikatorius ir tt, naudodami šį scenarijų. Minėjau extra-data , kaip ir scenarijuje.

PHP lygiu tai veiks kaip įprastas failų atsisiuntimas. papildomus duomenis galima gauti kaip $_POST duomenis.

Čia nenaudokite papildinio ir pan. Kodą galite pakeisti taip, kaip norite. Čia jūs aklai nekoduojate. Tai yra pagrindinė bet kokio „jQuery“ failų atsisiuntimo funkcija. Iš tikrųjų javascript.

59
25 янв. Atsakymas, kurį pateikė Techie Jan 25 2013-01-25 14:03 '13, 14:03, 2013-01-25 14:03

Susidūriau su keletu tikrai galingų failų atsisiuntimo failų. Patikrinkite juos:

55
08 апр. Atsakymas pateikiamas Hristo 08 balandžio. 2011-04-08 19:43 '11, 19:43, 2011-04-08 19:43

Jūs galite lengvai tai padaryti vanilės javascript. Čia yra mano dabartinio projekto fragmentas:

 var xhr = new XMLHttpRequest(); xhr.upload.onprogress = function(e) { var percent = (e.position/ e.totalSize); // Render a pretty progress bar }; xhr.onreadystatechange = function(e) { if(this.readyState === 4) { // Handle file upload complete } }; xhr.open('POST', '/upload', true); xhr.setRequestHeader('X-FileName',file.name); // Pass the filename along xhr.send(file); 
43
17 февр. atsakymas pateikiamas 17 vasario mėn . 2013-02-17 12:34 '13, 12:34 pm 2013-02-17 12:34

Jį galite įkelti tik naudodami jQuery .ajax() .

HTML:

 .progress { display: none; } 

„Javascript“:

43
08 авг. atsakymą pateikė Zayn Ali 08 rug. 2014-08-08 05:59 '14, 5:59 am 2014-08-08 05:59

Paprasčiausias ir patikimiausias būdas, kurį aš padariau praeityje, yra tiesiog nukreipti paslėptą „iFrame“ žymą savo forma - tada jis bus išsiųstas į „iframe“ be naujo puslapio įkėlimo.

Tai yra, jei nenorite naudoti papildinio, javascript ar bet kokios kitos „magijos“ formos, išskyrus HTML. Žinoma, galite sujungti šią funkciją su „JavaScript“ arba bet kokiu turiniu.

 <form target="iframe" action="" method="post" enctype="multipart/form-data"> <input name="file" type="file" /> <input type="button" value="Upload" /> </form> <iframe name="iframe" id="iframe" style="display:none" ></iframe> 

Taip pat galite perskaityti „iframe onLoad turinį serverio klaidoms ar sėkmės atsakymams ir tada juos rodyti naudotojui.

„Chrome“, „iFrames“ ir „onLoad“

-note - jums reikia tik perskaityti, jei norite sužinoti, kaip nustatyti vartotojo sąsajos užraktą įkeliant / įkeliant

„Chrome“ šiuo metu nenaudoja „onLoad“ įvykio, jei jis buvo naudojamas failams perkelti. „Firefox“, „IE“ ir „Edge“ įsijungia įkrovos įvykį failams perkelti.

Vienintelis „Chrome“ rasti sprendimas yra naudoti slapuką.

Tam daugiausia reikia įkelti / atsisiųsti:

  • [Kliento pusė] Pradėti slapukų paieškos intervalą
  • [Serverių pusė] Atlikite viską, ko reikia su failų duomenimis
  • [Server Side] Nustatykite kliento intervalo slapuką
  • [Kliento pusė] Šis intervalas mato slapuką ir naudoja jį kaip „OnLoad“ įvykį. Pvz., Galite paleisti vartotojo sąsajos blokatorių, o tada „OnLoad“ (arba kai baigiamas slapukas) pašalinate vartotojo sąsajos blokatorių.

Slapuko naudojimas šiam tikslui yra bjaurus, bet jis veikia.

Aš sukūriau jQuery įskiepį, kad išspręstumėte šią problemą „Chrome“, kai įkeliate, galite rasti čia

https://github.com/ArtisticPhoenix/jQuery-Plugins/blob/master/iDownloader.js

Tas pats pagrindinis principas taikomas atsisiuntimui.

Jei norite naudoti „bootloader“ (įskaitant „JS“, žinoma)

  $('body').iDownloader({ "onComplete" : function(){ $('#uiBlocker').css('display', 'none'); //hide ui blocker on complete } }); $('somebuttion').click( function(){ $('#uiBlocker').css('display', 'block'); //block the UI $('body').iDownloader('download', 'htttp://example.com/location/of/download'); }); 

Ir serverio pusėje, prieš perduodami failo duomenis, sukurkite slapuką

  setcookie('iDownloader', true, time() + 30, "/"); 

Įskiepis matys slapuką ir po to suaktyvins „ onComplete atgalinį ryšį.

39
26 июня '14 в 7:43 2014-06-26 07:43 Atsakymas yra duotas meno kūriniamsPasirinkite birželio 26, 14 d., 7:43, 2014-06-26 07:43

Rastas sprendimas buvo, kad <form> buvo paslėptas „iFrame“. Tada „iFrame“ gali paleisti JS, kad jis būtų rodomas vartotojui, kuris jį užbaigė (kai puslapis įkeliamas).

32
18 окт. atsakymas, kurį pateikė Darryl Hein, spalio 18 d. 2008-10-18 22:30 '08 10:30 val. 2008-10-18 22:30

Aš tai parašiau „Rails“ aplinkoje . Tai yra tik penkios „JavaScript“ eilutės, jei naudojate „jQuery“ formos įskiepį.

Iššūkis yra tas, kad AJAX įkelia darbus, nes standartinė remote_form_for nesupranta daugialypės peržiūros formos. Jis neketina siųsti failų duomenų. Rails ieško AJAX užklausos.

Tai apima ir jQuery formos įskiepį.

Heres Rails kodas:

 <% remote_form_for(:image_form, :url => { :controller => "blogs", :action => :create_asset }, :html => { :method => :post, :id => 'uploadForm', :multipart => true }) do |f| %> Upload a file: <%= f.file_field :uploaded_data %> <% end %> 

Čia yra atitinkamas javascript:

 $('#uploadForm input').change(function(){ $(this).parent().ajaxSubmit({ beforeSubmit: function(a,f,o) { o.dataType = 'json'; }, complete: function(XMLHttpRequest, textStatus) { // XMLHttpRequest.responseText will contain the URL of the uploaded image. // Put it in an image element you create, or do with it what you will. // For example, if you have an image elemtn with id "my_image", then // $('#my_image').attr('src', XMLHttpRequest.responseText); // Will set that image tag to display the uploaded image. }, }); }); 

Be to, tai yra „Rails“ valdiklio, gana vanilės, veiksmas:

  @image = Image.new(params[:image_form]) @image.save render :text => @image.public_filename 

Per pastarąsias kelias savaites jį naudoju su „Bloggity“, ir jis dirbo kaip čempionas.

31
14 авг. Atsakymas pateikiamas 14 d. 2009-08-14 01:44 '09 ne 1:44 2009-08-14 01:44

„Simple Ajax“ pakrovimas yra dar vienas variantas:

https://github.com/LPology/Simple-Ajax-Uploader

  • Kryžminė naršyklė - veikia IE7 +, „Firefox“, „Chrome“, „Safari“, „Opera“
  • Parama daugialypiam atsisiuntimui - net ir ne HTML5 naršyklėse
  • Nėra blykstės ar išorinio CSS - tik vienas „JavaScript“ failas 5Kb
  • Papildoma įmontuota parama pilnų leidimų juostoms (naudojant PHP APC plėtinį)
  • Lankstus ir pritaikomas - naudokite bet kurį elementą kaip atsisiuntimo mygtuką, sukurkite savo pažangos rodiklius.
  • Nereikalaujama jokios formos, tiesiog nurodykite elementą, kuris bus naudojamas kaip atsisiuntimo mygtukas.
  • MIT licencija - nemokamas naudojimas komerciniame projekte

Naudojimo pavyzdys:

30
26 июня '13 в 4:12 2013-06-26 04:12 atsakymą pateikė vartotojo1091949 birželio 26 d., 13 val., 2013-06-26 04:12

jQuery Uploadify yra dar vienas geras įskiepis, kurį anksčiau panaudojau failams įkelti. „JavaScript“ kodas yra paprastas, kaip parodyta žemiau: kodas. Tačiau naujoji versija neveikia „Internet Explorer“.

 $('#file_upload').uploadify({ 'swf': '/public/js/uploadify.swf', 'uploader': '/Upload.ashx?formGuid=' + $('#formGuid').val(), 'cancelImg': '/public/images/uploadify-cancel.png', 'multi': true, 'onQueueComplete': function (queueData) { // ... }, 'onUploadStart': function (file) { // ... } }); 

Aš ieškojau daug, ir aš atėjau į kitą sprendimą įkelti failus be papildinio ir tik su ajax. Sprendimas yra toks:

 $(document).ready(function () { $('#btn_Upload').live('click', AjaxFileUpload); }); function AjaxFileUpload() { var fileInput = document.getElementById("#Uploader"); var file = fileInput.files[0]; var fd = new FormData(); fd.append("files", file); var xhr = new XMLHttpRequest(); xhr.open("POST", 'Uploader.ashx'); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { alert('success'); } else if (uploadResult == 'success') alert('error'); }; xhr.send(fd); } 
22
16 июня '13 в 12:49 2013-06-16 12:49 atsakymą pateikė farnoush resa birželio 16 d. 12:49 2013-06-16 12:49

Tai tik dar vienas sprendimas, kaip įkelti failą ( be jokių papildinių )

Naudojant paprastus „ JavaScript“ ir „ AJAX“ (su pažangos juosta)

dalis HTML

 <form id="upload_form" enctype="multipart/form-data" method="post"> <input type="file" name="file1" id="file1"><br> <input type="button" value="Upload File" onclick="uploadFile()"> <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> <h3 id="status"></h3> <p id="loaded_n_total"></p> </form> 

Js dalis

 function _(el){ return document.getElementById(el); } function uploadFile(){ var file = _("file1").files[0]; // alert(file.name+" | "+file.size+" | "+file.type); var formdata = new FormData(); formdata.append("file1", file); var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", progressHandler, false); ajax.addEventListener("load", completeHandler, false); ajax.addEventListener("error", errorHandler, false); ajax.addEventListener("abort", abortHandler, false); ajax.open("POST", "file_upload_parser.php"); ajax.send(formdata); } function progressHandler(event){ _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total; var percent = (event.loaded / event.total) * 100; _("progressBar").value = Math.round(percent); _("status").innerHTML = Math.round(percent)+"% uploaded... please wait"; } function completeHandler(event){ _("status").innerHTML = event.target.responseText; _("progressBar").value = 0; } function errorHandler(event){ _("status").innerHTML = "Upload Failed"; } function abortHandler(event){ _("status").innerHTML = "Upload Aborted"; } 

PHP dalis

 <?php $fileName = $_FILES["file1"]["name"]; // The file name $fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder $fileType = $_FILES["file1"]["type"]; // The type of file it is $fileSize = $_FILES["file1"]["size"]; // File size in bytes $fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true if (!$fileTmpLoc) { // if file not chosen echo "ERROR: Please browse for a file before clicking the upload button."; exit(); } if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){ // assuming the directory name 'test_uploads' echo "$fileName upload is complete"; } else { echo "move_uploaded_file function failed"; } ?> 

Čia yra programa PAVYZDYS

21
30 марта '16 в 19:48 2016-03-30 19:48 atsakymas pateikiamas Siddhartha Chowdhury kovo 30 d., 16 val., 19:48, 2016-03-30 19:48
 var formData=new FormData(); formData.append("fieldname","value"); formData.append("image",$('[name="filename"]')[0].files[0]); $.ajax({ url:"page.php", data:formData, type: 'POST', dataType:"JSON", cache: false, contentType: false, processData: false, success:function(data){ } }); 

Galite naudoti formos duomenis, kad paskelbtumėte visas savo vertybes, įskaitant vaizdus.

15
28 июля '15 в 16:39 2015-07-28 16:39 atsakymą pateikė Vivek Aasaithambi liepos 28 d., 15 val. 16:39 2015-07-28 16:39

Jei norite atsisiųsti failą asinchroniškai naudojant jQuery, atlikite šiuos veiksmus:

1 veiksmas Savo projekte atidarykite „Nuget“ tvarkyklę ir pridėkite paketą („jquery fileupload“ (tik jums reikia jį rašyti paieškos lauke, jis bus rodomas ir įdiegtas.)) URL: https://github.com/blueimp/jQuery-File-Upload

2 veiksmas. Įtraukite toliau pateiktus scenarijus į HTML failus, kurie jau buvo įtraukti į projektą vykdant paketą:

jquery.ui.widget.js

jquery.iframe-transport.js

jquery.fileupload.js

3 žingsnis Įrašykite failo atsisiuntimo valdiklį, kaip parodyta toliau pateiktame kode:

 <input id="upload" name="upload" type="file" /> 

4 žingsnis Rašykite js metodą kaip įkeltiFile, kaip parodyta toliau:

  function uploadFile(element) { $(element).fileupload({ dataType: 'json', url: '../DocumentUpload/upload', autoUpload: true, add: function (e, data) { // write code for implementing, while selecting a file. // data represents the file data. //below code triggers the action in mvc controller data.formData = { files: data.files[0] }; data.submit(); }, done: function (e, data) { // after file uploaded }, progress: function (e, data) { // progress }, fail: function (e, data) { //fail operation }, stop: function () { code for cancel operation } }); }; 

5 žingsnis Baigiant funkcijų skambučio skambučio failą, norėdami pradėti procesą, kaip parodyta toliau:

 $(document).ready(function() { uploadFile($('#upload')); }); 

6 žingsnis. Įrašykite MVC valdiklį ir veiksmus, kaip parodyta toliau:

 public class DocumentUploadController : Controller { [System.Web.Mvc.HttpPost] public JsonResult upload(ICollection<HttpPostedFileBase> files) { bool result = false; if (files != null || files.Count > 0) { try { foreach (HttpPostedFileBase file in files) { if (file.ContentLength == 0) throw new Exception("Zero length file!"); else //code for saving a file } } catch (Exception) { result = false; } } return new JsonResult() { Data=result }; } } 
13
23 июня '14 в 11:18 2014-06-23 11:18 atsakymas pateikiamas ashish, birželio 23, 14, 11:18 2014-06-23 11:18

Konvertuokite failą į base64 naudodami HTML5 readAsDataURL () arba kai kuriuos base64 koduotojus . Rašykite čia

 var reader = new FileReader(); reader.onload = function(readerEvt) { var binaryString = readerEvt.target.result; document.getElementById("base64textarea").value = btoa(binaryString); }; reader.readAsBinaryString(file);