﻿
{"id":2152,"date":"2013-09-22T22:46:57","date_gmt":"2013-09-22T22:46:57","guid":{"rendered":"http:\/\/www.gencayyildiz.com\/blog\/?p=2152"},"modified":"2019-02-08T21:22:00","modified_gmt":"2019-02-08T21:22:00","slug":"asp-net-mvc-multiple-file-upload","status":"publish","type":"post","link":"https:\/\/www.gencayyildiz.com\/blog\/asp-net-mvc-multiple-file-upload\/","title":{"rendered":"Asp.NET MVC &#8211; Multiple File Upload"},"content":{"rendered":"<div id=\"fb-root\"><\/div>\n<p>Web projelerinde genellikle Server&#8217;a HTML tabanl\u0131 &#8220;file&#8221; ya da Asp.NET Web Form tabanl\u0131 &#8220;FileUpload&#8221; nesnelerini kullanarak dosya aktar\u0131m\u0131 ger\u00e7ekle\u015ftiririz.Lakin aktar\u0131m a\u015famas\u0131nda teker teker POST i\u015flemi ger\u00e7ekle\u015ftirmek yerine seri bir \u015fekilde \u00e7oklu upload yapmay\u0131da tercih edebiliriz.Bu yaz\u0131m\u0131zda Asp.NET MVC mimarisinde, file nesnesini kullanarak \u00e7oklu y\u00fckleme i\u015flemini inceleyece\u011fiz.<br \/>\n<!--more--><br \/>\nBu makalemizde g\u00f6sterilecek olan file nesnesi HTML tabanl\u0131 haz\u0131r bir Component yap\u0131s\u0131ndad\u0131r.JQuery ile geli\u015ftirilmi\u015f bu nesneyi ister http:\/\/www.fyneworks.com\/jquery\/multiple-file-upload\/ adresinden, istersenizde <a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2013\/09\/multiple-file-upload.zip\">buradan<\/a> elde edebilirsiniz.<\/p>\n<p>\u0130ndirdi\u011finiz .rar uzant\u0131l\u0131 dosyay\u0131 a\u00e7t\u0131\u011f\u0131n\u0131zda a\u015fa\u011f\u0131daki dosyalar\u0131n eksiksiz bulundu\u011funa emin olunuz.<br \/>\n<a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2013\/09\/multiupload.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2156\" alt=\"multiupload\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2013\/09\/multiupload.png\" width=\"152\" height=\"144\" \/><\/a><br \/>\n\u00d6ncelikle \u00f6rnek bir Asp.NET MVC projesinde nesnemizi nas\u0131l entegre edece\u011fimizi g\u00f6relim.<br \/>\nYukar\u0131daki dosyalar\u0131 Solution Explorer penceresinden projemizin &#8220;Content&#8221; isimli klas\u00f6r\u00fcne ta\u015f\u0131y\u0131n\u0131z.<br \/>\n<a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2013\/09\/multiupload2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2157\" alt=\"multiupload2\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2013\/09\/multiupload2.png\" width=\"238\" height=\"219\" \/><\/a><br \/>\nArd\u0131ndan projemizin her sayfas\u0131nda bu dosyalardan yararlanabilmek i\u00e7in &#8220;_Layout.cshtml&#8221; dosyam\u0131za a\u015fa\u011f\u0131daki gibi entegre kodlar\u0131n\u0131 ekleyelim.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n    @Scripts.Render(&quot;~\/Content\/jquery.blockUI.js&quot;)\r\n    @Scripts.Render(&quot;~\/Content\/jquery.js&quot;)\r\n    @Scripts.Render(&quot;~\/Content\/jquery.MetaData.js&quot;)\r\n    @Scripts.Render(&quot;~\/Content\/jquery.form.js&quot;)\r\n    @Scripts.Render(&quot;~\/Content\/jquery.MultiFile.js&quot;)\r\n    @Scripts.Render(&quot;~\/Content\/jquery.MultiFile.pack.js&quot;)\r\n    @Scripts.Render(&quot;~\/Content\/jquery.validate.js&quot;)\r\n<\/pre>\n<p>\u015eimdi &#8220;Home(Controller).cs&#8221; isminde Controller katman\u0131m\u0131za bir s\u0131n\u0131f a\u00e7al\u0131m ve &#8220;Index&#8221; isimli Action metodun View g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc olu\u015ftural\u0131m.<\/p>\n<p>Yaz\u0131m\u0131z\u0131n bundan sonras\u0131na devam etmeden \u00f6nce \u00f6nemli bir husustan bahsetmek istiyorum.Bu Componentin \u00fc\u00e7 tane farkl\u0131 \u00f6zelli\u011fe sahip olan yap\u0131s\u0131 oldu\u011fundan dolay\u0131, &#8220;Index.cshtml&#8221; isimli View dosyam\u0131z\u0131n i\u00e7eri\u011finde \u00fc\u00e7\u00fcnden de \u00f6rneklendirme yapaca\u011f\u0131m.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n@using (Html.BeginForm(&quot;DosyaUpload&quot;, &quot;Home&quot;, FormMethod.Post, new { enctype = &quot;multipart\/form-data&quot; }))\r\n{\r\n    \/\/ 1. \u00d6zellik : S\u0131n\u0131rs\u0131z dosya se\u00e7ilebiliyor.\r\n    &lt;input type=&quot;file&quot; class=&quot;multi&quot; name=&quot;SecilenDosyalar&quot; \/&gt;&lt;br \/&gt;\r\n\r\n    \/\/ 2. \u00d6zellik : MaxLenght \u00f6zelli\u011fine verilen de\u011fer kadar dosya se\u00e7ilebiliyor.\r\n    &lt;input type=&quot;file&quot; class=&quot;multi&quot; maxlength=&quot;2&quot;  name=&quot;SecilenDosyalar&quot; \/&gt;&lt;br \/&gt;\r\n\r\n    \/\/ 3. \u00d6zellik : Accept \u00f6zelli\u011fine verilen uzant\u0131 adlar\u0131 sayesinde dosyalar\u0131 filtrelendirip, sadece belirli uzant\u0131larda dosyalar se\u00e7ilmesi sa\u011flanabiliyor.\r\n    &lt;input type=&quot;file&quot; class=&quot;multi&quot; accept=&quot;gif|jpg&quot;  name=&quot;SecilenDosyalar&quot; \/&gt;&lt;br \/&gt;\r\n\r\n    &lt;input type=&quot;submit&quot; value=&quot;Dosyalar\u0131 Aktar&quot; \/&gt;\r\n}\r\n<\/pre>\n<p>Yukar\u0131daki kod blo\u011funu incelerseniz e\u011fer Component&#8217;imizin \u00fc\u00e7 farkl\u0131 \u00f6zelli\u011fininde numunesini yazm\u0131\u015f olduk.Lakin burada dikkat etmeniz gereken iki husus var.Bunlardan biri, &#8220;Html.BeginForm&#8221; metodu sayesinde olu\u015fturulan formun POST edilmesi neticesinde &#8220;Home(Controller).cs&#8221; isimli Controller s\u0131n\u0131f\u0131ndaki &#8220;DosyaUpload&#8221; isimli metodu \u00e7al\u0131\u015ft\u0131raca\u011f\u0131n\u0131 belirttik.Yani &#8220;Home(Controller).cs&#8221; isimli Controller s\u0131n\u0131f\u0131m\u0131za &#8220;DosyaUpload&#8221; isimli metodumuzu olu\u015fturaca\u011f\u0131z.\u0130kinci husus ise &#8220;Html.BeginForm&#8221; metodunun parametrelerine &#8220;new { enctype = &#8220;multipart\/form-data&#8221; }&#8221; ifadesini eklemek olacakt\u0131r.Bu ifade sayesinde POST sonucu sunucuyla ba\u011flant\u0131l\u0131 bir \u00e7oklu i\u015flem yap\u0131laca\u011f\u0131n\u0131 belirtmi\u015f oluyoruz.<\/p>\n<p>Evet son olarak &#8220;Home(Controller).cs&#8221; isimli Controller s\u0131n\u0131f\u0131m\u0131zda &#8220;DosyaUpload&#8221; isimli metodumuzu olu\u015ftural\u0131m.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n    public class HomeController : Controller\r\n    {\r\n        public ActionResult Index()\r\n        {\r\n            return View();\r\n        }\r\n        &#x5B;HttpPost]\r\n        public ActionResult DosyaUpload()\r\n        {\r\n            return View();\r\n        }\r\n    }\r\n<\/pre>\n<p>Evet art\u0131k bu haliyle projemizi derleyip \u00e7al\u0131\u015ft\u0131r\u0131rsak d\u00f6rt tane farkl\u0131 \u00f6zelli\u011fe sahip file nesnesiyle a\u015fa\u011f\u0131daki gibi kar\u015f\u0131la\u015faca\u011f\u0131z.<br \/>\n<a href=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2013\/09\/multiupload3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-2165\" alt=\"multiupload3\" src=\"http:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2013\/09\/multiupload3-300x137.png\" width=\"300\" height=\"137\" srcset=\"https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2013\/09\/multiupload3-300x137.png 300w, https:\/\/www.gencayyildiz.com\/blog\/wp-content\/uploads\/2013\/09\/multiupload3.png 321w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\nYukar\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc incelerseniz e\u011fer, file nesnelerinin yan\u0131ndaki \u00f6zellik numaralar\u0131yla yukar\u0131larda bahsedilen \u00f6zellikler birebirdir.<\/p>\n<p>Evet art\u0131k s\u0131ra herhangi bir file nesnesinden se\u00e7ilen dosyalar\u0131 MVC mimarisiyle \u00e7ekip Server&#8217;a yollamaya geldi.Art\u0131k bundan sonra formumuzun i\u00e7inde tek bir file nesnesi bulundu\u011funu varsay\u0131yorum.(<span style=\"font-size: x-small;\"><em>her hangi bir \u00f6zelli\u011fe sahip olan<\/em><\/span>)<\/p>\n<p>File nesnemizden se\u00e7ilen dosyalar\u0131 &#8220;Home(Controller).cs&#8221; isimli Controller s\u0131n\u0131f\u0131m\u0131zdan \u00e7ekip Server&#8217;\u0131m\u0131zda ki bir klas\u00f6re aktarabilmek i\u00e7in &#8220;DosyaUpload&#8221; isimli Action metodumuzu kullanaca\u011f\u0131z.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n        &#x5B;HttpPost]\r\n        public ActionResult DosyaUpload(IEnumerable&lt;HttpPostedFileBase&gt; SecilenDosyalar)\r\n        {\r\n            foreach (var item in SecilenDosyalar)\r\n            {\r\n                item.SaveAs(HttpContext.Server.MapPath(&quot;~\/Content\/Dosyalar\/&quot; + item.FileName));\r\n            }\r\n            return RedirectToAction(&quot;Index&quot;);\r\n        }\r\n<\/pre>\n<p>Yukar\u0131daki kod blo\u011funu incelerseniz e\u011fer, file nesnemizle dosyalar\u0131 se\u00e7tikten sonra formu tetiklersek e\u011fer, &#8220;DosyaUpload&#8221; metodumuz devreye girecektir.Haliyle file nesnemizdeki dosyalar\u0131 &#8220;IEnumerable&lt;HttpPostedFileBase&gt;&#8221; tipinden olan &#8220;SecilenDosyalar&#8221; isimli parametremiz yakalayacakt\u0131r.<strong>Burada \u00e7ok dikkat etmemiz gereken husus, &#8220;IEnumerable&lt;HttpPostedFileBase&gt;&#8221; tipinden olan parametrenin ismi file nesnemizin &#8220;name&#8221; \u00f6zelli\u011findeki de\u011ferle ayn\u0131 olmal\u0131d\u0131r.<\/strong>Aksi taktirde bu parametrenin de\u011feri &#8220;null&#8221; olarak gelecektir.<\/p>\n<p>Se\u00e7ilen dosyalar\u0131 herhangi bir dizine ekleyebiliriz.Ben &#8220;Content&#8221; klas\u00f6r\u00fcm\u00fczde olu\u015fturdu\u011fumuz &#8220;Dosyalar&#8221; isimli klas\u00f6re ekliyorum.<\/p>\n<p>Art\u0131k yap\u0131land\u0131rmam\u0131z eksiksiz olarak ger\u00e7ekle\u015ftirildiyse e\u011fer projemizi derleyip \u00e7al\u0131\u015ft\u0131rabiliriz.Denememiz sonucunda se\u00e7ti\u011fimiz dosyalar\u0131n belirtti\u011fimiz dizine eklendi\u011fini g\u00f6rece\u011fiz.<\/p>\n<p>Hepinize iyi \u00e7al\u0131\u015fmalar diliyorum.<br \/>\nG\u00f6r\u00fc\u015fmek \u00fczere&#8230;<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Web projelerinde genellikle Server&#8217;a HTML tabanl\u0131 &#8220;file&#8221; ya da Asp.NET Web Form tabanl\u0131 &#8220;FileUpload&#8221; nesnelerini kullanarak dosya aktar\u0131m\u0131 ger\u00e7ekle\u015ftiririz.Lakin aktar\u0131m a\u015famas\u0131nda teker teker POST i\u015flemi ger\u00e7ekle\u015ftirmek yerine seri bir \u015fekilde \u00e7oklu upload yapmay\u0131da tercih&#46;&#46;&#46;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,345],"tags":[746,219,508,283,509],"class_list":["post-2152","post","type-post","status-publish","format-standard","hentry","category-asp-net-mvc","category-mvc-4-0","tag-asp-net-mvc","tag-file","tag-multiple","tag-mvc","tag-upload"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/2152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=2152"}],"version-history":[{"count":1,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/2152\/revisions"}],"predecessor-version":[{"id":10385,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/2152\/revisions\/10385"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=2152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=2152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=2152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}