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.
Bildiklerimiz
/*
### 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
Veysel APARI