Merhaba Arkadaşlar,
asp.net fileupload ile birden fazla resmi bir anda yüklemeyi ve yüklediğimiz resimlerin boyutlandırmasını anlatacağım.
jqueryden biraz destek alacağız öncelikle multi.js adında bir dosya oluşturalım. aşağıdaki kodları kullanabilirsiniz.
/* ### jQuery Multiple File Upload Plugin v1.47 - 2010-03-26 ### * Home: http://www.fyneworks.com/jquery/multiple-file-upload/ * http://www.gnu.org/licenses/gpl.html ### */ eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}(';3(X.1M)(6($){$.7.2=6(h){3(5.Q==0)8 5;3(R U[0]==\'1f\'){3(5.Q>1){l i=U;8 5.N(6(){$.7.2.14($(5),i)})};$.7.2[U[0]].14(5,$.27(U).26(1)||[]);8 5};l h=$.L({},$.7.2.D,h||{});$(\'21\').1D(\'2-S\').V(\'2-S\').1i($.7.2.15);3($.7.2.D.12){$.7.2.1s($.7.2.D.12);$.7.2.D.12=11};5.1D(\'.2-1a\').V(\'2-1a\').N(6(){X.2=(X.2||0)+1;l e=X.2;l g={e:5,E:$(5),P:$(5).P()};3(R h==\'1W\')h={m:h};l o=$.L({},$.7.2.D,h||{},($.1p?g.E.1p():($.2t?g.E.Z():11))||{},{});3(!(o.m>0)){o.m=g.E.K(\'2e\');3(!(o.m>0)){o.m=(u(g.e.1o.B(/\\b(m|2a)\\-([0-9]+)\\b/q)||[\'\']).B(/[0-9]+/q)||[\'\'])[0];3(!(o.m>0))o.m=-1;1Z o.m=u(o.m).B(/[0-9]+/q)[0]}};o.m=18 1X(o.m);o.j=o.j||g.E.K(\'j\')||\'\';3(!o.j){o.j=(g.e.1o.B(/\\b(j\\-[\\w\\|]+)\\b/q))||\'\';o.j=18 u(o.j).t(/^(j|1e)\\-/i,\'\')};$.L(g,o||{});g.A=$.L({},$.7.2.D.A,g.A);$.L(g,{n:0,J:[],2c:[],19:g.e.I||\'2\'+u(e),1k:6(z){8 g.19+(z>0?\'1U\'+u(z):\'\')},G:6(a,b){l c=g[a],k=$(b).K(\'k\');3(c){l d=c(b,k,g);3(d!=11)8 d}8 1h}});3(u(g.j).Q>1){g.j=g.j.t(/\\W+/g,\'|\').t(/^\\W|\\W$/g,\'\');g.1w=18 2h(\'\\\\.(\'+(g.j?g.j:\'\')+\')$\',\'q\')};g.M=g.19+\'25\';g.E.1j(\'<O T="2-1j" I="\'+g.M+\'"></O>\');g.1l=$(\'#\'+g.M+\'\');g.e.H=g.e.H||\'p\'+e+\'[]\';3(!g.C){g.1l.1d(\'<O T="2-C" I="\'+g.M+\'1m"></O>\');g.C=$(\'#\'+g.M+\'1m\')};g.C=$(g.C);g.10=6(c,d){g.n++;c.2=g;3(d>0)c.I=c.H=\'\';3(d>0)c.I=g.1k(d);c.H=u(g.1n.t(/\\$H/q,$(g.P).K(\'H\')).t(/\\$I/q,$(g.P).K(\'I\')).t(/\\$g/q,e).t(/\\$i/q,d));3((g.m>0)&&((g.n-1)>(g.m)))c.16=1h;g.17=g.J[d]=c;c=$(c);c.1g(\'\').K(\'k\',\'\')[0].k=\'\';c.V(\'2-1a\');c.2z(6(){$(5).1O();3(!g.G(\'1R\',5,g))8 y;l a=\'\',v=u(5.k||\'\');3(g.j&&v&&!v.B(g.1w))a=g.A.1q.t(\'$1e\',u(v.B(/\\.\\w{1,4}$/q)));1r(l f 29 g.J)3(g.J[f]&&g.J[f]!=5)3(g.J[f].k==v)a=g.A.1t.t(\'$p\',v.B(/[^\\/\\\\]+$/q));l b=$(g.P).P();b.V(\'2\');3(a!=\'\'){g.1u(a);g.n--;g.10(b[0],d);c.1v().2d(b);c.F();8 y};$(5).1x({1y:\'1N\',1z:\'-1P\'});c.1Q(b);g.1A(5,d);g.10(b[0],d+1);3(!g.G(\'1S\',5,g))8 y});$(c).Z(\'2\',g)};g.1A=6(c,d){3(!g.G(\'1T\',c,g))8 y;l r=$(\'<O T="2-1V"></O>\'),v=u(c.k||\'\'),a=$(\'<1B T="2-1C" 1C="\'+g.A.Y.t(\'$p\',v)+\'">\'+g.A.p.t(\'$p\',v.B(/[^\\/\\\\]+$/q)[0])+\'</1B>\'),b=$(\'<a T="2-F" 1Y="#\'+g.M+\'">\'+g.A.F+\'</a>\');g.C.1d(r.1d(b,\' \',a));b.1E(6(){3(!g.G(\'20\',c,g))8 y;g.n--;g.17.16=y;g.J[d]=11;$(c).F();$(5).1v().F();$(g.17).1x({1y:\'\',1z:\'\'});$(g.17).13().1g(\'\').K(\'k\',\'\')[0].k=\'\';3(!g.G(\'22\',c,g))8 y;8 y});3(!g.G(\'23\',c,g))8 y};3(!g.2)g.10(g.e,0);g.n++;g.E.Z(\'2\',g)})};$.L($.7.2,{13:6(){l a=$(5).Z(\'2\');3(a)a.C.24(\'a.2-F\').1E();8 $(5)},15:6(a){a=(R(a)==\'1f\'?a:\'\')||\'1F\';l o=[];$(\'1b:p.2\').N(6(){3($(5).1g()==\'\')o[o.Q]=5});8 $(o).N(6(){5.16=1h}).V(a)},1c:6(a){a=(R(a)==\'1f\'?a:\'\')||\'1F\';8 $(\'1b:p.\'+a).28(a).N(6(){5.16=y})},S:{},1s:6(b,c,d){l e,k;d=d||[];3(d.1G.1H().1I("1J")<0)d=[d];3(R(b)==\'6\'){$.7.2.15();k=b.14(c||X,d);1K(6(){$.7.2.1c()},1L);8 k};3(b.1G.1H().1I("1J")<0)b=[b];1r(l i=0;i<b.Q;i++){e=b[i]+\'\';3(e)(6(a){$.7.2.S[a]=$.7[a]||6(){};$.7[a]=6(){$.7.2.15();k=$.7.2.S[a].14(5,U);1K(6(){$.7.2.1c()},1L);8 k}})(e)}}});$.7.2.D={j:\'\',m:-1,1n:\'$H\',A:{F:\'x\',1q:\'2f 2g 2b a $1e p.\\2i 2j...\',p:\'$p\',Y:\'2k Y: $p\',1t:\'2l p 2m 2n 2o Y:\\n$p\'},12:[\'1i\',\'2p\',\'2q\',\'2r\',\'2s\'],1u:6(s){2u(s)}};$.7.13=6(){8 5.N(6(){2v{5.13()}2w(e){}})};$(6(){$("1b[2x=p].2y").2()})})(1M);',62,160,'||MultiFile|if||this|function|fn|return|||||||||||accept|value|var|max|||file|gi|||replace|String||||false||STRING|match|list|options||remove|trigger|name|id|slaves|attr|extend|wrapID|each|div|clone|length|typeof|intercepted|class|arguments|addClass||window|selected|data|addSlave|null|autoIntercept|reset|apply|disableEmpty|disabled|current|new|instanceKey|applied|input|reEnableEmpty|append|ext|string|val|true|submit|wrap|generateID|wrapper|_list|namePattern|className|metadata|denied|for|intercept|duplicate|error|parent|rxAccept|css|position|top|addToList|span|title|not|click|mfD|constructor|toString|indexOf|Array|setTimeout|1000|jQuery|absolute|blur|3000px|after|onFileSelect|afterFileSelect|onFileAppend|_F|label|number|Number|href|else|onFileRemove|form|afterFileRemove|afterFileAppend|find|_wrap|slice|makeArray|removeClass|in|limit|select|files|prepend|maxlength|You|cannot|RegExp|nTry|again|File|This|has|already|been|ajaxSubmit|ajaxForm|validate|valid|meta|alert|try|catch|type|multi|change'.split('|'),0,{}))
yukarıdaki multi.js yi sayfamıza ekleyelim.
<script src="multi.js" type="text/javascript"></script>
veri tabanı yapımız
şimdi sayfamıza yok bir fileupload ve bir buton koyuyoruz. fileupload ın class ına multi dedim bunu mutlaka ekleyin..
yüklenen resimlerin adını yazmak için ben bir label ekledim sayfanın başına
<asp:Label ID="lblMesaj" runat="server" Font-Bold="True" ForeColor="Maroon"></asp:Label> <asp:FileUpload ID="fileResimler" runat="server" class="multi"/> <asp:Button ID="btnResimYukle" runat="server" Text="Resim(leri) Yükle" CssClass="buton" onclick="btnResimYukle_Click" />
projemizde olması gereken klasör yapısı aşağıdaki resimdeki gibi olmalı bunu siz kendi projenize göre düzenleyebilirsiniz.
btnResimYukle nin onclick özelliğine gelelim
protected void btnResimYukle_Click(object sender, EventArgs e) { HttpFileCollection files = Request.Files; for (int i = 0; i < files.Count; i++) { HttpPostedFile file = files[i]; if (file.ContentLength > 0) { //resimin adı string fileName = Path.GetFileName(file.FileName); //resim uzantısı uzanti = Path.GetExtension(file.FileName); //resime atanacak yeni ad resimadi = DateTime.Now.Day.ToString() + DateTime.Now.Month + DateTime.Now.Year + DateTime.Now.Hour + DateTime.Now.Second + DateTime.Now.Minute + DateTime.Now.Millisecond + uzanti; // Orjinal resmi kaydet file.SaveAs(Server.MapPath("~/FotoGaleri/Temp/" + resimadi)); //****************** Yeni boyutlara göre resim oluştur ***************/ Bitmap resim1 = new Bitmap(Server.MapPath("~/FotoGaleri/Temp/" + resimadi)); // 600px genişlikte yeni resim oluştur resim1 = this.ResimBoyutlandir(resim1, 600); // oluşturulan resmi kaydet resim1.Save(Server.MapPath("~/FotoGaleri/600/" + resimadi)); // orjinal resim Bitmap resim = new Bitmap(Server.MapPath("~/FotoGaleri/Temp/" + resimadi)); // 150px genişlikte yeni resim oluştur resim = this.ResimBoyutlandir(resim, 150); // oluşturulan resmi kaydet resim.Save(Server.MapPath("~/FotoGaleri/150/" + resimadi)); // orjinal resim //****************** Veri tabanına kaydet ***************/ // Sql server bilgileri //bağlantı bilgileri ve prosedür adı bunları yazmıyorum buraya SqlKomutu.CommandType = System.Data.CommandType.StoredProcedure; SqlKomutu.Parameters.AddWithValue("@ResimYolu", resimadi); SqlKomutu.ExecuteNonQuery(); SqlKomutu.Dispose(); baglan.Close(); baglan.Dispose(); //******************************************************************// // yüklenen resimin adını label komponentinde gösterir lblMesaj.Text += "Dosya : <b>" + fileName + "</b> başarıyla yüklendi !<br />"; /* // Orjinal resmi isterseniz bu kod satırıyla silebilirsiniz FileInfo temp = new FileInfo(Server.MapPath("~/FotoGaleri/Temp/" + resimadi)); temp.Delete(); */ } } }
resim boyutlandır fonksiyonu
public Bitmap ResimBoyutlandir(Bitmap resim, int boyut) { Bitmap sresim = resim; using (Bitmap OrjinalResim = resim) { double yukseklik = OrjinalResim.Height; double genislik = OrjinalResim.Width; double oran = 0; if (genislik >= boyut || genislik <= boyut) { oran = genislik / yukseklik; genislik = boyut; yukseklik = genislik / oran; Size ydeger = new Size(Convert.ToInt32(genislik), Convert.ToInt32(yukseklik)); Bitmap yresim = new Bitmap(OrjinalResim, ydeger); sresim = yresim; } } return sresim; }
tek seferde birden fazla resim yükleyerek hem küçük hem büyük versiyonlarını sayfamıza eklemiş olduk
Bir sonraki makalede görüşmek dileğiyle.
Veysel APARI