Kabul edelim, kimse formlardan hoşlanmaz. Geliştiriciler onları inşa etmekten hoşlanmazlar, tasarımcılar özellikle onları şekillendirmekten hoşlanmazlar ve kullanıcılar kesinlikle onları doldurmaktan hoşlanmazlar.
Bir formu oluşturabilen tüm bileşenler arasında dosya kontrolü, partinin en sinir bozucu kısmı olabilir. Tarz vermek gerçek bir acı, kullanımı hantal ve garip ve bir dosya yüklemek herhangi bir formun gönderim sürecini yavaşlatacaktır.
Bu yüzden onları geliştirecek bir eklenti her zaman görülmeye değer ve DropzoneJS sadece böyle bir seçenektir. Dosya yükleme kontrollerinizin daha iyi görünmesini sağlayacak, onları daha kullanıcı dostu hale getirecek ve dosyayı arka planda yüklemek için AJAX kullanarak en azından işlemi gerçekleştirecektir. görünmek daha hızlı. Ayrıca, sunucunuza ulaşmadan önce dosyaların doğrulanmasını kolaylaştırarak kullanıcıya neredeyse anında geri bildirim sağlar.
DropzoneJS'ye biraz detaylı bir şekilde bakacağız. Nasıl uygulanacağını göstereceğiz. ve ince ayar yapılabileceği ve özelleştirilebileceği bazı yollara bakın. Ayrıca, Node.js kullanarak basit bir sunucu tarafı yükleme mekanizması uygulayacağız.
Her zaman olduğu gibi, bu eğiticinin kodunu şurada bulabilirsiniz: GitHub deposu.
Bu makale 2020'de güncellendi. Node.js hakkında daha fazla bilgi için okuyun Node.js Web Geliştirme - Dördüncü Sürüm.
DropzoneJS ile tanışın
DropzoneJS, kullanıcıların dosyaları sürükleyip bırakarak yüklemelerine izin verir. Kullanılabilirlik faydaları varken haklı olarak tartışılabilir, giderek yaygınlaşan bir yaklaşım ve birçok insanın masaüstündeki dosyalarla çalışma biçimiyle uyumlu bir yaklaşım. Aynı zamanda oldukça iyi destekleniyor büyük tarayıcılarda.
DropzoneJS, yalnızca sürükle ve bırak tabanlı bir widget değildir. Parçacığın tıklanması, daha geleneksel dosya seçici iletişim kutusu yaklaşımını başlatır.
İşte widget'ın eylem halindeki bir animasyonu:
Alternatif olarak, bir göz atın bu en minimal örnekler.
DropzoneJS'yi her tür dosya için kullanabilirsiniz, ancak hoş küçük küçük resim efekti, özellikle görüntüleri yüklemek için ideal olmasını sağlar.
Özellikler
Eklentinin bazı özelliklerini ve özelliklerini özetlemek için DropzoneJS:
- kullanılabilir jQuery ile veya jQuery olmadan
- sürükle ve bırak desteği var
- küçük resimler oluşturur
- isteğe bağlı olarak paralel olarak birden çok yüklemeyi destekler
- bir ilerleme çubuğu içerir
- tamamen temaya uygundur
- genişletilebilir dosya doğrulama desteği içerir
- AMD modülü veya RequireJS modülü olarak mevcuttur
- küçültüldüğünde yaklaşık 43 KB ve gzip ile sıkıştırıldığında 13 KB geliyor
tarayıcı Desteği
Resmi belgelerden alınan tarayıcı desteği aşağıdaki gibidir:
- Krom 7 +
- Firefox 4 +
- Yani 10+
- Opera 12+ (macOS için Sürüm 12 devre dışı bırakıldı çünkü API'leri hatalı)
- Safari 6 +
Eklentinin tam olarak desteklenmediği durumlarda geri dönüşleri ele almanın birkaç yolu vardır, buna daha sonra bakacağız.
Kurmak
DropzoneJS ile çalışmaya başlamanın en basit yolu, bir CDN'nin en son sürümünü dahil et. Yazma sırasında bu versiyon 5.5.1.
Alternatif olarak, yapabilirsiniz projenin GitLab sayfasından en son sürümü indirin. Aşağıdakiler için destek sağlayan üçüncü taraf bir paket de var ReactJS.
Ardından, sayfanıza hem ana JavaScript dosyasını hem de CSS stillerini eklediğinizden emin olun. Örneğin:
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>File Upload Example</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css">
</head>
<body> <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
</body>
</html>
Projenin iki CSS dosyası sağladığına dikkat edin - a basic.css biraz minimal stil ile dosya ve daha kapsamlı dropzone.css dosya. Küçültülmüş sürümleri dropzone.css ve dropzone.js da mevcuttur.
Temel kullanım
Eklentiyi uygulamanın en basit yolu, onu bir forma eklemektir, ancak <div>. Bununla birlikte, bir form kullanmak, ayarlamak için daha az seçenek anlamına gelir - en önemlisi, en önemli yapılandırma özelliği olan URL'dir.
Basitçe ekleyerek başlatabilirsiniz. dropzone sınıf. Örneğin:
<form id="upload-widget" method="post" action="/tr/upload" class="dropzone"></form>
Teknik olarak, yapmanız gereken tek şey bu, ancak çoğu durumda bazı ek seçenekler ayarlamak isteyeceksiniz. Bunun formatı aşağıdaki gibidir:
Dropzone.options.WIDGET_ID = { //
};
Seçenekleri ayarlamak için pencere öğesi kimliğini türetmek için, HTML'nizde tanımladığınız kimliği alın ve bunu deveye çevirin. Örneğin, upload-widget olur uploadWidget:
Dropzone.options.uploadWidget = { //
};
Ayrıca programlı olarak bir örnek oluşturabilirsiniz:
const uploader = new Dropzone('#upload-widget', options);
Şimdi, mevcut yapılandırma seçeneklerinden bazılarına bakacağız.
Temel Yapılandırma Seçenekleri
The url seçeneği, yükleme formu için hedefi tanımlar ve gerekli olan tek parametredir. Bununla birlikte, eğer onu bir form öğesine iliştiriyorsanız, o zaman sadece formun action öznitelik, bu durumda bunu belirtmenize bile gerek yoktur.
The method seçeneği, HTTP yöntemini ayarlar ve yine, bu yaklaşımı kullanırsanız bunu form öğesinden alır, aksi takdirde varsayılan olarak POST, çoğu senaryoya uygun olmalıdır.
The paramName seçeneği, yüklenen dosyanın parametresinin adını ayarlamak için kullanılır. Bir dosya yükleme formu öğesi kullanıyorsanız, name öznitelik. Eklemezseniz, varsayılan olarak file.
maxFiles null olarak ayarlanmamışsa, bir kullanıcının yükleyebileceği maksimum dosya sayısını ayarlar.
Varsayılan olarak, pencere öğesi tıklandığında bir dosya iletişim kutusu gösterecektir, ancak clickable parametresini ayarlayarak bunu devre dışı bırakmak için falseveya alternatif olarak, tıklanabilir öğeyi özelleştirmek için bir HTML öğesi veya CSS seçici sağlayabilirsiniz.
Bunlar temel seçeneklerdir, ancak şimdi daha gelişmiş seçeneklerden bazılarına bakalım.
Maksimum Dosya Boyutunu Zorlama
The maxFilesize özelliği, megabayt cinsinden maksimum dosya boyutunu belirler. Bu, varsayılan olarak 1000 bayt boyutundadır, ancak filesizeBase özellik, başka bir değere ayarlayabilirsiniz - örneğin, 1024 bayt. İstemci ve sunucu kodunuzun herhangi bir sınırı tam olarak aynı şekilde hesaplamasını sağlamak için bunu ayarlamanız gerekebilir.
Belirli Dosya Türleriyle Kısıtlama
The acceptedFiles parametresi, kabul etmek istediğiniz dosya türünü kısıtlamak için kullanılabilir. Bu, virgülle ayrılmış MIME türleri listesi biçiminde olmalıdır, ancak joker karakterler de kullanabilirsiniz.
Örneğin, yalnızca resimleri kabul etmek için:
acceptedFiles: 'image/*',
Küçük Resmin Boyutunu Değiştirme
Varsayılan olarak, küçük resim 120x120 piksel boyutunda oluşturulur. Yani, kare. Bu davranışı değiştirmenin birkaç yolu vardır.
Birincisi, thumbnailWidth ve / veya thumbnailHeight yapılandırma seçenekleri.
İkisini de ayarlarsanız thumbnailWidth ve thumbnailHeight için nullküçük resim hiçbir şekilde yeniden boyutlandırılmaz.
Küçük resim oluşturma davranışını tamamen özelleştirmek istiyorsanız, resize fonksiyonu.
Küçük resmin boyutunu değiştirmenin önemli bir noktası, dz-image paket tarafından sağlanan sınıf, CSS'deki küçük resim boyutunu ayarlar, bu nedenle bunu da buna göre değiştirmeniz gerekir.
Ek Dosya Kontrolleri
The accept seçeneği, bir dosyanın yüklenmeden önce geçerli olup olmadığını belirlemek için ek kontroller sağlamanıza olanak tanır. Dosya sayısını kontrol etmek için bunu kullanmamalısınız (maxFiles), dosya tipi (acceptedFiles) veya dosya boyutu (maxFilesize), ancak diğer doğrulama türlerini gerçekleştirmek için özel kod yazabilirsiniz.
Kullanırdın accept bunun gibi bir seçenek:
accept: function(file, done) { if (!someCheck()) { return done('This is invalid!'); } return done();
}
Gördüğünüz gibi, asenkron. Arayabilirsin done() hiçbir bağımsız değişken ve doğrulama geçişi olmadan veya bir hata mesajı sağlarsanız dosya reddedilir ve mesaj dosyanın yanında açılır pencere olarak görüntülenir.
Minimum veya maksimum görüntü boyutlarının nasıl uygulanacağına baktığımızda daha karmaşık, gerçek dünya örneğine daha sonra bakacağız.
Genellikle yükleyicinin HTTP isteğine ek başlıklar eklemeniz gerekir.
Örnek olarak, CSRF (siteler arası istek sahteciliği) korumasına bir yaklaşım, görünümde bir jeton çıktısı almak ve ardından POST/PUT/DELETE uç noktalar, geçerli bir belirteç için istek başlıklarını kontrol eder. Jetonunuzu şu şekilde çıkardığınızı varsayalım:
<meta name="csrf-token" content="CL2tR2J4UHZXcR9BjRtSYOKzSmL8U1zTc7T8d6Jz">
Ardından, bunu yapılandırmaya ekleyebilirsiniz:
headers: { 'x-csrf-token': document.querySelector('meta[name=csrf-token]').getAttributeNode('content').value,
},
Alternatif olarak, işte aynı örnek ancak jQuery kullanarak:
headers: { 'x-csrf-token': $('meta[name="csrf-token"]').attr('content')
},
Sunucunuz daha sonra x-csrf-token başlık, belki biraz kullanarak ara katman.
Yedekleri İşleme
Bir yedek uygulamanın en basit yolu, bir <div> giriş kontrollerini içeren formunuza, öğedeki sınıf adını şu şekilde ayarlayın: fallback. Örneğin:
<form id="upload-widget" method="post" action="/tr/upload" class="dropzone"> <div class="fallback"> <input name="file" type="file" /> </div>
</form>
Alternatif olarak, tarayıcı eklentiyi desteklemediğinde çalıştırılacak bir işlev sağlayabilirsiniz. fallback yapılandırma parametresi.
Ayarlayarak, widget'ı yedek davranışını kullanmaya zorlayabilirsiniz. forceFallback için true, bu da geliştirme sırasında yardımcı olabilir.
Hataları Yönetme
Kullanarak özel bir işlev sağlayarak, widget'in hataları işleme şeklini özelleştirebilirsiniz. error yapılandırma parametresi. İlk argüman dosya, ikinci hata mesajı ve hata sunucu tarafında meydana gelirse, üçüncü parametre bir örnek olacaktır. XMLHttpRequest.
Her zaman olduğu gibi, müşteri tarafında doğrulama işin sadece yarısıdır. Ayrıca sunucuda doğrulama yapmanız gerekir. Daha sonra basit bir sunucu tarafı bileşeni uyguladığımızda, uygun şekilde yapılandırıldığında istemci tarafındaki hatalarla aynı şekilde görüntülenecek olan beklenen hata yanıt biçimine bakacağız (aşağıda gösterilmiştir).
Mesajları ve Çeviriyi Geçersiz Kılma
Parçacık tarafından görüntülenen çeşitli mesajları ayarlayan bir dizi ek yapılandırma özelliği vardır. Bunları görüntülenen metni özelleştirmek veya başka bir dile çevirmek için kullanabilirsiniz.
En önemlisi, dictDefaultMessage birisi yüklemek için bir dosya seçmeden önce bırakma bölgesinin ortasında görünen metni ayarlamak için kullanılır.
Yapılandırılabilir dize değerlerinin tam bir listesini bulacaksınız - bunların tümü ile başlar dict - belgelerde.
Etkinlikler
Eklentiyi özelleştirmek veya geliştirmek için dinleyebileceğiniz bir dizi etkinlik vardır.
Bir olayı dinlemenin iki yolu vardır. Birincisi, bir başlatma işlevi içinde bir dinleyici oluşturmaktır:
Dropzone.options.uploadWidget = { init: function() { this.on('success', function(file, resp){ ... }); }, ...
};
Dropzone örneğini programatik olarak oluşturmaya karar verirseniz yararlı olan alternatif yaklaşım budur:
const uploader = new Dropzone('#upload-widget');
uploader.on('success', function(file, resp){ ...
});
Belki de en dikkate değer yönü success bir dosya başarıyla yüklendiğinde tetiklenen olay. success geri çağırma iki argüman alır: ilki bir dosya nesnesi, ikincisi ise XMLHttpRequest.
Diğer yararlı olaylar şunları içerir: addedfile ve removedfile, yükleme listesine bir dosya eklendiğinde veya listeden kaldırıldığında; thumbnail, küçük resim oluşturulduktan sonra etkinleşen; ve uploadprogress, kendi ilerleme ölçünüzü uygulamak için kullanabilirsiniz.
Bir olay nesnesini parametre olarak alan ve widget'ın davranışını özelleştirmek için kullanabileceğiniz bir dizi olay da vardır - drop, dragstart, dragend, dragenter, dragover ve dragleave.
İlgili bölümde olayların tam bir listesini bulacaksınız belgelerin.
Daha Karmaşık Bir Doğrulama Örneği: Görüntü Boyutları
Daha önce eşzamansız olana baktık accept() seçeneği, dosyalar yüklenmeden önce üzerinde kontroller (doğrulama) çalıştırmak için kullanabilirsiniz.
Resimleri yüklerken genel bir gereklilik, minimum veya maksimum resim boyutlarını uygulamaktır. Biraz daha karmaşık olmasına rağmen bunu DropzoneJS ile yapabiliriz.
Kabul geri çağrısı bir dosya nesnesi alsa da, görüntü boyutlarını kontrol etmek için küçük resim oluşturulana kadar beklememiz gerekir, bu noktada boyutlar dosya nesnesinde ayarlanmış olur. Bunu yapmak için küçük resim olayını dinlememiz gerekiyor.
İşte kod. Bu örnekte, yüklemeden önce resmin en az 640x480 piksel olup olmadığını kontrol ediyoruz:
init: function() { this.on('thumbnail', function(file) { if (file.accepted !== false) { if (file.width < 1024 || file.height < 768) { file.rejectDimensions(); } else { file.acceptDimensions(); } } });
},
accept: function(file, done) { file.acceptDimensions = done; file.rejectDimensions = function() { done('The image must be at least 1024 by 768 pixels in size'); };
},
Tam Bir Örnek
Seçenekleri, olayları ve biraz daha gelişmiş doğrulamayı geçtikten sonra, eksiksiz ve nispeten kapsamlı bir örneğe bakalım. Açıkçası, mevcut tüm yapılandırma seçeneklerinden yararlanmıyoruz, çünkü çok fazla olduğu için - onu inanılmaz derecede esnek kılıyor.
İşte formun HTML'si:
<form id="upload-widget" method="post" action="/tr/upload" class="dropzone"> <div class="fallback"> <input name="file" type="file" /> </div>
</form>
CSRF koruması uyguluyorsanız, mizanpajlarınıza şunun gibi bir şey eklemek isteyebilirsiniz:
<head> <!-- --> <meta name="csrf-token" content="XYZ123">
</head>
Şimdi JavaScript. JQuery kullanmadığımıza dikkat edin!
Dropzone.options.uploadWidget = { paramName: 'file', maxFilesize: 2, // MB maxFiles: 1, dictDefaultMessage: 'Drag an image here to upload, or click to select one', headers: { 'x-csrf-token': document.querySelectorAll('meta[name=csrf-token]')[0].getAttributeNode('content').value, }, acceptedFiles: 'image/*', init: function() { this.on('success', function(file, resp){ console.log(file); console.log(resp); }); this.on('thumbnail', function(file) { if (file.accepted !== false) { if (file.width < 640 || file.height < 480) { file.rejectDimensions(); } else { file.acceptDimensions(); } } }); }, accept: function(file, done) { file.acceptDimensions = done; file.rejectDimensions = function() { done('The image must be at least 640 x 480px') }; }
};
Bu örneğin kodunu şu sitemizde bulacağınıza dair bir hatırlatma: GitHub deposu.
Umarım bu çoğu senaryoya başlamanız için yeterlidir. Kontrol et tam belgeler daha karmaşık bir şeye ihtiyacınız varsa.
Temalar
Widget'ın görünümünü ve hissini özelleştirmenin birkaç yolu vardır ve görünüşünü tamamen değiştirmek gerçekten de mümkündür.
Görünümün ne kadar özelleştirilebilir olduğuna bir örnek olarak, işte bir demo tam olarak olduğu gibi görünecek ve hissettirecek şekilde jQuery Dosya Yükleme Bootstrap kullanarak widget.
Açıkçası, widget'ın görünümünü değiştirmenin en basit yolu CSS kullanmaktır. Widget'ın bir sınıfı var dropzone ve bileşen öğelerinin önünde sınıflar var dz- - Örneğin, dz-clickable dropzone içindeki tıklanabilir alan için, dz-message başlık için dz-preview / dz-image-preview yüklenen dosyaların her birinin önizlemesini sarmak için vb. Bir göz atın dropzone.css referans için dosya.
Ayrıca, fareyle üzerine gelme durumuna, yani kullanıcı yüklemeyi başlatmak için fare düğmesini bırakmadan önce dosyayı bırakma bölgesinin üzerine getirdiğinde stiller uygulamak isteyebilirsiniz. Bunu, stilini belirleyerek yapabilirsiniz. dz-drag-hover eklenti tarafından otomatik olarak eklenen sınıf.
CSS ince ayarlarının ötesinde, önizlemeleri oluşturan HTML'yi de özelleştirebilirsiniz. previewTemplate yapılandırma özelliği. İşte ne varsayılan önizleme şablonu gibi görünüyor:
<div class="dz-preview dz-file-preview"> <div class="dz-image"> <img data-dz-thumbnail /> </div> <div class="dz-details"> <div class="dz-size"> <span data-dz-size></span> </div> <div class="dz-filename"> <span data-dz-name></span> </div> </div> <div class="dz-progress"> <span class="dz-upload" data-dz-uploadprogress></span> </div> <div class="dz-error-message"> <span data-dz-errormessage></span> </div> <div class="dz-success-mark"> <svg>REMOVED FOR BREVITY</svg> </div> <div class="dz-error-mark"> <svg>REMOVED FOR BREVITY</svg> </div>
</div>
Gördüğünüz gibi, dosyaların yüklenmesi için kuyruğa alındıktan sonra nasıl işleneceğinin yanı sıra başarı ve başarısızlık durumları üzerinde tam kontrol sahibi olursunuz.
DropzoneJS eklentisinin kullanılmasıyla ilgili bölüm bu şekilde sona erer. Özetlemek gerekirse, sunucu tarafı koduyla nasıl çalıştırılacağına bakalım.
Node.js ve Express ile Basit Sunucu Tarafı Yükleme İşleyicisi
Doğal olarak, yüklenen dosyaları işlemek için herhangi bir sunucu tarafı teknolojisini kullanabilirsiniz. Sunucunuzu eklenti ile nasıl entegre edeceğinizi göstermek için, Node.js kullanarak çok basit bir örnek oluşturacağız ve Ekspres.
Yüklenen dosyanın kendisini idare etmek için kullanacağız multer, bunu gerçekten kolaylaştıran bazı Express ara yazılımlar sağlayan bir paket. Aslında bu kadar kolay:
const upload = multer({ dest: 'uploads/' }); app.post('/upload', upload.single('file'), (req, res, next) => { // Metadata about the uploaded file can now be found in req.file
});
Uygulamaya devam etmeden önce, perde arkasında sizin için talepte bulunan DropzoneJS gibi bir eklentiyle uğraşırken sorulması gereken en bariz soru şudur: "Ne tür yanıtlar bekliyor?"
Başarılı Yükleme İşlemi
Yükleme işlemi başarılı olursa, sunucu tarafı kodunuz söz konusu olduğunda tek gereksinim, bir 2xx cevap kodu. Yanıtınızın içeriği ve biçimi tamamen size bağlıdır ve muhtemelen onu nasıl kullandığınıza bağlı olacaktır. Örneğin, yüklenen dosyanın yolunu veya otomatik olarak oluşturulmuş bir küçük resmin yolunu içeren bir JSON nesnesi döndürebilirsiniz. Bu örneğin amaçları doğrultusunda, dosya nesnesinin içeriğini, yani Multer tarafından sağlanan bir grup meta veriyi geri getireceğiz:
return res.status(200).send(req.file);
Yanıt şunun gibi görünecek:
{ fieldname: 'file', originalname: 'myfile.jpg', encoding: '7bit', mimetype: 'image/jpeg', destination: 'uploads/', filename: 'fbcc2ddbb0dd11858427d7f0bb2273f5', path: 'uploads/fbcc2ddbb0dd11858427d7f0bb2273f5', size: 15458 }
Yükleme Hatalarını Ele Alma
Yanıtınız JSON biçimindeyse - yani yanıt türünüz şu şekilde ayarlanmıştır: application/json - ardından DropzoneJS varsayılan hata eklentisi yanıtın şöyle görünmesini bekler:
{ error: 'The error message'
}
JSON kullanmıyorsanız, yalnızca yanıt gövdesini kullanır. Örneğin:
return res.status(422).send('The error message');
Yüklenen dosya üzerinde birkaç doğrulama kontrolü yaparak bunu gösterelim. İstemci üzerinde gerçekleştirdiğimiz kontrolleri basitçe kopyalayacağız. Unutmayın, istemci tarafı doğrulama kendi başına asla yeterli değildir.
Dosyanın bir resim olduğunu doğrulamak için, MIME türünün şununla başladığını kontrol edeceğiz: image/. ES6'lar String.prototype.startsWith() bunun için idealdir.
İşte bu kontrolü nasıl çalıştırabiliriz ve başarısız olursa, Dropzone'un varsayılan hata işleyicisinin beklediği biçimde hatayı döndürür:
if (!req.file.mimetype.startsWith('image/')) { return res.status(422).json({ error: 'The uploaded file must be an image' });
}
Not: Doğrulama hatası için HTTP Durum Kodu 422, İşlenemeyen Varlık kullanıyorum, ancak 400 Hatalı İstek de aynı derecede geçerli. Aslında, 2xx aralığı dışındaki herhangi bir şey, eklentinin hatayı rapor etmesine neden olacaktır.
Görüntünün belirli bir boyutta olup olmadığını da kontrol edelim. Görüntü boyutu paketi, bir görüntünün boyutlarını almayı gerçekten kolaylaştırır. Eşzamansız veya eşzamanlı olarak kullanabilirsiniz. İşleri basitleştirmek için ikincisini kullanacağız:
const dimensions = sizeOf(req.file.path); if ((dimensions.width < 640) || (dimensions.height < 480)) { return res.status(422).json({ error: 'The image must be at least 640 x 480px' });
}
Hepsini eksiksiz (mini) bir uygulamada bir araya getirelim:
const express = require('express');
const multer = require('multer');
const upload = multer({ dest:'uploads/'});
const sizeOf = require('image-size');
const exphbs = require('express-handlebars'); const app = express(); app.use(express.static(__dirname +'/public')); app.engine('.hbs', exphbs({ extname:'.hbs'}));
app.set('view engine','.hbs'); app.get('/', (req, res) => { return res.render('index', {layout: false});
}); app.post('/upload', upload.single('file'), (req, res) => { if (!req.file.mimetype.startsWith('image/')) { return res.status(422).json({ error :'The uploaded file must be an image' }); } const dimensions = sizeOf(req.file.path); if ((dimensions.width < 640) || (dimensions.height < 480)) { return res.status(422).json({ error :'The image must be at least 640 x 480px' }); } return res.status(200).send(req.file);
}); app.listen(8080, () => { console.log('Express server listening on port 8080');
});
Not: Kısaca, bu sunucu tarafı kodu CSRF korumasını uygulamaz. Bakmak isteyebilirsin CSURF gibi paket bunun için.
Bu kodu, görünüm gibi destekleyici varlıklarla birlikte, eşlik eden depo.
Node.js'de formlarla çalışma hakkında daha fazla bilgi edinmek isterseniz, lütfen okuyun Node.js ve Express ile Formlar, Dosya Yüklemeleri ve Güvenlik.
Özet
DropzoneJS, dosya yükleme kontrollerinizi güçlendirmek ve AJAX yüklemeleri gerçekleştirmek için kaygan, güçlü ve oldukça özelleştirilebilir bir JavaScript eklentisidir. Bu eğitimde, etkinliklerde mevcut seçeneklerden bazılarına ve eklentiyi nasıl özelleştireceğimize baktık. Bir öğreticide makul olarak ele alınabilecek olandan çok daha fazlası var, bu nedenle resmi internet sitesi Daha fazlasını öğrenmek isterseniz. Ama umarım bu, başlamanız için yeterlidir.
Ayrıca, dosya yüklemelerini işlemek için gerçekten basit bir sunucu tarafı bileşeni oluşturarak, ikisinin birlikte nasıl çalışacağını gösterdik.
Kaynak: https://www.sitepoint.com/file-upload-form-express-dropzone-js/?utm_source=rss
