Faylları asynchronously yükləyə bilərəm?

JQuery-dən istifadə edərək, asinxronizasiya faylını yükləmək istərdim. Bu mənim HTML:

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

Və burada Jquery :

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

Yüklənən faylın yerinə, yalnız fayl adını alıram. Bu problemi həll etmək üçün nə edə bilərəm?

Cari həll

Fayl yükləmək üçün jQuery Form Plugin istifadə edirəm.

2695
03 окт. Sergio del Amo tərəfindən 03 okt. 2008-10-03 13:22 '08 at 13:22 pm 2008-10-03 13:22
@ 33 cavab
  • 1
  • 2

HTML5 ilə Ajax və jQuery istifadə edərək faylları yükləyə bilərsiniz. Bundan əlavə, fayl çeklərini (adı, ölçüsü və MIME növü) həyata keçirə və ya bir HTML5 (və ya div) tərəqqi etiketi ilə tərəqqi hadisəsini idarə edə bilərsiniz. Bu yaxınlarda mən bir fayl yükləyicisi etmək məcburiyyətində oldum, amma Flash, iframe və ya plugins istifadə etmək istəmədim və bəzi tədqiqatlardan sonra bir həll ilə gəldim.

HTML:

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

Birincisi, istədiyinizi yoxlaya bilərsiniz. Məsələn, file onChange hadisə:

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

İndi Ajax düyməsinə basmaqla:

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

Gördüyünüz kimi, HTML5 (və bəzi tədqiqatlar) ilə fayl yüklənməsi yalnız mümkün deyil, həm də çox sadədir. Google Chrome- u sınayın, çünki nümunələrdəki HTML5 komponentlərinin bəziləri hər brauzerdə mövcud deyil.

2393
06 янв. Cavab verilmişdir yanvar 06 2012-01-06 16:34 '12 at 4:34 pm 2012-01-06 16:34

JQuery fayllarını yükləmək üçün müxtəlif hazır pluginlər var.

Bu cür açılış hacks işləmək xoş təcrübəsi deyil, belə ki, insanlar hazır həllər istifadə etmək istəyirlər.

İşdə bir neçə:

border=0

NPM ("jquery-plugin" sözünü istifadə edərək) və ya Github-da daha çox layihəni axtara bilərsiniz.

336
15 окт. Cavab şirin 15 oct verilir . 2008-10-15 13:35 '08 at 13:35 2008-10-15 13:35

2017 yeniləməsi: hələ də demoqrafik istifadə edən brauzerlərdən asılıdır.

Yeni HTML5 file API'sından istifadə etmək üçün vacibdir ki, bu, IE 10-dan əvvəl dəstəklənməmişdir . Hedeflediğiniz xüsusi bazar, Windows'un eski versiyalarına ortalama bir öngörülenden daha yüksəkse, bunun üçün erişiminiz olmayabilir.

2017-ci ildən etibarən brauzerlərin təxminən 5% -i IE 6, 7, 8 və ya 9-dan biridir. Böyük bir şirkətə (məsələn, bu B2B vasitəsi və ya təlim üçün çatdırdığınız bir şey) gedirsəniz, bu raket raket ola bilər. Bir neçə ay əvvəl - 2016-cı ildə - maşınlarının 60% -dən çoxu üçün IE8 istifadə edən bir şirkətlə məşğul oldum.

Belə ki, bir şey etməzdən əvvəl: brauzerin istifadəçiniz tərəfindən istifadə etdiyini yoxlayın . Bunu etməsəniz, "mənim üçün çalış" bir müştəriyə çatdırmaq üçün kifayət qədər yaxşı olmadığına dair tez və ağrılı bir dərs öyrənəcəksiniz.

Bunu 2008-ci ildən cavablandırıram.


Bununla belə, mövcud olmayan JS fayl yükləmə üsulları var. Bir səhifədə (CSS ilə gizlədilən) bir iframe yarada və sonra bir iframe-ə çatdırmaq üçün formunuzu hədəfə ala bilərsiniz. Əsas səhifədə hərəkət etmək lazım deyil.

