İyi günler!

İnternette uzun süredir CodeIgniter için AJAX dosya yüklemelerinin uygulanması hakkında bilgi arıyordum. Farklı geliştiriciler, farklı teknolojiler ve uygulama örnekleri sundu. Hepsini denedim ama hiçbiri aynı anda yeterince basit ve işlevsel değildi. Kısa süre önce jQuery File Uploader'ı keşfettim. “Diğerlerinden farklı değil” diyorsunuz ama değil. Onun temel farkı basitlik ve örneklerle iyi belgeler. Belgeler tüm geri aramaları ayrıştırır "ve tüm seçenekleri açıklar. Herhangi bir sisteme uygulanması fazla zaman almaz.

Bugün, CodeIgniter'da sunucuya çok parçalı dosya yüklemeyi nasıl çok kolay bir şekilde organize edebileceğinizi göstereceğim + ilaç & bırak.

jQuery Dosya Yükleyici + CodeIgniter

CodeIgniter, kullanıma hazır olarak $ this-> load-> library ("upload"); İndirmeyi görüntünün türüne, boyutuna, genişliğine ve yüksekliğine göre sınırlayarak aktarılan dosyaları kontrol etmenizi sağlayan . Kullanımı kolay ve kullanışlıdır, ancak bu kütüphane tarafından INPUT'a getirilen küçük bir sınırlama olduğu unutulmamalıdır. GİRİŞ alanında bir parametre olmalıdır isim = "kullanıcı dosyası"... Bu gerçeğe katılıyoruz ve Controller'a, Upload kütüphanesini çağıracak ve aslında dosyalarımızı diske kaydedecek fonksiyona gidiyoruz.

PHP işlev uygulamasına bir örnek:
public function upload () ($ config ["upload_path"] = "/ application / uploads /"; $ config ["allowed_types"] = "jpg | jpeg | png | gif | flv | mp4 | wmv | doc | docx | xsl | xslx | ppt | pptx | zip | rar | tar "; $ config [" max_size "] = 2048; $ config [" max_width "] = 800; $ config [" max_height "] = 600; $ config [" encrypt_name " ] = DOĞRU; $ this-> load-> library ("upload", $ config); if ($ this-> upload-> do_upload() == false) ($ error = array ("error" => $ this -> upload-> display_errors()); echo json_encode ($ error);) else ($ data = $ this-> upload-> data(); echo json_encode ($ data);))

Dikkat! Tüm allow_types'lerin sizin için çalışması için, yapılandırma dosyasına eksik MIME-Types'ı eklemeniz gerekir. /application/config/mimes.php

Sunucuya dosya kaydetmeye hazır bir fonksiyonumuz var. İstemci tarafına geçiyoruz. Github'dan jQuery File Upload indirmemiz gerekiyor. Eklenti harika fırsatlar sunuyor, ancak hepsini kullanmayacağız, sadece birkaç dosyanın indirilmesini, uyuşturucu & bırak ve ilerlemeyi kullanacağız.

Gerekli JS'yi indirme sayfasına bağlarız:
- jquery.fileupload.js - jquery.fileupload-video.js - jquery.fileupload-process.js - jquery.iframe-transport.js - upload.js // Dahil değil - hadi kendimiz yazalım

Ve CSS dosyası:
- css / jquery.fileupload.css

GİRDİ'mizi sayfaya ekleyin:
"dosya yükleme")); ?> dosya eklemek için

Fazla bir şey kalmadı - INPUT alanının değiştirilmesi olayını dinleyecek ve seçilen dosyanın indirilmesine neden olacak upload.js yazmak için. "Peki vaat edilen Drug & Drop nerede?" - sen sor. Drug & Drop, jQuery File Upload sayesinde zaten çalışıyor. Standart dosya seçimi iletişim kutusunu çağırmak yerine, birkaç dosyayı aynı anda sayfaya sürükleyebilirsiniz ve bunlar sıra sırasına göre sunucuya yüklenecektir.

