Як я магу загружаць файлы асінхронна?

Я хацеў бы загрузіць файл асінхронна з дапамогай jQuery. Гэта мой HTML:

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

І вось мой код 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: "); } }); }); }); 

Замест загружанага файла я атрымліваю толькі імя файла. Што я магу зрабіць, каб выправіць гэтую праблему?

бягучае рашэнне

Я выкарыстоўваю jQuery Form Plugin для загрузкі файлаў.

2695
03 окт. зададзены Sergio del Amo 03 каст. 2008-10-03 13:22 '08 у 13:22 2008-10-03 13:22
@ 33 адказаў
  • 1
  • 2

З HTML5 вы можаце зрабіць загрузку файлаў з дапамогай Ajax і jQuery. Акрамя таго, вы можаце выконваць праверкі файлаў (імя, памер і тып MIME) або апрацоўваць падзея прагрэсу з тэгам прагрэсу HTML5 (або div). Нядаўна мне давялося зрабіць загрузнік файлаў, але я не хацеў выкарыстаць Flash, iframe або убудовы, і пасля некаторых даследаванняў я прыдумаў рашэнне.

HTML:

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

Па-першае, вы можаце зрабіць некаторую праверку, калі хочаце. Напрыклад, у падзеі onChange файла:

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

Цяпер Ajax submit з кнопкай:

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

Як вы можаце бачыць, з HTML5 (і некаторым даследаваннем) загрузка файлаў не толькі становіцца магчымай, але і вельмі просты. Паспрабуйце ў Google Chrome, паколькі некаторыя з кампанентаў HTML5 ў прыкладах недаступныя ў кожным браўзэры.

2393
06 янв. адказ дадзены olanod 06 студз. 2012-01-06 16:34 '12 у 16:34 2012-01-06 16:34

Існуюць розныя гатовыя убудовы для загрузкі файлаў для jQuery.

Выкананне такога роду загрузных дзівацтваў не з'яўляецца прыемным досведам, таму людзям падабаецца выкарыстоўваць гатовыя рашэнні.

Тут некалькі:

border=0

Вы можаце шукаць больш праектаў на NPM (выкарыстоўваючы "jquery-plugin" у якасці ключавога слова) або ў Github.

336
15 окт. адказ дадзены Cheery 15 каст. 2008-10-15 13:35 '08 у 13:35 2008-10-15 13:35

2017 Абнаўленне: усё роўна залежыць ад браўзэраў, якія выкарыстоўваюць вашы дэмаграфічныя дадзеныя.

Важнае значэнне для разумення з дапамогай новага HTML5 API file заключаецца ў тым, што ня падтрымліваўся да IE 10 . Калі канкрэтны рынак, на які вы нацэльваецеся, мае больш высокую, чым сярэднюю, предикацию да больш старым версіях Windows, у вас можа не быць доступу да яе.

Пачынаючы з 2017 года, каля 5% браўзэраў з'яўляюцца адным з IE 6, 7, 8 ці 9. Калі вы накіроўваецеся ў вялікую карпарацыю (напрыклад, гэта інструмент B2B ці нешта, што вы дастаўляе для навучання), гэты нумар можа ракета. Усяго некалькі месяцаў таму - у 2016 годзе - я меў справу з кампаніяй, якая выкарыстоўвае IE8 на больш чым 60% сваіх машын.

Такім чынам, перш чым што-небудзь рабіць: праверыць, што браўзэр выкарыстоўвае ваш карыстальнік. Калі вы гэтага не зробіце, вы навучыцеся хуткаму і пакутлівага ўроку ў тым, чаму "працуе для мяне" недастаткова добры для дастаўкі кліенту.

Далей варта мой адказ ад 2008 года.


Аднак існуюць жыццяздольныя ня-JS-метады загрузкі файлаў. Вы можаце стварыць iframe на старонцы (якую вы хаваеце з дапамогай CSS), а затым наладзіць таргетынг сваёй формы для публікацыі ў iframe. На галоўнай старонцы не трэба перамяшчацца.

Гэта "рэальны" пост, каб ён не быў цалкам інтэрактыўным. Калі вам патрэбен статус, вам трэба нешта сервернае для яго апрацоўкі. Гэта залежыць ад вашага сервера. ASP.NET мае больш зручныя механізмы. PHP plain не працуе, але вы можаце выкарыстоўваць Perl або мадыфікацыі Apache, каб абыйсці яго.

Калі вам трэба некалькі загрузак файлаў, лепш за ўсё рабіць кожны файл па аднаму (каб пераадолець максімальныя межы загрузкі файлаў). Адпраўляйце першую форму ў iframe, адсочвайце яе прагрэс, выкарыстоўваючы вышэйпрыведзенае і калі ён скончыў, размесціце другую форму ў iframe і г.д.