Bu tamamilə interaktiv olmadığı üçün "real" bir yazıdır. Vəziyyətə ehtiyacınız varsa, onu idarə etmək üçün bir şey lazımdır. Bu serverinizdən asılıdır. ASP.NET daha rahat mexanizmlərə malikdir. PHP düzənliyi işləmir, ancaq ətrafında işləmək üçün Perl və ya Apache dəyişikliklərindən istifadə edə bilərsiniz.

Birdən çox fayl yükləməsinə ehtiyac varsa, hər bir faylın birində (faylın maksimum yüklənmə limitlərini aradan qaldırmaq üçün) bir daha yaxşıdır. Ilk iframe formasını təqdim edin, tərəqqini izləmək, yuxarıdakıları istifadə edin və başa çatdıqda, iframe-də ikinci forma yerləşdirin və s.

Və ya Java / Flash həllini istifadə edin. Onlar öz mesajları ilə nə edə biləcəyini daha çox çevik edirlər ...

246
03 окт. Cavab 03 oktyabrda verilir . 2008-10-03 13:41 '08 at 13:41 pm 2008-10-03 13:41

Bu məqsədlə, Fine Uploader plugin-i istifadə etməyi məsləhət görürəm. Sizin JavaScript :

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

Qeyd Bu cavabı köhnəlmişdir, indi XHR istifadə edərək faylları yükləyə bilərsiniz.


XMLHttpRequest (Ajax) istifadə edərək, faylları yükləyə bilməzsiniz. Effekt iframe və ya flash ilə simüle edə bilərsiniz. Effekti almaq üçün iframe vasitəsilə fayllarınızı göndərən böyük jQuery Form plugin .

92
03 окт. Mattias tərəfindən Oct 03- verilən cavab 2008-10-03 13:36 '08 at 13:36 pm 2008-10-03 13:36

JQuery plugin yükləyən bu AJAX faylı bəzi faylları yükləyir və geri çağırışa cavabı göndərir, başqa bir şey yoxdur.

  • Bu, xüsusi HTML-dən asılı deyil, yalnız <input type="file"> verin
  • Bu, sunucunuzun hər hansı bir şəkildə cavab verməsini tələb etmir.
  • Siz istifadə etdiyiniz neçə səhifədən və ya səhifədəki yerdən fərqlənmir.

- Yalnız istifadə edin

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

