MVC’de Ajax Upload (HTML5 ile)
Merhaba arkadaşlar,
valums diye bir firma güzel bir html5 ajax upload nesnesi oluşturmuş ve bize de kullanmak düşer. Kullanımı oldukça basit.
Öncelikle Ajax file upload isteğini karşılayacak bir method yapalım. Methodumuz ajax ile gelen istekteki dosyaları server’a kaydecek ve geriye olumlu ya da olumsuz diye cevap dönecek.
methodumuz şu şekilde;
[HttpPost]
public JsonResult UploadFile(string qqfile, string uniqueFileName)
{
string fileName = uniqueFileName + qqfile;
string path = Server.MapPath(“~/Content/images/”);
string file = string.Empty;
try
{
Stream stream = Request.InputStream;
if (String.IsNullOrEmpty(Request[“qqfile”]))
{
HttpPostedFileBase postedFile = Request.Files[0];
stream = postedFile.InputStream;
file = Path.Combine(path, fileName);
}
else
{
file = Path.Combine(path, fileName);
}
var buffer = new byte[stream.Length];
stream.Read(buffer, 0, buffer.Length);
System.IO.File.WriteAllBytes(file, buffer);
}
catch (Exception ex)
{
return Json(new { success = false, message = ex.Message }, “application/json”);
}
return Json(new { success = true }, “text/html”);
}
isteği karşılayacak controller’a bu methodu ekliyoruz. Ben Home’a ekledim.
Şimdi View’ımızı yapalım. bu ajax upload nesnesini javascript ile oluşturmamız gerekiyor. o yüzden view’ımızda etiketleri arasına yazıyoruz kodumuzu.
var lastUniqueFileName;
function createUploader() {
var uploader = new qq.FileUploader({
element: document.getElementById(‘FileUpload’),
action: ‘/Home/UploadFile’,
debug: true,
allowedExtensions: [‘jpg’, ‘jpeg’, ‘png’, ‘gif’],
params: { uniqueFileName: guidGenerator() },
onComplete: function (id, fileName, responseJSON) {
fileName = lastUniqueFileName + fileName;
//küçük büyük işaretini siz koyarsınız ilgili yerlere. burada olmadı.
document.getElementById(‘imageDiv’).innerHTML = “img src=’/Content/images/” + fileName + “’/ “;},
});
}
window.onload = createUploader;
function guidGenerator() {
var S4 = function () {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
};
lastUniqueFileName = (S4() + S4() + “-” + S4() + “-” + S4() + “-” + S4() + “-” + S4() + S4() + S4());
return lastUniqueFileName;
}
Javascipt kodlarımız tamam. Ben burada biraz değişiklik yapmıştım, bir editör ile kullanıyordum ve upload ettiğim imajı direkt editörde gösteriyordum. Bunun için de resmin benzersiz ismini server’da değil de client’ta set edip öyle gönderiyordum ve böylelikle upload tamamlandığında zaten elimde olan imaj isimlerini kullanıp ilgili yerlerde gösteriyordum. Burada editör koymadım ama bir div koydum o div içerisinde gösteriyorum upload gerçekleştikten sonra imajı.
Script tarafı tamamlandıysa eğer şimdi script’in kullandığı div’leri ve css’i de view’ımıza eklersek neredeyse bitirmiş olacağız.
<link rel=”stylesheet” type=”text/css” href=”/Content/css/fileuploader.css” />
<div id=”FileUpload”>
<noscript>
<p>Dosya upload edebilmek için JavaScript özelliğinin açık olması gerekmektedir.p>
noscript>
div>
<div id=”imageDiv”>div>
view’ımız ile işimiz bitti. Sadece fileuploader.js dosyasını da sayfamıza referans etmemiz gerekiyor. bunu da master page’de yani _layout dosyasında yapıyoruz.
<script type=”text/javascript” src=”/js/fileuploader.js”>script>
Artık gönül rahatlığıyla dosya uploda edebiliriz.
Unutmadan bu örnek html5'in nimetlerinden faydalanılarak yapıldığı için tüm tarayıcılarda çalışmaz.
Gerekli dosyaları http://valums.com/ajax-upload/ adresinden veya örnek proje içerisinden indirebilirsiniz. ör: http://dl.dropbox.com/u/63926006/mvcAjaxUpload.rar