Або выкарыстоўвайце рашэнне Java / Flash. Яны нашмат больш гнуткія ў тым, што яны могуць рабіць са сваімі паведамленнямі ...

246
03 окт. адказ дадзены Oli 03 каст. 2008-10-03 13:41 '08 у 13:41 2008-10-03 13:41

Для гэтай мэты я рэкамендую выкарыстоўваць убудова Fine Uploader . Ваш код JavaScript будзе:

 $(document).ready(function() { $("#uploadbutton").jsupload({ action: "addFile.do", onComplete: function(response){ alert( "server response: " + response); } }); }); 
108
21 нояб. адказ дадзены pixxaar 21 лістапада. 2008-11-21 19:38 '08 у 19:38 2008-11-21 19:38

Заўвага. Гэты адказ састарэў, зараз можна загружаць файлы з дапамогай XHR.


Вы не можаце загружаць файлы, выкарыстоўваючы XMLHttpRequest (Ajax). Вы можаце імітаваць эфект, выкарыстоўваючы iframe або Flash. Выдатны убудова jQuery Form, які адпраўляе вашы файлы праз iframe, каб атрымаць эфект.

92
03 окт. адказ дадзены Mattias 03 каст. 2008-10-03 13:36 '08 у 13:36 2008-10-03 13:36

Гэты AJAX файл, загружае убудова jQuery , загружае файл somehwere і перадае адказ на зваротны выклік, нічога больш.

  • Гэта не залежыць ад канкрэтнага HTML, проста дайце яму <input type="file">
  • Гэта не патрабуе ад вашага сервера адказу якім-небудзь канкрэтным спосабам.
  • Усё роўна, колькі файлаў вы карыстаецеся ці дзе яны знаходзяцца на старонцы

- Выкарыстоўвайце ўсяго толькі

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