- və ya daha çox -

 $('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 Cavab İordaniya Feldşteyn tərəfindən 29 iyul 2011-ci il tarixində saat 03:34- də verilmişdir. 2011-07-29 03:34

Gələcək oxucuları üçün yekunlaşdırır.

Asynchronous faylını yükləyin

HTML5-dən

FormDatafayl API'si (HTML5 xüsusiyyətləri) də dəstəklənsə, $.ajax() metodundan istifadə edərək, jQuery istifadə edərək faylları yükləyə bilərsiniz.

Siz həmçinin FormData olmadan faylları göndərə bilərsiniz , lakin hər halda, faylları XMLHttpRequest (Ajax) istifadə edərək göndərilə biləcək faylları işlədilməlidir .

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

Tez, təmiz javascript ( jQuery olmadan ) Məsələn, " FormData obyektini istifadə edərək faylların göndərilməsi " baxın.

Geri çəkilmək

HTML5 dəstəklənməyincə (heç bir File API), yalnız digər təmiz JavaScript həlli (Flash və ya başqa bir brauzer plugin olmadan) XMLHttpRequest obyektini istifadə etmədən asynchronous bir istifadəni öykünən gizli iframe texnikasıdır.

Bir iframei giriş faylları olan bir formanın hədəfi kimi təyin etməkdən ibarətdir. Bir istifadəçi bir sorğu göndərdikdə və fayllar yüklənir, lakin cavab ana səhifəni yenidən göstərmək yerinə iframe daxilində göstərilir. Bir iframe gizlətmək bütün prosesi istifadəçi üçün şəffaf edir və asynchronous bir istek emulates.

Düzgün edildikdə, demək olar ki, hər hansı bir brauzerdə işləməlidir, amma iframe-dən cavab almaq üçün bəzi xəbərdarlıqlar var.

Bu halda, iframe texnikasını istifadə edən Bifröst kimi bir kabuk plugin istifadə etmək, lakin yalnız $.ajax() istifadə edərək, faylları göndərmək üçün imkan verən jQuery Ajax daşımasını təmin edə bilər:

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

Plugins

Bifröst yalnız jQuery ajax metoduna dəstək verən kiçik bir qabıqdır , ancaq jQuery Form Plugin və ya jQuery Fayl Yükləmə kimi yuxarıda göstərilən pluginlərdən bir çoxu bütün HTML5 yığını müxtəlif proseslərdə və prosesləri asanlaşdırmaq üçün bir neçə faydalı xüsusiyyətlərə daxildir. Sizin ehtiyaclarınıza və tələblərinizə əsasən, tətbiqin çılpaq versiyasını və ya bu plug-insların hər hansı birini nəzərdən keçirə bilərsiniz.

82
25 авг. cavab 404 25 avqust verilir . 2014-08-25 17:17 '14 at 17:17 pm 2014-08-25 17:17

Yaxşı işləyən şəkilləri yükləmək üçün aşağıdakı skriptdən istifadə etdim.

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

Şərhlər

Animasiya yüklənməsini və yüklənmə tamamlandıqdan sonra cavabı göstərmək üçün cavab div istifadə edirəm.

Bütün bunlardan ən yaxşısı, bu skriptdən istifadə edərək fayl ilə identifikatorlar və s. Kimi əlavə məlumatlar göndərə bilərsiniz. Ssenaridə olduğu kimi extra-data qeyd etmişəm.

PHP səviyyəsində bu müntəzəm fayl yükləməsi kimi işləyəcək. əlavə məlumatlar $_POST məlumatları kimi qəbul edilə bilər.

Burada plugin və s. İstifadə etməyin. İstədiyiniz kodu dəyişə bilərsiniz. Burada kor-koranə kodlamırsınız. Hər hansı bir jQuery faylının yüklənməsinin əsas funksiyasıdır. Əslində javascript.

59
25 янв. Techie Jan 25 tərəfindən verilmiş cavab 2013-01-25 14:03 '13 'da 14:03' de 2013-01-25 14:03

Faylları yükləmək üçün bir çox həqiqətən güclü jQuery faylları ilə tanış oldum. Onları yoxlayın:

55
08 апр. Cavab Hristo 08 apr verilir . 2011-04-08 19:43 '11 'də 19:43' da 2011-04-08 19:43

Bunu vanil javascript ilə asanlıqla edə bilərsiniz. Hazırda layihəmizin parçasıdır:

 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 февр. cavab mpen 17 feb verilir . 2013-02-17 12:34 '13 at 12:34 pm 2013-02-17 12:34

Yalnız jQuery .ajax() istifadə edərək yükləyə bilərsiniz.

HTML:

 .progress { display: none; } 

Javascript:

43
08 авг. Cavab Zeyn Əli 08 aug tərəfindən verilir . 2014-08-08 05:59 '14 at 5:59 pm 2014-08-08 05:59

Keçmişdə etdiyim ən asan və ən etibarlı yol, şəkillənizdə gizli iFrame etiketi məqsədi qoymaqdır - sonra səhifəni yenidən yükləmədən iframe göndəriləcək.

Yəni HTML-dən başqa bir plugin, javascript və ya başqa bir "sehrli" forma istifadə etmək istəmirsinizsə. Əlbəttə, bunu javascript və ya hər hansı bir şeylə birləşdirə bilərsiniz ...

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

Ayrıca iframe onLoad məzmununu server səhvləri və ya uğur cavabları üçün oxuya bilərsiniz və sonra onları istifadəçiyə göstərə bilərsiniz.

Chrome, iFrames və onLoad

-note - yükləmə / yükləmə zamanı bir istifadəçi interfeysi kilidinin qurulmasını necə merak etdiyinizi yalnız oxumaq lazımdır

Hal-hazırda, Chrome faylları ötürmək üçün istifadə olunduğunda bir iframe üçün onLoad hadisə tetiklemez. Firefox, IE və Edge faylları ötürmək üçün inload hadisəsini tetikler.

Chrome üçün gördüyüm yeganə həll variantı çerezdən istifadə etməkdir.

Bunun üçün əsasən loading / yüklənmə zamanı:

  • [Client Side] Cookie Axtarış Aralığına Başlayın
  • [Server tərəfi] Fayl məlumatları ilə lazım olan hər şeyi edin
  • [Server Side] Müştəri intervalı üçün cookie-ni seçin
  • [Müştəri tərəfi] Aralıq çerezi görür və onLoad hadisəsi kimi istifadə edir. Məsələn, bir istifadəçi interfeysi blokerini başlata, sonra onLoad (və ya çerez tamamlandıqda) istifadəçi interfeysi blokerini çıxardırsınız.

Bunun üçün çerez istifadə çirkindir, amma işləyir.

Yüklənərkən Chrome üçün bu problemi həll etmək üçün jQuery plugin yaratdım, burada tapa bilərsiniz

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

Eyni əsas prinsip download üçün tətbiq olunur.

Bootloader (JS daxil olmaqla, açıq-aydın)

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

Və server tərəfində, fayl məlumatlarını keçməzdən əvvəl bir cookie yaradın

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

Plugin onComplete görə onComplete və sonra onComplete geri çağırışını aktivləşdirəcəkdir.

39
26 июня '14 в 7:43 2014-06-26 07:43 Cavab ArtisticPhoenix 26 iyun '14 'də verildi 7:43 2014-06-26 07:43

Mən tapdığım həll isə <form> məqsədi gizli iFrame idi. Sonra iFrame JS-i göstərmək üçün istifadə edə bilər, onu dolduran (səhifə yüklənərkən).

32
18 окт. Darryl Hein tərəfindən verilmiş cavabı Oct 18. 2008-10-18 22:30 '08 saat 22: 30-da 2008-10-18 22:30

Bunu bir Rails mühitində yazdım . JQuery formu plugin istifadə edirsinizsə, bunlar yalnız beş xətt javascript var.

Məsələ ondadır ki, AJAX yüklənməsi standart remote_form_for görünüşün çox komponentli formasını anlamadığı üçün işləyir. O, fayl məlumatlarını göndərməyəcək. Rails bir AJAX tələbi axtarır.

JQuery forması pluginini ehtiva edən.

Bunun üçün Heres Rails kodu:

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

Müvafiq 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. }, }); }); 