Ve son olarak Upload.js
$ (belge) .ready (function () ($ ("# fileupload").fileupload ((dataType: "json", progressall: function (e, data)) (var progress = parseInt (data.loaded / data.total *) 100, 10); $ (". İlerleme .bar"). Css ("genişlik", ilerleme + "%");), yapıldı: işlev (e, veri) (if (data.result.error! = Tanımsız) ($ ("# hata"). html (data.result.error); // varsa sayfada bir hata mesajı göster $ ("# hata"). fadeIn ("yavaş");) başka ($ (" #error "). hide (); // hata mesajının zaten görüntülenmesi durumunda $ (" # dosyalar "). append (" "); $ (" # başarılı "). fadeIn (" yavaş ");)))));));

Veri, sunucudan aldığımız yanıttır, ancak yüklenen dosya hakkında bilgi içeren bir dizi değildir. JSON formatındaki tüm bilgiler Data.Result'da saklanır. Bu arada, console.log (veri), gönderilen dosya sayısı, hatalar ve çok daha fazlası gibi birçok ilginç şeyi bulmanıza yardımcı olacaktır.

Hepsi bu, umarım materyal yararlıdır.

Günümüzde, web siteleri daha etkileşimli hale geliyor. Bu yalnızca özel hizmetler için değil, aynı zamanda sıradan çevrimiçi mağazalar, bloglar ve küçük siteler için de geçerlidir. Ana özellik asenkron JavaScript ve XML kısaltılmış AJAX... Bu teknoloji, tarayıcının arka planda web sunucusu ile iletişim kurmasını sağlar ve veriler yenilendiğinde web sayfası tamamen yeniden yüklenmez. Başka bir deyişle, sayfayı tarayıcıda yeniden yüklemeden sunucudan istekte bulunabilir ve yanıt alabiliriz.

Web uygulamaları geliştirmek için en popüler dil olduğu için PHP, o zaman bugün paketi kullanacağız AJAX ve PHP... ile çalışmanın temel ilkelerini anlamak için bir örnek iyi olacaktır. AJAX ve PHP.

Aslında, herhangi bir özel zorluk olmamalıdır, eylemlerin algoritması:

• Bir resim seçin
• "Gönder" düğmesine basın
• JavaScript (jQuery) ile bir form çağrısını durdurun
• İçeriği özel bir php komut dosyası işleyicisine iletin
• Yürütme sonucunu döndür
• Sonucu JavaScript (jQuery) ile işleyin
• İndirmeyle ilgili bilgileri kullanıcıya göster

Bir bakışta JQuery ve AJAX

Konudan biraz sapacağım ve ne olduğunu açıklayacağım. jQuery... jQuery özel bir JavaScript web uygulamalarının geliştirilmesini birkaç kez basitleştirmeye yardımcı olan bir kitaplık, bu kitaplık aynı zamanda çalışmak için bir API sağlar. AJAX... Basit bir deyişle, saf JS'de yapıyor olduğumuzdan daha az kod yazacağız.

Ajax web sayfasını yeniden yüklemeden web sunucusuyla veri alışverişinde bulunmaya ve içeriğini güncellemeye izin verir.

Sonuç olmadan gelişmeyi hızlandırmanıza izin veren bir araç varsa, neden kullanmayasınız ki, buna inanmaya meyilliyim. Ancak saf JS'yi bilmek de zarar vermez (kişisel olarak JS bilgi seviyem stackoverflow'tan kopyala-yapıştır örneklerinin düzeyine eşit olsa da 🙂).

Bir zamanlar çözmem gereken sorunlardan birini, yani bir siteye önizlemeli bir resim yüklemeyi analiz edeceğiz. Profil resminizi VKontakte'de değiştirdiyseniz, ne hakkında yazdığımı biliyorsunuz.

3 basit dosyaya ihtiyacımız var, bunlar:

• Form sayfası
• php işleyicisi
• js dosyası

index.html

Form içeren normal bir html sayfası. enctype = "multipart / form-data"'ya dikkat edin, dosyaları aktarmak için gereklidir, parametre veri kodlama yöntemini gösterir. Dosyaları aktarıyorsanız, değer her zaman multipart / form-data olmalıdır.

işleyici.php

// Dosya dizisinin ve aktarılan verileri içeren dizinin ayarlanmış olup olmadığını kontrol edin if (isset ($ _ FILES) && isset ($ _ FILES ["image"])) (// Aktarılan dizi $ değişkeninde saklanır image = $ _FILES ["image"]; // Dosya boyutunu kontrol edin ve belirtilen boyutu aşıyorsa // komut dosyasının yürütülmesini sonlandırın ve bir hata görüntüleyin if ($ image ["size"]> 200000) (die ("error" ");) // Görüntü biçimini alın $ imageFormat = patlat ( ".", $ image ["name"]); $ imageFormat = $ imageFormat; // Görüntü için yeni bir ad oluşturun. eski // ama önerilmez $ imageFullName = "./images/". hash ("crc32", time()). ".". $ imageFormat; // Görüntü tipini $ imageType = $ değişkenine kaydedin image ["type"]; // Görüntü eşleşiyorsa, mevcut görüntü formatlarını kontrol edin, // görüntüyü görüntüler klasörüne kopyalayın if ($ imageType == "image / jpeg" || $ imageType == "image / png ") (if (move_uploaded_file ($ image ["tmp_name"], $ imageFullName)) (echo "başarı";) else (echo "hata";) ))

Bu çok basit bir işleyicidir. Hash fonksiyonunu kullanarak resmin adını oluşturdum. Dosyaların adlarını sunucuya yüklenirken değiştirmek iyi bir uygulamadır.

ajaxupload.js

$ (belge) .ready (işlev () (işlev readImage (input) (if (input.files && input.files) (var okuyucu = new FileReader (); okuyucu.onload = işlev (e)) ($ ("# önizleme ") .attr (" src ", e.target.result);) okuyucu.readAsDataURL (input.files);)) function printMessage (hedef, msg) ($ (hedef) .removeClass (); if (msg == "success") ($ (hedef) .addClass ("uyarı uyarısı-başarılı"). text ("Dosya başarıyla yüklendi.");) if (msg == "error") ($ (hedef) .addClass ("uyarı" alert-danger "). metin (" Dosya yüklenirken bir hata oluştu. ");)) $ (" # resim "). change (function () (readImage (bu);)); $ (" # upload- image " ) .on ("gönder", (fonksiyon (e) (e.preventDefault()); var formData = new FormData (bu); $ .ajax ((type: "POST", // İstek tipi url: "handler") .php ", // Veri için komut dosyası: formData işleyicisi, // Önbelleğe aktardığımız veriler: false, // POST isteklerinde varsayılan olarak devre dışıdır, ancak güvenli olmalıyız contentType: false, // Veri kodlamasını ayarlıyoruz formu yazın, devre dışı bırakın ocessData: false, // Dosyayı aktarırken devre dışı bırak: function (veri) (printMessage ("# sonuç", veri); ), hata: fonksiyon (veri) (console.log (veri);))); ))); ));

En komik şey bu senaryoda olur. readImage() fonksiyonunu kullanarak dosyayı form alanından okuyacağız ve ön izleme için bloğa ileteceğiz. Bir FileReader nesnesi oluşturulur. Bir web uygulamasının, kullanıcının bilgisayarındaki bir dosyanın içeriğini okumasını sağlar. İçerik okunduğunda .onload olayı tetiklenir, bu olayı kullanarak resmi önizleme bloğunda görüntüleyeceğiz.
Ve son olarak .readAsDataURL() metodu dosyayı okuma işlemini başlatır, okuma tamamlandıktan sonra .onload olayı çalıştırılır ve resim ekranınızda belirir.

printMessage işlevi, başarılı veya başarısız bir dosya indirme girişimi hakkında bilgi görüntülemek için tasarlanmıştır. Ayrıntılı olarak düşünmüyoruz, özel bir şeyi temsil etmiyor.

Form kesme ve işleme. "Gönder" düğmesine tıkladığınızda, olay komut dosyası tarafından engellenecek ve.preventDefault() işlevi kullanılarak form index.html'ye veri göndermeyecektir. .preventDefault () herhangi bir olayın çağrısını iptal etmek için kullanılır.

Komut dosyamıza bir POST isteği oluşturmak için FormData nesnesine ihtiyacımız var, her form öğesini bir dizeye yazmaktan çok daha kolay. Bir nesne yarattık, onu verilerle doldurduk, onu ajax'ımıza gönderdik.

Aslında isteğin kendisi AJAX... Kütüphaneyi kullandığımız için jQuery, böyle bir istek oluşturmak ve yürütmek size herhangi bir sorun yaşatmayacaktır.

Aslında burada sona ereceğiz. Resim yükleniyor, sayfa yeniden yüklenmiyor, herkes mutlu. Herhangi bir sorunuz veya öneriniz varsa, yorum yazın.

İyi günler ve başarılar 🙂

Son güncelleme: 1.11.2015

Makale, normal bir POST isteğinde sunucuya dosya yüklemenin genel noktalarını ele aldı. Ancak Ajax isteklerini kullanırsak, dosya yüklemenin kendine has özellikleri olacaktır.

İlk önce, bir MVC denetleyicisinde bir yöntem tanımlayalım:

Public JsonResult Upload () (foreach (Request.Files içindeki string dosyası) (var upload = Request.Files; if (upload! = Null) (// dosya adını al string fileName = System.IO.Path.GetFileName (upload. DosyaAdı ); // dosyayı upload.SaveAs (Server.MapPath ("~ / Dosyalar /" + dosyaAdı))) içindeki Dosyalar klasörüne kaydedin;)) return Json ("dosya yüklendi"));)

Bu, indirilen dosyaları depolamak için projemizde tanımlanmış bir Dosyalar klasörümüz olduğunu varsayar. Request.Files koleksiyonu, dosyaları almak için kullanılır.

Dosyayı kaydettikten sonra sonuç kullanıcıya string olarak verilir.

Görünüm kodu daha sonra şöyle görünür:

@ (ViewBag.Title = "(! LANG: Ana Sayfa)"; } !}

@bölüm komut dosyaları ( }

Standart bir forma ihtiyacımız yok, her şey ajax ile yapılıyor. İlk olarak, seçilen tüm dosyaları alıyoruz:

Var dosyaları = document.getElementById ("uploadFile").

Ardından, seçilen tüm dosyaları eklediğimiz FormData nesnesini oluşturuyoruz:

Var data = new FormData(); for (var x = 0; x< files.length; x++) { data.append("file" + x, files[x]); }

Ve onları sunucuya gönderiyoruz.

WebAPI'de eşzamansız dosya yükleme

Web API'sinde denetleyici şöyle görünecektir:

Genel sınıf ValuesController: ApiController (genel zaman uyumsuz Görev Post() (if (! Request.Content.IsMimeMultipartContent ()) (dönüş BadRequest ();) var sağlayıcı = new MultipartMemoryStreamProvider (); // sunucu dizesindeki klasörün yolu kök = System.Web.HttpContext.Current. Sunucu. MapPath ("~ / Dosyalar /"); request.Content.ReadAsMultipartAsync (sağlayıcı); foreach (sağlayıcıda var dosyası.Contents) (var filename = file.Headers.ContentDisposition.FileName.Trim ("\" ") ; byte fileArray = file.ReadAsByteArrayAsync (); kullanarak (System.IO.FileStream fs = new System.IO.FileStream (kök + dosya adı, System.IO.FileMode.Create)) (fs.WriteAsync (fileArray, 0, fileArray. Uzunluk);)) dönüş Tamam ("dosyalar yüklendi");))

Bu, zaman uyumsuz istek işlemeyi kullanır. İlk olarak, IsMultipartContent() yöntemi, isteğin geçerli veriler içerip içermediğini kontrol eder. Değilse, 401 durum kodunu döndürürüz.

Bir akıştan eşzamansız okuma için bir sağlayıcı oluşturulur:

Var sağlayıcı = yeni MultipartMemoryStreamProvider (); Request.Content.ReadAsMultipartAsync (sağlayıcı);

Akışı okuduktan sonra, sağlayıcı.İçerikler özelliği, dosyalar dahil tüm okunan değerleri içerecektir. Ve bir döngüde tüm dosyaları gözden geçirip onları bir dizi bayt halinde okuyoruz:

Byte fileArray = file.ReadAsByteArrayAsync ();

Ardından, FileStream nesnesi kullanılarak okuma dizisi proje klasöründeki diske kaydedilir.

Görünüm, istek url'si dışında MVC ile aynı olacaktır:

$ .ajax ((type: "POST", url: "api / değerler / post", contentType: false, processData: false, veri: veri, başarı: işlev (sonuç) (uyarı (sonuç);), hata : işlev (xhr, durum, p3) (uyarı (durum);)));

Ağda sunucuya dosya yüklemeyi uygulayan birçok kitaplık vardır. Bu nedenle geliştirici, hangi aracı kullanacağı konusunda geniş bir seçeneğe sahiptir. Ancak bazen yeni başlayanlar için oldukça zordur. Başlangıçta, makale için anlaşılması kolay olacak basit bir kütüphane yazmaya karar verildi. Ancak neyse ki, kullanmaya karar verilen ağda oldukça basit bir dosya indirme uygulaması bulundu. Buna dmuploader denir ve bir jQuery eklentisidir.

Tasarım olarak wordpress'te uygulanana benzer bir yükleyici oluşturmak için dmuploader kullanacağız. Sürükle ve Bırak ve tıklamalarla! hadi ihlal edelim!

Proje yapısı:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

#dropzone (kenarlık: 4px kesikli #bbb; border-radius: 5px; color: # 444; padding: 25px; text-align: center;) #dropzone .title (font-size: 20px;) #dropzone girişi (-moz -border-bottom-colors: yok; -moz-border-left-colors: yok; -moz-border-right-colors: yok; -moz-border-top-colors: yok; border-color: şeffaf; border- görüntü: yok; imleç: işaretçi; yön: ltr; kenar boşluğu: 0; opaklık: 0; konum: mutlak; sağ: 0; üst: 0; dönüştürme: tercüme (-300 piksel, 0 piksel) ölçek (4);) #dropzone. tarayıcı yayılma alanı (arka plan: # f7f7f7; kenarlık: 1 piksel katı #ccc; renk: # 555; imleç: işaretçi; yazı tipi boyutu: 16 piksel; yükseklik: 46 piksel; satır yüksekliği: 44 piksel; dolgu: 0 36 piksel;) #dropzone .browser yayılma: vurgulu (kenarlık: 1 piksel katı # 999;)

Javascript:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

// index.php $ (belge) .ready (işlev () ($ ("# dropzone") .dmUploader ((url: "upload.php", dataType: "json", maxFileSize: 256 * 1014, allowTypes: " image / * ", onBeforeUpload: function (id) ($) .show ();), onUploadSuccess: function (id, yanıt) ($ (" div # output ") .html (" ");), onUploadError: işlev (kimlik, mesaj) ($ .jGrowl (" Dosya: "+ kimlik + "yüklenmedi:"+ mesaj, (tema: "hata"); ), onFileTypeError: function (dosya) ($ .jGrowl (, (tema: "error")); onFileSizeError: function (dosya) ($ .jGrowl ( "Dosya çok büyük !!", (tema: "hata"); ), onFallbackMode: işlev (mesaj) ($ .jGrowl ( "Tarayıcınız desteklenmiyor 8 (", (tema: "hata"); ))); ));

Her şey! Müşteri kısmı hazır. Biraz daha detay:

1. DmUploader, bizim için #dropzone öğesinin ana sayfası için sürükleme etkinliklerine ve girdi dosyası öğesi için change olayına abone olacaktır.
2. Olaylardan biri meydana geldiğinde, yerel dosya api dosyası kullanılarak okunacaktır.
3. Dosyanın boyutu ve türü kontrol edilecektir. Bizim durumumuzda, sadece resimler.
4. Tüm kontrolleri sağlayan dosya sunucuya yüklenecektir.
5. Bu süreçte, ilgili geri aramalar aranacaktır. Örneğin, dosya başarıyla yüklendikten sonra onUploadSuccess çağrılır. İşlevin ikinci argümanı, sunucudan json formatında bir yanıt alacaktır. Kitaplıkta örnekte gösterilenden daha fazla geri arama var. Bunların yardımıyla daha karmaşık görevleri uygulayabilirsiniz.

sunucu

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

// upload.php require_once __DIR__. "/protected/bootstrap.php"; if (! IS_POST () ||! $ _FILES) (stopAndResponseMessage ("hata", "POST, yalnızca DOSYALAR") $ files = convertFileInformation ($ _ FILES); if (! isset ($ files ["file"])) ( stopAndResponseMessage ("hata", "Dosya yüklenmedi"); ) $ dosya = $ dosyalar ["dosya"]; if ($ dosya ["hata"]! == UPLOAD_ERR_OK) (stopAndResponseMessage ("hata", uploadCodeToMessage ($ dosya ["hata"]));) $ mimeType = tahminMimeType ($ dosya ["tmp_name"]); if (! $ mimeType) (stopAndResponseMessage ("hata", "Dosya türü tanınmadı!"); ) $ validMimeType = ["image / png", "image / jpeg"]; if (! in_array ($ mimeType, $ validMimeType)) (stopAndResponseMessage ("hata", "Yalnızca png ve jpeg yüklenebilir!"); ) $ boyut = dosya boyutu ($ dosya ["tmp_name"]); if ($ size> 256 * 1024) (stopAndResponseMessage ("hata", "Dosya çok büyük !!"); ) $ uploadDir = __DIR__. "/ Dosyalar"; if (! is_writable ($ uploadDir)) (stopAndResponseMessage ("hata", "Dosya klasörü yazılabilir değil."); ) $ dosya adı = zaman (). "-". mt_rand (0000, 9999). "." ... tahminFileExtension ($ mimeType); if (! move_uploaded_file ($ file ["tmp_name"], $ uploadDir. "/". $ filename)) (stopAndResponseMessage ("hata", "Dosya değiştirilmedi!"); ) sendResponse ("yükle", ["url" => "dosyalar /". $ dosyaadı]);

tahmin MimeType işlevine odaklanmaya değer. Dosyanın MIME türünü belirlemek için FileInfo uzantısını kullanır. Koddan da görebileceğiniz gibi tarayıcıdan gönderilen dosyanın türü ve boyutu kontrol sırasında algılanmıyor. Bir davetsiz misafir tarafından dövülebilirler.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

//protected/inc/func.php işlevi tahminMimeType ($ yol, $ magicFile = null) (if (! is_file ($ yol)) (boş döndürme;) if (! is_readable ($ yol)) (boş döndürme;) if (! $ finfo = yeni \ finfo (FILEINFO_MIME_TYPE, $ magicFile)) (dönüş;) return $ finfo -> dosya ($ yol);)

Demoya dayanarak, bu alandaki bilginizi derinleştirebilirsiniz. Daha fazla çalışma için bağlantılar kaynak kodlarında verilmiştir. Deney!

AJAX ve jQuery kullanarak resim gibi dosyaları sunucuya nasıl yükleyebilirim? Bu oldukça basit bir şekilde yapılır! Ve aşağıda her şeyi ayrıntılı olarak analiz edeceğiz.

Henüz jQuery'nin olmadığı veya belki de öyle olduğu, ancak tarayıcıların o kadar karmaşık olmadığı o "antik" zamanlarda, AJAX kullanarak bir siteye dosya yüklemek kasvetli bir işti: iframe gibi her türlü koltuk değneği aracılığıyla. O zamanları bulamadım ve şimdi kim ilgileniyor. Ve şimdi ilginç olan başka bir şey var - dosyaları siteye kaydetmenin çok basit olması. AJAX'ın nasıl çalıştığına dair deneyimi ve anlayışı olmasa bile, bir web yöneticisi hangi yolu çabucak anlayabilir. Ve bu makale ona yardımcı olacaktır. Bu yetenekleri WordPress işlevleriyle güçlendirirseniz, dosyaları güvenli bir şekilde işlemek ve sunucuya yüklemek tamamen önemsiz ve hatta ilginç hale gelir (örneğin, WordPress ile, makalenin sonuna bakın).

Ancak, her şey ne kadar basit olursa olsun, dosyalarda minimum deneyim ve Javascript, jQuery ve PHP'nin temel bilgisinin hala gerekli olduğu unutulmamalıdır! En azından dosyaların sunucuya nasıl yüklendiğini, genel anlamda AJAX'ın nasıl çalıştığını anlamanız ve en azından biraz da kodu okuyup anlayabilmeniz gerekiyor.

Aşağıda açıklanan yöntem oldukça kararlıdır ve aslında temelde tüm tarayıcılarda desteklenen yeni FormData () Javascript nesnesine dayanır.

Malzemenin daha net bir şekilde algılanması için adımlara ayrılmıştır. Hepsi bu, hadi uçalım ...

AJAX Dosya Yüklemeleri: Genel Bir Örnek

Her şey, dosya türündeki giriş alanının sitedeki varlığıyla başlar. Bu alanın formun bir parçası olması gerekli değildir (etiket

).

Böylece, bir dosya alanı ve "Dosyaları yükle" düğmesi olan bir HTML kodumuz var.

dosyaları indir

Adım 1. Dosya alanındaki veriler

İlk adım, indirilen dosyaların verilerini almaktır.

Dosya alanına tıkladığınızda, dosyaları seçmek için bir pencere belirir, seçimden sonra bunlarla ilgili veriler giriş alanında saklanır ve onları oradan "almamız" gerekir. Bunu yapmak için, mevcut dosya alanı verilerini JS değişken dosyalarına kaydedecek bir işlev olan change JS olayına asacağız:

var dosyaları; // değişken. dosya verilerini içerecek // dosya alanının değeri değiştiğinde değişkeni verilerle doldurun $ ("input") on ("change", function () (files = this.files;));

Adım 2. Bir AJAX isteği oluşturun (tıklandığında)

Dosya verisine sahibiz, şimdi AJAX ile göndermemiz gerekiyor. Bu olayı "Dosyaları yükle" düğmesine tıklandığında asarız.

Tıklama anında, yeni bir formData () nesnesi oluşturun ve ona dosya değişkeninden veri ekleyin. formData () ile gönderilen verilerin, formu tarayıcıya gönderiyormuş gibi görünmesini sağlayacağız.

Böyle bir isteğin gerçekleşmesi için jQuery'nin ek AJAX parametreleri belirtmesi gerekir, bu nedenle normal $ .post() işlevi uygun değildir ve daha esnek bir analog kullanıyoruz: $ .ajax().

İki önemli ek parametrenin false olarak ayarlanması gerekir:

ProcessData İletilen verilerin işlenmesini devre dışı bırakır. Varsayılan olarak, örneğin GET istekleri için jQuery, verileri bir sorgu dizesinde toplar ve bu dizeyi URL'nin sonuna ekler. POST verileri için diğer dönüşümleri yapar. Orijinal verilerde yapılacak herhangi bir değişiklik bizi etkileyecektir, bu nedenle bu seçeneği devre dışı bırakıyoruz ... contentType İstek türü başlığını ayarlamayı devre dışı bırakır. Varsayılan jQuery ayarı "application / x-www-form-urlencoded" şeklindedir. Bu başlık dosya göndermez. Bu parametreyi "multipart / form-data" olarak ayarlarsanız, PHP iletilen verileri hala tanıyamaz ve "Multipart / form-data'da eksik sınır" uyarısını göster... Genel olarak, en kolay yol bu seçeneği devre dışı bırakmaktır, o zaman her şey çalışır! // butona tıklandığında bir AJAX isteği işlenir ve gönderilir upload_files $ (". upload_files "). on (" tıklayın ", işlev ( olay) (event.stopPropagation (); // mevcut tüm JS olaylarını durdur event.preventDefault (); // mevcut öğe için varsayılan olayı durdur - için tıklayın etiket // dosyalar boşsa hiçbir şey yapmayın if (typeof files == "undefined") return; // bir form veri nesnesi yarat var data = new FormData (); // veri nesnesini $ .each (dosyalar, işlev (anahtar, değer) (data.append (anahtar, değer);) göndermek için uygun bir biçimde dosyalarla doldurun); // isteği tanımlamak için bir değişken ekleyin data.append ("my_file_upload", 1); // AJAX isteği $ .ajax ((url: "./submit.php", tip: "POST", // önemli! Veri: veri, önbellek: yanlış, dataType: "json", // iletilen verilerin işlenmesini devre dışı bırak) , processData: false olduğu gibi iletilmesine izin verin, // istek tipi başlığının ayarını devre dışı bırakın. jQuery sunucuya bunun bir string request olduğunu nasıl söyleyecektir contentType: false, // başarılı bir sunucu yanıtı için fonksiyon başarı: function ( yanıt, durum, jqXHR) (// Tamam - dosyalar yüklendi if (typeof answer.error === "undefined") (// yüklenen dosyaların yollarını ".ajax-reply" bloğuna çıkar var files_path = answer.files ; var html = ""; $ .each (files_path, işlev ( anahtar, değer) (html + = değer + "
";)) $ (". ajax-reply "). html (html);) // başka hata (console.log (" HATA: "+ yanıt.hata);))), // sunucu yanıtı hatası işlev hatası: function (jqXHR, durum, errorThown) (console.log ("ERROR AJAX request:" + status, jqXHR);)));));

Adım 3. İsteği işliyoruz: dosyaları sunucuya yükleyin

Şimdi son adım: Gönderilen talebi işlemeniz gerekiyor.

Dosyalar için ek kontroller olmadan isteği görsel olarak işlemek için, ör. sadece alınan dosyaları istediğiniz klasöre kaydedin. Güvenlik için gönderilen dosyaların kontrol edilmesi gerekmesine rağmen, en azından dosyanın uzantısı (türü) ...

Aşağıdaki kodla bir send.php dosyası oluşturalım (gönder.php'nin AJAX isteğinin gönderildiği dosyayla aynı klasörde olduğu varsayılır):

$ done_files): dizi ("hata" => "Dosyalar yüklenirken hata oluştu."); die (json_encode ($ veri)); )

Bu kadar!

Önemli! Bu kod yalnızca dosyaların nasıl alınacağını ve kaydedileceğini gösterir. Aslında, alınan dosyaların biçimlerini, boyutlarını kontrol etmeniz, Kiril adlarının harflerini çevirmeniz ve muhtemelen başka kontroller yapmanız gerekir.

Yukarıdaki indirme kodunu parçalar halinde toplamamak için indirmenizi öneririm.

Arşivin içeriğini php sunucunuza kopyalayın, ana pakete (tarayıcıda) gidin ve dosyaları yüklemeyi deneyin. Böylece neyin ve nasıl çalıştığını "canlı" olarak göreceksiniz.

AJAX Dosya Yüklemeleri: WordPress İçin Bir Örnek

WordPress için, bir AJAX isteğini işlemek birçok kez daha kolaydır, çünkü hazır işlevler vardır, örneğin media_handle_upload ().

Birinci ve ikinci adımlar benzerdir, ancak üçüncü adımda kitaplığa bir dosya ekleyecek ve onu mevcut gönderiye bağlayacak yerleşik bir işlev kullanacağız.

Aşağıdaki kodun çalışması için temanızın function.php dosyasına eklemeniz gerekir. Ardından, ajax_file_upload kısayolu ile bir sayfa oluşturun ve bu sayfaya gidin. İçerikte dosya eklemek için bir form göreceksiniz. Dosyaları seçin ve her şeyin yüklenip yüklenmediğini kontrol edin ...

Bu, bir WordPress ortamında sunucunuza nasıl güvenli bir şekilde dosya yükleyeceğinizi gösteren eksiksiz bir örnektir.

post_name! == "ajax_file_upload") $ metin döndürür; $ metin döndür. = " Dosya yükleme

";) // JS kodu işlevi ajax_file_upload_jscode () (?> $ max_size || $ sizedata / * height * /> $ max_size) wp_send_json_error (__ ("Resim şundan daha büyük olamaz". $ max_size. "px genişlik veya yükseklikte ...", "km")); // request_once ABSPATH dosyasını yüklemeyi ele al. "wp-admin / içerir / image.php"; request_once ABSPATH. "wp-admin / içerir / dosya.php"; request_once ABSPATH. "wp-admin / içerir / media.php"; // izin verilen dosya türlerinin filtresi - yalnızca resimlere izin verilir add_filter ("upload_mimes", function ($ mimes) (dönüş ["jpg | jpeg | jpe" => "image / jpeg", "gif" => "image / gif) ", "png" => "resim / png",];)); $ uploaded_imgs = dizi (); foreach ($ _ FILES as $ file_id => $ data) ($ Attach_id = media_handle_upload ($ file_id, $post_id); // error if (is_wp_error ($ Attach_id)) $ uploaded_imgs = "Dosya yüklenirken hata` ". $ data [ " name "]." `:". $ Attach_id-> get_error_message (); else $ uploaded_imgs = wp_get_attachment_url ($ Attach_id);) wp_send_json_success ($ uploaded_imgs); )