- ці столькі ж, колькі -

 $('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 адказ дадзены Jordan Feldstein 29 ліпеня '11 ў 03:34 2011-07-29 03:34

Падвядзенне вынікаў для будучых чытачоў.

Загрузка асінхроннага файла

З HTML5

Вы можаце загружаць файлы з дапамогай jQuery, выкарыстоўваючы метад $.ajax() калі FormData і API файлаў падтрымліваюцца (абодва ўласцівасці HTML5).

Вы таксама можаце адпраўляць файлы без FormData, але ў любым выпадку API файлаў павінен прысутнічаць для апрацоўкі файлаў такім чынам, каб іх можна было адправіць з дапамогай 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!"); }); 

Для хуткага, чыстага JavaScript (без jQuery) прыклад см. " Адпраўка файлаў з выкарыстаннем аб'екта FormData ".

адступаць

Калі HTML5 не падтрымліваецца (няма файлавы API), адзінае іншае чыстае рашэнне для JavaScript (без Flash або любога іншага плагіна браўзэра) - гэта прыхаваная тэхніка iframe, якая дазваляе эмуляваць асінхронны запыт без выкарыстання аб'екта XMLHttpRequest.

Ён складаецца з ўстаноўкі iframe ў якасці мэты формы з уваходнымі файламі. Калі карыстальнік адпраўляе запыт, і файлы загружаюцца, але адказ адлюстроўваецца ўнутры iframe замест паўторнай рэндэрынгу галоўнай старонкі. Утойванне iframe робіць ўвесь працэс празрыстым для карыстальніка і эмулюе асінхронны запыт.

Калі ўсё зроблена правільна, яно павінна працаваць практычна ў любым браўзэры, але ў ім ёсць некаторыя засцярогі аб тым, як атрымаць адказ ад iframe.

У гэтым выпадку вы можаце аддаць перавагу выкарыстоўваць убудова-абалонку, такі як Bifröst, які выкарыстоўвае тэхніку iframe, але таксама дае транспарт JQuery Ajax, які дазваляе адпраўляць файлы з дапамогай толькі $.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!"); }); 

убудовы

Bifröst - гэта ўсяго толькі невялікая абалонка, якая дадае дапаможную падтрымку метаду jQuery ajax, але многія з вышэйзгаданых убудоў, такіх як jQuery Form Plugin або jQuery File Upload, ўключаюць ўвесь стэк з HTML5 ў розныя рэзервовыя копіі і некаторыя карысныя функцыі для палягчэння працэсу. У залежнасці ад вашых патрэбаў і патрабаванняў вы можаце разгледзець голы варыянт рэалізацыі або любы з гэтых убудоў.

82
25 авг. адказ дадзены 404 25 жнів. 2014-08-25 17:17 '14 у 17:17 2014/08/25 17:17

Я выкарыстаў ніжэй script, каб загружаць выявы, якія працуюць нармальна.

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

тлумачэнне

Я выкарыстоўваю адказ div , каб паказаць загрузку анімацыі і адказ пасля завяршэння загрузкі.

Лепш за ўсё вы можаце адправіць дадатковыя дадзеныя, такія як ідэнтыфікатары і г.д., з файлам пры выкарыстанні гэтага script. Я згадаў яго extra-data , як у script.

На ўзроўні PHP гэта будзе працаваць як звычайная загрузка файла. дадатковыя дадзеныя могуць быць атрыманы як дадзеныя $_POST .

Тут вы не выкарыстоўваеце плягін і іншае. Вы можаце змяніць код так, як хочаце. Тут вы не слепа кодируете. Гэта асноўная функцыянальнасць любой загрузкі файла jQuery. На самай справе Javascript.

59
25 янв. адказ дадзены Techie 25 студз. 2013-01-25 14:03 '13 у 14:03 2013/01/25 14:03

Я сутыкнуўся з некалькімі сапраўды магутнымі jQuery файламі для загрузкі файлаў. Праверце іх:

55
08 апр. адказ дадзены Hristo 08 крас. 2011-04-08 19:43 '11 у 19:43 2011-04-08 19:43

Вы можаце лёгка гэта зрабіць у ванільным JavaScript. Вось фрагмент майго бягучага праекта:

 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 февр. адказ дадзены mpen 17 февр. 2013-02-17 12:34 '13 у 12:34 2013/02/17 00:34

Вы можаце загрузіць проста з дапамогай Jquery .ajax() .

HTML:

 .progress { display: none; } 

JavaScript:

43
08 авг. адказ дадзены Zayn Ali 08 жнів. 2014-08-08 05:59 '14 у 05:59 2014/08/08 05:59

Самы просты і самы надзейны спосаб, які я рабіў у мінулым, - проста нацэліць схаваны тэг iFrame на вашу форму - тады ён будзе адпраўляцца ў iframe без перазагрузкі старонкі.

Гэта значыць, калі вы не хочаце выкарыстоўваць убудова, JavaScript або любыя іншыя формы "магіі", адрозныя ад HTML. Вядома, вы можаце камбінаваць гэта з JavaScript ці што ў вас ёсць ...

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

Вы таксама можаце прачытаць змесціва IFRAME onLoad для памылак сервера або адказаў аб паспяховасці, а затым вывесці іх карыстальніку.

Chrome, iFrames і onLoad

-note - вам трэба толькі чытаць, калі вам цікава, як наладзіць блакатар карыстацкага інтэрфейсу пры загрузцы / загрузцы

У цяперашні час Chrome не запускае падзея onLoad для iframe, калі ён выкарыстоўваўся для перадачы файлаў. Firefox, IE і Edge запускаюць падзея onload для перадачы файлаў.

Адзінае рашэнне, якое я знайшоў для Chrome, - выкарыстоўваць cookie.

Для гэтага ў асноўным пры загрузцы / загрузцы:

  • [Бок кліента] Пачніце інтэрвал пошуку файла cookie
  • [Серверная бок] Зрабіце ўсё, што вам трэба, з файлавымі дадзенымі
  • [Серверная бок] Усталюйце файл cookie для кліенцкага інтэрвалу
  • [Кліенцкая бок] Інтэрвал бачыць файл cookie і выкарыстоўвае яго як падзея onLoad. Напрыклад, вы можаце запусціць блакатар карыстацкага інтэрфейсу, а затым onLoad (ці калі файл cookie зроблены) вы выдаліце ​​блакатар карыстацкага інтэрфейсу.

Выкарыстанне cookie для гэтага з'яўляецца выродлівым, але яно працуе.

Я стварыў убудова jQuery для вырашэння гэтай праблемы для Chrome пры загрузцы, вы можаце знайсці тут

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

Гэты ж асноўны прынцып адносіцца і да загрузцы.

Каб выкарыстоўваць загрузнік (уключаючы JS, відавочна)

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

І на боку сервера, перад перадачай дадзеных файла, стварыце файл cookie

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

Убудова ўбачыць файл cookie, а затым актывуе зваротны выклік onComplete .

39
26 июня '14 в 7:43 2014-06-26 07:43 адказ дадзены ArtisticPhoenix 26 чэрвеня '14 у 07:43 2014/06/26 07:43

Рашэнне, якое я знайшоў, заключалася ў тым, што мэта <form> - схаваны iFrame. Затым iFrame можа запусціць JS для адлюстравання карыстачу, які ён завяршыў (пры загрузцы старонкі).

32
18 окт. адказ дадзены Darryl Hein 18 каст. 2008-10-18 22:30 '08 а 22:30 2008-10-18 22:30

Я напісаў гэта ў асяроддзі Rails . Гэта ўсяго толькі пяць радкоў JavaScript, калі вы выкарыстоўваеце лёгкі убудова jQuery-формы.

Задача заключаецца ў тым, што загрузка AJAX працуе, паколькі стандартны remote_form_for не разумее шматкампанентную форму прадстаўлення. Ён не збіраецца адпраўляць дадзеныя файла. Rails шукае запыт AJAX.

То, у якое ўваходзіць убудова jQuery-form.

Код Heres Rails для яго:

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

Вось адпаведны 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. }, }); }); image $('#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. }, }); }); uploaded image $('#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. }, }); }); 

І heres дзеянне кантролера Rails, сімпатычная ваніль:

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

Я выкарыстаў гэта на працягу апошніх некалькіх тыдняў з Bloggity, і ён працаваў як чэмпіён.

31
14 авг. адказ дадзены wbharding 14 жнів. 2009-08-14 01:44 '09 у 01:44 2009-08-14 01:44

Простая загрузка Ajax - гэта яшчэ адна опцыя:

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

  • Крос-браўзэр - працуе ў IE7 +, Firefox, Chrome, Safari, Opera
  • Падтрымка некалькіх адначасовых загрузак - нават у браўзэрах, выдатных ад HTML5
  • Няма флэш-памяці ці вонкавага CSS - усяго адзін файл Javascript 5Kb
  • Дадатковая убудаваная падтрымка полнопроходных бараў (выкарыстоўваючы пашырэнне PHP APC)
  • Гнуткі і наладжвальны - выкарыстоўвайце любы элемент у якасці кнопкі загрузкі, стварыце ўласныя індыкатары прагрэсу.
  • Не патрабуецца ніякіх формаў, проста пакажыце элемент, які будзе выкарыстоўвацца ў якасці кнопкі загрузкі.
  • Ліцэнзія MIT - бясплатнае выкарыстанне ў камерцыйным праекце

Прыклад выкарыстання:

30
26 июня '13 в 4:12 2013-06-26 04:12 адказ дадзены user1091949 26 чэрвеня '13 года ў 4:12 2013/06/26 04:12

Jquery Uploadify - яшчэ адзін добры убудова, які я выкарыстаў раней для загрузкі файлаў. Код JavaScript просты, як паказана ніжэй: code. Аднак новая версія не працуе ў 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) { // ... } }); 

Я шмат шукаў, і я прыйшоў да іншага рашэння для загрузкі файлаў без плагіна і толькі з ajax. Рашэнне выглядае наступным чынам:

 $(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 адказ дадзены farnoush resa 16 чэрвеня '13 у 12:49 2013/06/16 00:49

Тут проста іншае рашэнне, як загрузіць файл (без якога-небудзь плагіна)

Выкарыстанне простых Javascripts і AJAX (з індыкатарам выканання)

частка 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 частка

 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

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

Тут прыкладанне ПРЫКЛАД

21
30 марта '16 в 19:48 2016-03-30 19:48 адказ дадзены Siddhartha Chowdhury 30 сакавіка '16 у 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){ } }); 

Вы можаце выкарыстоўваць дадзеныя формы для публікацыі ўсіх вашых значэнняў, уключаючы выявы.

15
28 июля '15 в 16:39 2015-07-28 16:39 адказ дадзены Vivek Aasaithambi 28 ліпеня '15 ў 16:39 2015/07/28 16:39

Каб загрузіць файл асінхронна з дапамогай Jquery, выканайце наступныя дзеянні:

крок 1 У вашым праекце адкрываем менеджэр Nuget і дадаем пакет (jquery fileupload (толькі вам трэба запісаць яго ў поле пошуку, ён з'явіцца і ўсталюе яго.)) URL: https://github.com/blueimp/jQuery-File-Upload

Крок 2 Дадайце ніжэй сцэнары ў файлы HTML, якія ўжо дададзеныя ў праект, выканаўшы над пакетам:

jquery.ui.widget.js

jquery.iframe-transport.js

jquery.fileupload.js

Крок 3 Запішыце кіраванне загрузкай файлаў у адпаведнасці з прыведзеных ніжэй кодам:

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

крок 4 напішыце js-метад як uploadFile, як паказана ніжэй:

  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 У гатовай загрузцы файла выкліку функцыі выкліку для запуску працэсу, як паказана ніжэй:

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