Və heres Rails nəzarətçi hərəkət, olduqca vanil:

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

Bloggity ilə son bir neçə həftə ərzində istifadə etdim və çempion kimi çalışdım.

31
14 авг. Cavab 14 avqustda verilir . 2009-08-14 01:44 '09 at 1:44 2009-08-14 01:44

Sadə Ajax loading başqa bir seçimdir:

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

  • Cross-browser - IE7 +, Firefox, Chrome, Safari, Opera-da işləyir
  • Birdən çox eşzamanlı yükləmə üçün dəstək - hətta HTML5 brauzerlərindən olmayan
  • No flash və ya xarici CSS - yalnız bir Javascript fayl 5Kb
  • Tam keçid barlarına əlavə dəstək (PHP APC uzadılması ilə)
  • Flexible və özelleştirilebilir - hər hansı bir elementi bir indirme düyməsi olaraq istifadə edin, öz tərəqqi göstəriciləri yaradın.
  • Heç bir forma tələb olunmur, yalnız download düyməsinə kimi istifadə olunacaq elementi göstərin.
  • MİT Lisenziyası - kommersiya layihəsində pulsuz istifadə

İstifadə nümunəsi:

30
26 июня '13 в 4:12 2013-06-26 04:12 Cavab istifadəçi1091949 26 iyun ' ta 4:12 2013-06-26 04:12 tərəfindən verilir

jQuery Uploadify faylları yükləmək üçün daha əvvəl istifadə etdiyim yaxşı bir plugindir . JavaScript kodu aşağıda göstərildiyi kimi sadədir: kodu. Bununla birlikdə, yeni versiya Internet Explorer'da işləmir.

 $('#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) { // ... } }); 

Mən bir çox şeyi aradım və bir plugin olmadan və yalnız ajax ilə faylları yükləmək üçün başqa bir həll gəldim. Həll aşağıdakı kimidir:

 $(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 Cavab farnoush resa tərəfindən verilir 16 iyun '13 saat 12:49 2013-06-16 12:49

Bu, bir fayl yükləmək üçün başqa bir həlldir ( heç bir plug-in olmadan )

Simple JavascriptsAJAX (tərəqqi bar ilə)

HTML hissəsi

 <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 hissəsi

 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 hissəsi

 <?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"; } ?> 

Ərizə EXAMPLE burada

21
30 марта '16 в 19:48 2016-03-30 19:48 Cavab Siddhartha Chowdhury'ye 30 Mart '19 , 19:48 2016-03-30 19:48' a verilir
 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){ } }); 

Şəkilləri daxil olmaqla, bütün dəyərlərinizi dərc etmək üçün form data istifadə edə bilərsiniz.

15
28 июля '15 в 16:39 2015-07-28 16:39 Cavab Vivek Aasaithambi tərəfindən verilir 28 iyul '15 16:39 2015-07-28 16:39

JQuery-dən istifadə edərək asinxron olaraq fayl yükləmək üçün aşağıdakı adımları baxın:

Addım 1 Layihədə Nuget menecerini açın və paketi əlavə edin (jquery fileupload (yalnız axtarış sahəsində yazmaq lazımdır, görünəcək və quraşdırılacaq)) URL: https://github.com/blueimp/jQuery-File-Upload

Addım 2 Aşağıdakı skriptləri paketdə işləyərək layihəyə əlavə edilmiş HTML fayllarına əlavə edin:

jquery.ui.widget.js

jquery.iframe-transport.js

jquery.fileupload.js

Addım 3 Aşağıdakı kodu göstərildiyi kimi fayl yükləmə rejimini qeyd edin:

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

Addım 4 Aşağıda göstərildiyi kimi js metodunu uploadFile olaraq yazın:

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

Addım 5 İşarənin çağırış faylının başa yüklənmə prosesinə başlamaq üçün aşağıda göstərildiyi kimi başlayın:

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

Шаг 6 Запишите MVC-контроллер и действие, как показано ниже:

 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
ответ дан ashish 23 июня '14 в 11:18 2014-06-23 11:18

Преобразуйте файл в base64 с помощью HTML5 readAsDataURL() или некоторый кодировщик base64 . Заклинание здесь

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

Затем для получения:

 window.open("data:application/octet-stream;base64," + base64); 
9
ответ дан tnt-rox 23 июня '14 в 21:50 2014-06-23 21:50

Məsələn: Если вы используете jQuery, вы можете легко загрузить файл. Это небольшой и мощный плагин jQuery, http://jquery.malsup.com/form/ .

Misal

 var $bar = $('.ProgressBar'); $('.Form').ajaxForm({ dataType: 'json', beforeSend: function(xhr) { var percentVal = '0%'; $bar.width(percentVal); }, uploadProgress: function(event, position, total, percentComplete) { var percentVal = percentComplete + '%'; $bar.width(percentVal) }, success: function(response) { // Response } }); 

Я надеюсь, что было бы полезно

8
14 окт. Cavab MEAbid 14 oct verilir . '16 в 10:17 2016-10-14 10:17

Вы можете увидеть решение с рабочей демонстрацией здесь , которая позволяет просматривать и отправлять файлы формы сервер. Для вашего случая вам необходимо использовать Ajax , чтобы облегчить загрузку файла на сервер:

 <from action="" id="formContent" method="post" enctype="multipart/form-data"> <span>File</span> <input type="file" id="file" name="file" size="10"/> <input id="uploadbutton" type="button" value="Upload"/> </form> 

Представленные данные являются formdata. В jQuery используйте функцию отправки формы вместо кнопки, чтобы отправить файл формы, как показано ниже.

 $(document).ready(function () { $("#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("successfully submitted"); }); }); }); 

Daha ətraflı oxuyun

8
ответ дан Daniel Nyamasyo 19 июля '16 в 8:18 2016-07-19 08:18

Siz istifadə edə bilərsiniz

 $(function() { $("#file_upload_1").uploadify({ height : 30, swf : '/uploadify/uploadify.swf', uploader : '/uploadify/uploadify.php', width : 120 }); }); 

Demo

8
ответ дан Amit 12 мая '14 в 13:10 2014-05-12 13:10

Современный подход без Jquery состоит в том, чтобы использовать объект FileList, который вы возвращаете из <input type="file"> когда пользователь выбирает файл (-ы), а затем использовать Fetch для публикации FileList, обернутого вокруг объекта FormData .

 // The input DOM element const inputElement = document.querySelector('input'); // Listen for a file submit from user inputElement.addEventListener('change', () => { const data = new FormData(); data.append('file', inputElement.files[0]); data.append('imageName', 'flower'); // Post to server fetch('/uploadImage', { method: 'POST', body: data }); }); 
8
ответ дан Alister Norris 17 авг. '18 в 14:47 2018-08-17 14:47

Вы можете передать дополнительные параметры вместе с именем файла при выполнении асинхронной загрузки с использованием XMLHttpRequest (без зависимости flash и iframe). Добавьте значение дополнительного параметра с помощью FormData и отправьте запрос на загрузку.


 var formData = new FormData(); formData.append('parameter1', 'value1'); formData.append('parameter2', 'value2'); formData.append('file', $('input[type=file]')[0].files[0]); $.ajax({ url: 'post back url', data: formData, // other attributes of AJAX }); 

Кроме того, загрузка файла интерфейса пользователя Syncfusion JavaScript предоставляет решение для этого сценария, просто используя аргумент события. вы можете найти документацию здесь и более подробную информацию об этом элементе управления здесь, введите описание ссылки здесь

6
ответ дан Karthik Ravichandran 14 нояб. '18 в 15:42 2018-11-14 15:42

Посмотрите, как обрабатывать процесс загрузки файла, асинхронно здесь: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Пример из ссылки

 <?php if (isset($_FILES['myFile'])) { // Example: move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']); exit; } ?><!DOCTYPE html> <html> <head> <title>dnd binary upload</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function sendFile(file) { var uri = "/index.php"; var xhr = new XMLHttpRequest(); var fd = new FormData(); xhr.open("POST", uri, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4  xhr.status == 200) { // Handle response. alert(xhr.responseText); // handle response. } }; fd.append('myFile', file); // Initiate a multipart/form-data upload xhr.send(fd); } window.onload = function() { var dropzone = document.getElementById("dropzone"); dropzone.ondragover = dropzone.ondragenter = function(event) { event.stopPropagation(); event.preventDefault(); } dropzone.ondrop = function(event) { event.stopPropagation(); event.preventDefault(); var filesArray = event.dataTransfer.files; for (var i=0; i<filesArray.length; i++) { sendFile(filesArray[i]); } } } </script> </head> <body> <div> <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag  drop your file here...</div> </div> </body> </html> 
6
ответ дан Allende 08 июля '15 в 20:59 2015-07-08 20:59

Это мое решение.

 <form enctype="multipart/form-data"> <div class="form-group"> <label class="control-label col-md-2" for="apta_Description">Description</label> <div class="col-md-10"> <input class="form-control text-box single-line" id="apta_Description" name="apta_Description" type="text" value=""> </div> </div> <input name="file" type="file" /> <input type="button" value="Upload" /> </form> 

и js

 <script> $(':button').click(function () { var formData = new FormData($('form')[0]); $.ajax({ url: '@Url.Action("Save", "Home")', type: 'POST', success: completeHandler, data: formData, cache: false, contentType: false, processData: false }); }); function completeHandler() { alert(":)"); } </script> 

контроллер

 [HttpPost] public ActionResult Save(string apta_Description, HttpPostedFileBase file) { return Json(":)"); } 
3

Используя HTML5 и JavaScript , загрузка async довольно проста, я создаю логику загрузки вместе с вашим html, это не полностью работает, так как ему нужно api, но демонстрируйте, как это работает, если у вас есть конечная точка, вызываемая /upload из корня вашего веб-сайт, этот код должен работать на вас:

Также есть дополнительная информация о XMLHttpReques:

Объект XMLHttpRequest

Все современные браузеры поддерживают объект XMLHttpRequest. Объект XMLHttpRequest может использоваться для обмена данными с веб-сервером за кулисами. Это означает, что можно обновлять части веб-страницы без перезагрузки всей страницы.


Создать объект XMLHttpRequest

Все современные браузеры (Chrome, Firefox, IE7+, Edge, Safari, Opera) имеют встроенный объект XMLHttpRequest.

Синтаксис для создания объекта XMLHttpRequest:

variable = new XMLHttpRequest();


Доступ во всех доменах

По соображениям безопасности современные браузеры не разрешают доступ к доменам.

Это означает, что и веб-страница, и файл XML, который она пытается загрузить, должны быть расположены на одном сервере.

Примеры в W3Schools открывают все файлы XML, расположенные в домене W3Schools.

Если вы хотите использовать пример выше на одной из ваших собственных веб-страниц, загружаемые файлы XML должны размещаться на вашем собственном сервере.

Для более подробной информации вы можете продолжить чтение здесь ...

3
ответ дан Alireza 12 марта '18 в 15:32 2018-03-12 15:32

Вы можете использовать новый API Fetch с помощью JavaScript. Как это:

 function uploadButtonCLicked(){ var input = document.querySelector('input[type="file"]') fetch('/url', { method: 'POST', body: input.files[0] }).then(res => res.json()) // you can do something with response .catch(error => console.error('Error:', error)) .then(response => console.log('Success:', response)); } 

Преимущество: API-интерфейс Fetch поддерживается всеми современными браузерами, поэтому вам не нужно ничего импортировать. Также обратите внимание, что fetch() возвращает Promise, который затем обрабатывается с помощью .then(..code to handle response..) асинхронно.

2
ответ дан BlackBeard 21 мая '18 в 13:14 2018-05-21 13:14

Вы можете выполнять асинхронную загрузку нескольких файлов, используя JavaScript или jQuery, и это без использования какого-либо плагина. Вы также можете отобразить прогресс загрузки файла в режиме реального времени в контроле прогресса. Я наткнулся на 2 хорошие ссылки -

  1. Функция многократной загрузки файлов на основе веб-форм ASP.NET с индикатором выполнения
  2. ASP.NET MVC на основе нескольких загрузок файлов в jQuery

Серверный язык - С#, но вы можете внести некоторые изменения, чтобы он работал с другим языком, таким как PHP.

Загрузка файла ASP.NET Core MVC:

В представлении создания файла управления загрузкой в HTML:

 <form method="post" asp-action="Add" enctype="multipart/form-data"> <input type="file" multiple name="mediaUpload" /> <button type="submit">Submit</button> </form> 

Теперь создайте метод действия в вашем контроллере:

 [HttpPost] public async Task<IActionResult> Add(IFormFile[] mediaUpload) { //looping through all the files foreach (IFormFile file in mediaUpload) { //saving the files string path = Path.Combine(hostingEnvironment.WebRootPath, "some-folder-path"); using (var stream = new FileStream(path, FileMode.Create)) { await file.CopyToAsync(stream); } } } 

Переменная hostingEnvironment имеет тип IHostingEnvironment, который может быть введен в контроллер с помощью внедрения зависимости, например:

 private IHostingEnvironment hostingEnvironment; public MediaController(IHostingEnvironment environment) { hostingEnvironment = environment; } 
2
ответ дан Joe Clinton 29 авг. '18 в 22:51 2018-08-29 22:51
  • 1
  • 2

Другие вопросы по меткам или Задайте вопрос