Bu makalede, en yaygın görevlerden birini çözmeye bakacağız - eşzamansız olarak sunucuya dosya yükleme ve ilerlemeyi görüntüleme. Komut dosyamız sunucuya resim yükleyecek, bir ilerleme çubuğu gösterecek ve ardından yüklenen resmi gösterecektir. Bazı durumlarda, yüklediğiniz dosyanın kimliğini döndürmeniz veya arka uçtaki dosyayla başka bir şey yapmanız gerekebilir, örneğin veritabanına kaydetme vb. Bu yazıda ön uç - yani. istemcide eşzamansız yüklemenin uygulanması.
Test projesi olarak Visual Studio'da boş bir ASP.NET MVC uygulaması oluşturun. Arka uçta C# kullanacağız (dediğim gibi, JavaScript yazmaya odaklanacağız, böylece arka uç için başka herhangi bir dili kullanabilirsiniz). NuGet Paket Yöneticisi'ni kullanarak jQuery kitaplığı ekleyin (Görünüm -> Diğer Windows -> Paket yöneticisi Konsolu):
Yükleme Paketi jQuery
HomeController.cs controller sınıfını Controllers klasörüne aşağıdaki içerikle ekleyin (unutmayın, Home controller proje yönlendirme ayarlarında varsayılan olarak kullanılır - /App_Start/RouteConfig.cs dosyası):
System.Web.Mvc'yi Kullanmak; ad alanı UploadFiles.Controllers (genel sınıf HomeController: Controller (genel ActionResult Index () (dönüş Görünümü (;)))
Dizin yöntemine sağ tıklayın ve içerik menüsünden Görünüm Ekle'yi seçin. Visual Studio, /Views/Home/index.cshtml bir görünüm dosyası ve /Views/Shared/_Layout.cshtml varsayılan düzeni oluşturacaktır. Bir oluşturma dosyasına jQuery kitaplığını ekleyelim:
@RenderBody ()
Burada ayrıca tarayıcı için bir CSS sıfırlaması ekledik ve /Content/Site.css stil sayfasını ekledik. Ayrıca script.js dosyasını scripts klasörüne ekleyin. Şimdi projeye dosya yüklemek için bir form ekleyelim. Bunu yapmak için Index.cshtml görünümünü açın ve aşağıdaki işaretlemeyi kullanın:
@ (ViewBag.Title = "(! LANG: Dizin"; } !}
Dosyalarınızı bu alana sürükleyin!
Bölüm öğesi, yüklenen dosyaların eklendiği bir form içerir. Dosyalar bu kapsayıcıya şu şekilde yerleştirilebilir: sürükle ve bırak veya bölüm öğesine tıkladıktan sonra iletişim kutusu aracılığıyla. İlerleme öğesi, dosyaların indirilmesi için bir ilerleme çubuğu içerecek, hatalar hata öğesinde görüntülenecek ve sunucuya kaydedilen görüntüleri görüntülemek için görüntü kapsayıcısına ihtiyaç duyulacaktır.
Şimdi sayfa için CSS stilleri eklememiz gerekiyor. Bunu yapmak için /Content/Site.css dosyasını aşağıdaki gibi düzenleyin:
Gövde (yazı tipi ailesi: Arial, Helvetica, sans-serif;) bölümü (konum: göreceli; genişlik: 380 piksel; yükseklik: 160 piksel; kenar boşluğu: 40 piksel otomatik; renk: # 40444f; kenarlık: .2rem kesikli # 616778; kenarlık yarıçapı : 1.5rem; imleç: işaretçi; -webkit-geçişi: renkli 0.2s kolay çıkış, border-color 0.2s kolay çıkış; -moz-geçişi: renkli 0.2s kolay çıkış, kenarlık-renk 0.2s kolay çıkış; geçiş: renkli 0,2s hareket hızı, kenarlık rengi 0,2s hareket hızı; taşma: gizli; dolgu üstü: 90 piksel; kutu boyutu: kenarlık kutusu;) bölüm: vurgulu, bölüm.dd (kenarlık rengi: # 4d90ff; renk: # 4d90ff; arka plan rengi: # e7f0fe;) şekil (konum: mutlak; genişlik: %100; yükseklik: 160 piksel; sol: 0; üst: 0; görüntü: blok;) şekil: sonra (konum: mutlak ; görüntüleme: blok; içerik: ""; yükseklik: 80 piksel; genişlik: 80 piksel; üst: 5 piksel; sol: %50; sol kenar boşluğu: -40 piksel; arka plan tekrarı: tekrar yok; arka plan boyutu: 80 piksel 80 piksel; arka plan -image: url (https: //site/my/it/blog/net/images/upload_icon.png); -webkit-geçişi: opaklık 0.2s kolaylığı ut, border-color 0.2s hareket kolaylığı; -moz geçişi: opaklık 0,2s kolay çıkış, kenarlık rengi 0,2s kolay çıkış; geçiş: opaklık 0,2s hareket hızı, kenarlık rengi 0,2s hareket hızı; ) bölüm: vurgulu şekil: sonra, bölüm.dd şekil: sonra (opaklık: .65;) p (metin hizalama: merkez; yazı tipi ağırlığı: kalın; yazı tipi boyutu: 16 piksel; satır yüksekliği: 24 piksel;) p küçük (yazı tipi ağırlığı: normal; yazı tipi boyutu: 12px; opaklık: .7;) (konum: mutlak; üst: -16rem; opaklık: 0;) .error (genişlik: 380 piksel; kenar boşluğu: 0 otomatik 20 piksel; satır yüksekliği : 20 piksel; yazı tipi boyutu: 14 piksel; renk: kırmızı; yazı tipi stili: italik; görüntü: yok; metin hizalama: merkez;) / * İlerleme çubuğu * / .ilerleme (yükseklik: 20 piksel; genişlik: 380 piksel; kenar boşluğu: 0 otomatik 20 piksel; taşma: gizli; arka plan rengi: # 999; sınır yarıçapı: 4 piksel; -webkit-kutu gölgesi: iç metin 0 1 piksel 2 piksel rgba (0,0,0, .1); kutu gölge: iç metin 0 1 piksel 2px rgba (0,0,0, .1); konum: göreli; görüntü: yok;) .ilerleme çubuğu (yükseklik: %100; yazı tipi boyutu: 12 piksel; kayan nokta: sol; genişlik: 0; arka plan rengi: # 428bca; -webkit-box-shadow: inset 0 -1px 0 rgba (0,0,0, .15);box-shadow: inset 0 -1px 0 rgba (0,0,0, .15); - webkit -geçiş: genişlik .6s kolaylık; geçiş: genişlik .6s kolaylık;) .ilerleme-val ue (konum: mutlak; sol: 0; üst: 0; satır yüksekliği: 20 piksel; yükseklik: %100; genişlik: %100; renk: #fff; metin hizalama: merkez; ) / * Yüklenen resimler içeren kap * / .images (genişlik: 380 piksel; taşma: gizli; kenar boşluğu: 0 otomatik;) .images a (genişlik: 116 piksel; yükseklik: 116 piksel; kenar boşluğu: 0 10 piksel 10 piksel 0; kayan nokta: sol; ekran : blok; kutu boyutu: kenarlık kutusu; dolgu: 4 piksel; kenarlık: 1 piksel katı # d2d2d2; sınır yarıçapı: 6 piksel; konum: göreceli;) .images a: vurgulu (kenarlık rengi: # 428bcb;) .images span (genişlik: %100; yükseklik: %100; konum: mutlak; üst: 0; sol: 0; görüntü: blok; arka plan tekrarı: tekrar yok; arka plan boyutu: içerme; arka plan konumu: merkez;)
Şu anda, form şöyle görünüyor:
Şimdi aşağıdaki işlevleri sağlaması gereken bir komut dosyası eklememiz gerekiyor:
Kesit elemanına tıkladığınızda, dosya seçimine sahip kalıcı bir pencere açılmalıdır.
Dosyaları gezginden tarayıcı penceresine sürükleyip bırakırken, bölüm öğesi fareyle üzerine gelindiğinde olduğu gibi vurgulanmalıdır (bunun için CSS sınıfını “dd” ekledik). Dosyaları serbest bırakırken (ve iletişim kutusundan bir dosya seçerken), resimler sunucuya yüklenmelidir.
Dosyaları yüklerken bir gösterge eklemeniz ve yükleme ilerleme yüzdesini görüntülemeniz gerekir.
Sunucuda bir hata olması durumunda hataların görüntülenmesi ve göstergenin gizlenmesi gerekmektedir.
Görüntüler sunucuya başarıyla yüklendiyse, bunları görüntü kapsayıcısında görüntülemeniz gerekir.
Aşağıdaki komut dosyası (script.js dosyası) yukarıdaki soruların tümünü çözer:
$ (işlev () (// $ ("şekil") üzerine tıklayarak dosya seçim penceresini programlı olarak açın ("tıkla", işlev () ($ (": dosya"). tetikleyici ("tıkla"));)) // Dosyaları forma sürüklerken $ ("bölüm") öğesini vurgulayın.Açık ("dragover", function (e) ($ (bu) .addClass ("dd"); e.preventDefault (); e.stopPropagation ( ); )); // dragenter olayı $ ("bölüm") için varsayılan eylemi engelle. On ("dragenter", function (e) (e.preventDefault (); e.stopPropagation ();)); $ ("bölüm") " ) .on ("dragleave", function (e) ($ (bu) .removeClass ("dd");)); $ ("bölüm"). on ("bırak", işlev (e) (if (e) . orijinalEvent.dataTransfer) (if (e.originalEvent.dataTransfer.files.length) (e.preventDefault (); e.stopPropagation (); // yükleme işlevini çağırın. Sürüklenen dosyalar e.originalEvent içinde // bulunur .dataTransfer.files özellik yükleme (e.originalEvent.dataTransfer.files);))); // Dosyaları klasik şekilde yükleyin - $ (": file"). (yükle ($ (bu) ... prop ("dosyalar")); )); )); // Dosya yükleme işlevi işlevi yükleme (dosyalar) (// Bir FormData nesnesi oluşturun var formData = new FormData (); // (var i = 0; i için tüm dosyalar arasında döngü yapın)< files.length; i++) { // С помощью метода append() добавляем файлы в объект FormData formData.append("file_" + i, files[i]); } // Ajax-запрос на сервер $.ajax({ type: "POST", url: "/Home/Upload", // URL на метод действия Upload контроллера HomeController data: formData, processData: false, contentType: false, beforeSend: function () { $("section").removeClass("dd"); // Перед загрузкой файла удалить старые ошибки и показать индикатор $(".error").text("").hide(); $(".progress").show(); // Установить прогресс-бар на 0 $(".progress-bar").css("width", "0"); $(".progress-value").text("0 %"); }, success: function (data) { if (data.Error) { $(".error").text(data.Error).show(); $(".progress").hide(); } else { $(".progress-bar").css("width", "100%"); $(".progress-value").text("100 %"); // Отобразить загруженные картинки if (data.Files) { // Обертка для картинки со ссылкой var img = ""; for (var i = 0; i< data.Files.length; i++) { // Сгенерировать вставляемый элемент с картинкой // (символ 0 заменяем ссылкой с помощью регулярного выражения) var element = $(img.replace(/0/g, data.Files[i])); // Добавить в контейнер $(".images").append(element); } } } }, xhrFields: { // Отслеживаем процесс загрузки файлов onprogress: function (e) { if (e.lengthComputable) { // Отображение процентов и длины прогресс бара var perc = e.loaded / 100 * e.total; $(".progress-bar").css("width", perc + "%"); $(".progress-value").text(perc + " %"); } } }, }); }
Bir dosya listesini kaydetmek ve Ajax aracılığıyla sunucuya aktarmak için şunu kullanın: FormData nesnesi.
Lütfen indirme işleminin izlenmesinin aşağıdakilerden sorumlu olduğunu unutmayın: xhrFields özelliği nesne $ .ajax yöntemine iletilir. Bu özellik, olay işleme işlevine sahip bir nesneyi depolar ilerleme... Bu olaya yüklenmiş özelliklere sahip bir nesne iletilir - önceden yüklenmiş veri miktarı ve toplam - verilerin toplam boyutu. Bu iki parametre sayesinde indirme işleminin ilerleme durumunu indikatör üzerinde görüntüleyebiliyoruz.
$ .ajax() metodunda HomeController'ın henüz eklenmemiş olan Upload action metodunu referans alıyoruz. Bunu düzeltelim ve HomeController.cs dosyasını düzenleyelim:
Sistemi Kullanmak; System.Web'i kullanarak; System.Linq kullanarak; System.Web.Mvc kullanarak; System.Collections.Generic kullanarak; System.IO kullanarak; ad alanı UploadFiles.Controllers (genel sınıf HomeController: Controller (genel ActionResult Index () (dönüş Görünümü ();) public JsonResult Upload () (string __filepath = Server.MapPath ("~ / uploads"); int __maxSize = 2 * 1024 * 1024; // maksimum dosya boyutu 2 MB // Liste dosyaları için izin verilen MIME türleri
Buradan dosyaları alıyoruz Dosya indeksleyici nesne HttpRequestBase ASP.NET denetleyicisinde İstek özelliği aracılığıyla kullanılabilir. Ardından, iki basit kontrol gerçekleştiriyoruz - dosya boyutu 2 MB'ı geçmemeli ve dosya türü JPG veya PNG olmalıdır. Dosya kontrollerle eşleşmiyorsa, komut dosyasına hatalı bir nesne döndürülür ve kullanıcıya gösterilir. Aksi takdirde, dosya projenin uploads klasörüne kaydedilir, GUID kullanılarak oluşturulan rastgele bir ad atanır.
Bu örneği test etmeden önce uploads klasörünü proje kök dizinine eklemeyi unutmayın.
Muhtemelen birçok kişi "JS ve JQuery kullanarak sunucuya dosya nasıl yüklenir?" sorusuyla karşılaşmıştır.
Ve muhtemelen herkes bunu yapmayı başaramadı. Aslında, her şey göründüğü kadar karmaşık değildir.
Bu derste sunucuya (hosting) dosya yükleme işlemini anlatacağım.
Ajax teknolojisi, tarayıcı ve web sunucusu arasında veri alışverişi yapmak için kullanılır.
Tarifte kullanılan jQuery versiyonu 2.2.2'dir.
Html, head ve body etiketlerinden ilkel işaretleme oluşturun.
Head etiketinde jquery kütüphanesinin yolunu yazmanız gerekir.
Örnek için google sunucusundan jquery kullanıyorum.
Gövde etiketinde giriş etiketi ve butondan oluşan bir form oluşturuyoruz.
Giriş tipi = "dosya", yüklenecek bir dosya seçmek için kullanılır.
Dosya aktarımı için js kodunu çalıştırmak için düğme etiketi gereklidir.
Formu name = "uploader", enctype = "multipart / form-data", method = "POST" olarak ayarlayın.
Form adı: name = "yükleyici"
Form veri kodlama yöntemi: enctype = "multipart / form-data"
Veri aktarım yöntemi: yöntem = "POST"
Tüm html ve js işaretleme kodu:
Gelelim java script koduna.
Bir dosya göndermek için tüm formu göndermelisiniz:
$ ("form").gönder (işlev (e) (
Form verilerini bir değişkene okuruz:
var formData = new FormData ($ (bu));
Ardından, verileri web sunucusuna aktarmak için ajax teknolojisini kullanıyoruz.
Dosya başarıyla aktarıldıysa, bir açılır pencere ilgili mesajı görüntüler.
Bir hata oluşursa veya dosya eksikse, sorunun metnini içeren bir mesaj görüntülenecektir.
$ .ajax ((url: "file.php", yazın: "POST", veri: formData, zaman uyumsuz: yanlış, başarı: işlev (mesaj) (uyarı (msg);), hata: işlev (mesaj) (uyarı ( "Hata!");), Önbellek: false, contentType: false, processData: false));
jquery kullanarak tüm java komut dosyası kodu:
Artık POST istek yöntemini kullanarak formdan veri almak için sunucu tarafı kodu var.
Sitenin kök dizinini alıyoruz ve dosyaları indirmek için bir klasör atadık:
$ uploaddir = $ _SERVER ["DOCUMENT_ROOT"]. DIRECTORY_SEPARATOR. "yüklemeler" .DIRECTORY_SEPARATOR;
İndirilen dosyayı okuyoruz:
$ uploadfile = $ uploaddir. basename ($ _ FILES ["kullanıcı dosyası"] ["ad"]);
Dosyanın yüklenip yüklenmediğini kontrol edin.
Gelen verilere göre eşlik eden bir mesaj atarız.
Dosya yüklenmemişse, $ uploadfile içinde belirtilen dizine yükleyin:
if (move_uploaded_file ($ _ FILES ["userfile"] ["tmp_name"], $ uploadfile)) ($ out = "Dosya geçerli ve başarıyla yüklendi. \ n";) else ($ out = "Olası dosya yükleme saldırısı ! \ n ";)
Bu eylemler gerçekleştirildiğinde, bir yanıt döndürülür.
Tüm php kodu:
js dahil tüm html kodları:
Kaynak dosyayı indirin:
Bir sunucuya dosya veya resim yüklemek oldukça yaygın bir iştir. Ancak ilerleme durmuyor ve bu nedenle şimdi, elbette, dosyaların indirilmesinin arka planda gerçekleşmesini istiyorum. Kural olarak, bu daha önce flash veya iframe teknolojisi kullanılarak yapılabilirdi. Ayrıca, birçok kişi jQuery Form Plugin veya Ajax File Upload Plugin veya Multiple File Upload Plugin ve diğerleri gibi eklentiler kullanır. FormData nesnesinin tanıtılmasıyla işler çok daha basit hale geldi. FormData (), XMLHttpRequest kullanarak sunucuya gönderilecek bir veri kümesi oluşturmanıza olanak tanır.
Arka planda sunucuya resim veya dosya yüklemek için herhangi bir eklenti olmadan (tabii ki jQuery çerçevesi hariç) kendi kodumuzu yazmaya çalışalım. Genel olarak, eylemlerimizin algoritması şöyle olacaktır: form alanlarını verilerle dolduruyoruz. Alanlar istediğiniz herhangi bir şey olabilir, metin, metin alanı, seçim ve dosyalar. Dosyaları seçtiğinizde jQuery kodumuz sayesinde bu dosyalar arka planda sunucu üzerinde geçici bir dizine, örneğin “tmp”ye yüklenecektir. Ayrıca, formun gönder düğmesine tıkladığınızda, veriler bu verileri işleyecek olan sunucu komut dosyasına gönderilir. Bunların makaleler olduğunu düşünelim. Aktarılan verileri benzersiz bir id ile veritabanına yazacağız. Ardından, “images” dizininde benzersiz bir “id” numarası ile bir dizin oluşturun ve “tmp” klasöründe herhangi bir dosyamız varsa, bunları oluşturulan “id” klasörüne kopyalayacağız ve ardından “tmp” klasörünü temizleyeceğiz. . Özetlemek gerekirse: tmp'deki resimleri arka planla dolduruyoruz, formu gönderdiğimizde verileri veritabanına yazıyoruz, benzersiz bir kayıt numaramız olacak. Bu numara ile bir klasör oluşturun ve dosyalarımızı oraya taşıyın. Her şey. Bu yazıda veri tabanına yükleme ve dosya kopyalamayı düşünmeyeceğiz. Bence herkesin kendine göre bir şeyleri olacak. Bir şeye odaklanacağız - görüntüleri (veya dosyaları) eşzamansız olarak yüklemek.
İşte html parçamız. Burada, stillerle ekrandan gizlediğimiz bir ön yükleyici (ilmekli daire) tarafından resim içeren bir GIF dosyamız olduğuna dikkat edeceğiz. Ayrıca, dosya alanına id = file ve forma enctype = "multipart / form-data" atayın. Dosya alan adı dosya olacaktır, yani. birden çok dosya yüklememize izin verildiğinden (çoklu öznitelik) diziyle çalışabilmemiz için.
Bilgi ekle
Bu formda dosya alanına ek olarak birkaç alanımız var, örneğin: input = text. Onlar. önümüzde, örneğin, ihtiyacınız olan bir dizi alan olan yönetici paneli için olağan formdur. Başlangıç olarak, isterseniz, dosyanın başına FILES dizisinin görüntülendiği satırları yazarak betiğin çalışmasını kontrol edebilirsiniz:
//upload.php print_r ($ _ DOSYALAR);
Şimdi jQuery kullanılarak çağrılacak sunucu tarafı scriptimizi yazalım. Görevi, örneğin “tmp” de kararlaştırdığımız gibi, yüklenen dosyaları sunucunun geçici dizininden bizimkilere aktarmak ve ardından göstermektir.
//upload.php işlevi show_dir ($ dir) // tmp klasöründeki resimleri gösterme işlevi ($ list = scandir ($ dir); unset ($ list, $ list); foreach ($ dosyası olarak $ list) (echo " ";)) foreach ($ _FILES as $ key => $ value) (// dosyaları tmp move_uploaded_file ($ value [" tmp_name "]," tmp /".$ value ["name"]);) show_dir ( "./tmp/");
Ve şimdi arka planda dosyalarımızı sunucuya yükleyecek olan js-script'imiz. FormData() nesnesi sayesinde tüm sihir yapılacaktır. Bu kodu index.php dosyamızın sonuna tagdan önce ekleyeceğiz.
Eh, hepsi bu gibi görünüyor. Biri anlamıyorsa, sorun. Birinin eklemeleri varsa, ben de memnun olacağım!
İpucu: Henüz herhangi bir dizinden dosya silmek için kodu kullanmadıysanız, yalnızca silmek istediğiniz dosyaların silineceğinden emin olmak için test için rmdir silme işlevini yankı olarak değiştirmenizi öneririm. Gif ön yükleyicileri, örneğin, Gif animasyonu nasıl yapılır öğreticimden alınabilir. Makalenin sonundaki örnekler.
UPD:
Birisi güzellik eklemek istiyorsa, örneğin bir ilerleme çubuğu, bunun için birkaç satır kod eklememiz gerekecek. Html şablonunda html5 - ilerlemeden bir süper öğe ekleyeceğiz ve js kodunda XMLHttpRequest nesnesiyle birkaç satır ekleyeceğiz.
Ve böylece, html'miz aşağıdakilerle desteklenecektir:
Ve js koduna ekleyin:
İşlev progressHandlingFunction (e) (if (e.lengthComputable) ($ ("ilerleme"). Attr ((değer: e.loaded, maks: e.toplam);))
Xhr: function () (var myXhr = $ .ajaxSettings.xhr (); if (myXhr.upload) (// myXhr.upload.addEventListener ("progress", progressHandlingFunction, false) yüklemesini kontrol edin; // fonksiyon değerlerine transfer ) myXhr'i döndür;)
js kodunun nihai sonucu:
Materyal yayınlama işlevine sahip çoğu web uygulaması, dosyaları sunucuya yüklemek için bir form içerir. Sunucuya dosya yüklemek için standart alanın sorunlu bir şekilde stilize edildiği ve görevlerinize uygun şekilde uyum sağlama fırsatı sağlamadığı kabul edilmelidir, bu ve diğer nedenlerle, basit bir yükleme alanının kullanılması kesinlikle bir şeydir. geçmiş.
Bugün hakkında konuşalım. Bugün, daha rahat görüntü yükleme için, sayfayı yeniden yüklemeden görüntüleri sunucuya yüklemenizi sağlayan Ajax teknolojisi giderek daha fazla kullanılmaktadır. Ek olarak, bu teknolojinin yardımıyla, örneğin çeşitli görsel editörler gibi web uygulamalarının arayüzü ile sunucuya dosya yükleme işlevselliğini daha esnek bir şekilde entegre etmek mümkün hale geldi.
Standart sunucu dosya yükleyicisine layık bir alternatiftir. Birkaç komut düğmesi içeren basit, sezgisel menü. Yüklenecek bir dizi dosya seçmenizi sağlar, seçilen dosyalar indirme kuyruğu listesinde sıralanır, bu formda görsel olarak gösterilir. İndirme işlemine animasyonlu bir ilerleme çubuğu eşlik eder. Yükleyici, CSS ve XHTML kullanılarak isteğe bağlı olarak biçimlendirilebilir. Eklenti MooTools kitaplığını kullanır ve tüm modern tarayıcılarda çalışır.
- jQuery'de uygulanan önceki dosya yükleyici kadar iyi. Eklenti, hem tekli hem de çoklu dosya yüklemeleri için yapılandırılabilir. İndirmek için seçilen dosyalar bir liste halinde düzenlenir. İndirilebilir her dosya için animasyonlu bir dosya indirme ilerleme çubuğu görüntülenir. Arayüz basit ve göze batmayan, minimum komut düğmeleri. Çalışmak için flash desteği de gereklidir. Bir projeye entegrasyon oldukça basittir. GPL ve MIT lisansı altında dağıtılan bu, eklentinin ticari ürünler için de kullanılabileceği anlamına gelir.
Valum'un AJAX Dosya Yükleyicisi v2.0
Valum'un AJAX Dosya Yükleyicisi- Sunucuya basit ama kullanışlı dosya yükleyicilerinden bir diğeri. Daha önce bu ürünü kullanmak zorunda kalan herkes projenin yaşamaya devam ettiğini fark edecektir. Zaten şimdi ikinci versiyon, bir dereceye kadar değiştirildi. Oldukça basit bir arayüz, önceki yükleyicilerde olduğu gibi dosyaları indirirken, indirme ilerleme durumunun görsel bir göstergesi eşlik eder. Tüm modern tarayıcılarda çalışır ve çalışması için ek kitaplıklar gerektirmez.
jQuery Kullanarak AJAX Çoklu Dosya Yükleme Formu
Yükleyici, WebDeveloper + geliştiricileri tarafından oluşturuldu, görünüşe göre ayrı bir proje olarak planlanmadı, adı banal. Ancak bu kötü olduğu anlamına gelmez, en az yukarıda bahsedilen eklentiler kadar faydalı olabilir. Arayüz basittir, sunucuya yüklemek için bir dizi dosya seçebileceğiniz tek bir düğme. Resimlerin küçük resimleri yükleme sırasında gösterilir. Geliştirici blogu, uygulamanın bir açıklamasına sahiptir. Eklenti ayrıca jQuery kitaplığının çalışmasını gerektirir.
- sunucuya dosya yüklemek için eklenti. Eklenti, çalışmak için JQuery kitaplığını kullanır. Sitenin demo sayfası, belirli durumlarda kullanılabilecek eklentinin görünümünü ayarlama seçeneklerini açıklar. Yükleme formunun bir yükleme ilerleme göstergesi vardır, tamamlanma yüzdesi de gösterilir - önceki eklentilerde bununla ilgili eklemedim, bazılarında da mevcut. Görsel olarak, her şey uygun ve basittir. Tarz oluşturulduğunda, projenizin arayüzüne güzel bir şekilde uyabilir.
jQuery kullanılarak uygulanan dosya yükleme eklentisi. Kullanıcının birkaç dosyayı ayrı ayrı seçmesi gerekecek, ardından dosyaları indirmeye başlamak için düğmeye basacaktır. Dosyaların indirilmesine, indirme hızını, indirilen hacmi ve kalan süreyi gösteren bir gösterge eşlik eder.
Bu, AJAX teknolojisini kullanarak dosyaların sunucuya nasıl yükleneceğine dair çok ilginç bir makaledir. Bildiğiniz gibi ajax, sayfaları tarayıcıya yeniden yüklemeden sunucu ile çalışmanıza izin veren asenkron bir javascripttir. Bu teknoloji, fikrimizin uygulanması için çok kullanışlıdır: tarayıcı sayfalarını yeniden yüklemeden dosyaları sunucuya yükleyin. Fikrimiz başka şekillerde de uygulanabilir, tüm bunları aşağıdaki makalemizde okuyun.
Bugün ne öğreneceğiz?
AJAX + jQuery + PHP ile sunucuya dosya yükleme
AJAX kullanarak sunucuya dosya yüklemeyi uygulamak, yalnızca bir POST veya GET isteği göndermekten biraz daha karmaşıktır. Ancak bu tekniği anlamak ve ustalaşmak o kadar zor değil. AJAX ve PHP'nin nasıl etkileşime girdiğini hala tam olarak anlamadıysanız, makaleyi okumanızı tavsiye ederim. Ancak, AJAX teknolojisinin nasıl çalıştığını bilmiyor olsanız bile, jQuery kütüphanesini ve eklentisini kullanacağımız için bu çok da önemli değil. ajax_upload... Tüm örnekleri ve talimatları adım adım takip ederseniz, sunucuya harika bir dosya yükleyici uygulayabilirsiniz.
Yöntemin özü: Yükleyicinin aşağıdakileri içeren bir HTML görüntüsü oluşturacağız: bir dosya giriş alanı, bir onay düğmesi, bir indirme durum bloğu ("yüklendi" veya "hata" görüntülenir), bir ul listesi (yeni DOM öğeleri eklenecek) , başka bir deyişle, bu yüklenen dosyaların bir listesidir ). Gönder düğmesi için jQuery sözdizimini kullanarak bir JS işleyicisi oluşturacağız ve dosyayı ajax_upload eklentisine ileteceğiz, bu da dosyayı ve gerekli tüm verileri sunucu tarafına gönderecek. Sunucu tarafı, dosyayı istenilen klasöre kaydedecek ve çalışma sonucunu döndürecek olan PHP uygulamamızdır. Veya bir şeyler ters giderse basitçe bir hata mesajı döndürür. Bir görevin var, başlayalım mı?
HTML Koduajax indiricisi
Dosya yükleyicimizin iskeletini içeren bir HTML dosyası oluşturalım. HTML kodunu vereceğim, sonra ne ve ne olduğunu açıklayacağım.
Gördüğünüz gibi, yükleyicinin HTML ajax'ı dayanılmaz derecede karmaşıktır. Ama yine de neyi ve neyi açıklığa kavuşturmaya değer:
< divkimlik = "yükle ">YüklemekDosyaböl>- bu, dosyanın sunucuya yüklenmesini onaylamak için bizim düğmemizdir. Aşağıda CSS düzeni kodudur.
< açıklıkkimlik = "durum ">açıklık>- Bu, uygulamanın sunucu tarafından yanıtı yerleştireceğimiz bloktur. Ya Yüklendi ya da Hata.
< ulkimlik = "dosyalar ">ul> jquery + ajax yükleyicimiz tarafından sunucuya yüklenen dosyaların listesidir.
Söz verdiğim gibi, dosya yükleme onay butonları için CSS stil kodunu aşağıda vereceğim:
#upload (kenar boşluğu: 30px 200px; dolgu: 15px; yazı tipi ağırlığı: kalın; yazı tipi boyutu: 1.3em; yazı tipi ailesi: Arial, Helvetica, sans-serif; metin hizalama: merkez; arka plan: # f2f2f2; renk: # 3366cc; border: 1px katı #ccc; genişlik: 150px; imleç: işaretçi! Önemli; -moz-border-radius: 5px; -webkit-border-radius: 5px;)
sunucuPHP uygulama tarafı
Yöntemin özünde bahsedildiği gibi, sunucu tarafı sadece dosyayı kopyalar (kaydeder) ve çalışmasının sonucunu döndürür ("Yüklendi" veya "Hata"). Ancak bu sadece güvenilmemesi gereken bir örnektir. Bilgisayar korsanlarına karşı koruma yoktur ve dosya boyutu sınırı belirlenmemiştir. Genel kullanım için bir önyükleyici oluşturacaksanız, yukarıdaki eklemeleri uyguladığınızdan emin olun. Örnek dosya yükleyicinin PHP kodu aşağıdadır, adında bir dosya oluşturun. yüklemek-dosya.php ve içine aşağıdaki kodu koyun:
Yakından bakarsanız, buradaki her şeyin Rusça metinle yazıldığını veya daha doğrusu:
$ uploaddir- dosyaların yükleneceği sunucudaki dizin.
$ dosya- sunucu dizinine giden yolun eklendiği yüklenen dosyanın adı.
En basit şey zaten yapıldı. Eğlenceli kısım önde - dosya yükleyicinin jQuery + AJAX tarafı.
JavaScript kodu
JS kullanan herhangi bir uygulamada olduğu gibi, kod belgenin başına yerleştirilmelidir. Bir diğer önemli not: Bu JS kodunu yazmadan önce kütüphaneyi önceden eklemeyi unutmayınız. jQuery ve eklenti ajax_yüklemek... Bunu zaten yaptıysanız, harika, hadi kodlamaya başlayalım:
$ (function () (var btnUpload = $ ("# upload"); var status = $ ("# status"); new AjaxUpload (btnUpload, (eylem: "upload-file.php", // Dosyanın adı) giriş alanı adı: "uploadfile", onSubmit: function (file, ext) (if (! (ext && / ^ (jpg | png | jpeg | gif) $ /. test (ext))) (// Dosya uzantılarının durumunu doğrula .text (Yalnızca JPG, PNG, GIF dosyaları "); false döndür;) status.text ("Yükleniyor ... ");), onComplete: function (dosya, yanıt) (// Durum metnini temizle status.text ( " "); // Yüklenen dosyaları if (response === "success") ($ (""). AppendTo ("# dosyalar"). Html ("
"+ dosya) .addClass (" başarı ");) else ($ (" "). appendTo (" # dosyalar "). metin (dosya) .addClass ("hata ");))));));
İlk olarak, indirme onay düğmesine erişimi başlatıyoruz ve değişkene yazıyoruz. btnYükle... Aynı zamanda, sunucu mesajları bloğuna erişiyoruz ( durum). Sonra eklenti ile çalışma geliyor ajaxyüklemek... Yeni bir nesne oluşturuyoruz ve ihtiyacımız olan parametreleri belirliyoruz:
Eylem- yüklenen dosyalar için sunucu işleyicimizin yolu.
İsim- bu, sunucuya yüklenen dosyayı alacağımız giriş alanının adıdır.
onSubmit- Dosyaları sunucuya ajax yüklemeden önce yürütülen işlevler. Bizim durumumuzda bu, yüklenen dosyaların doğrulanmasıdır (desteklenen uzantıların kontrol edilmesi). Ama yine de, kontrol, "donuk zekalı" için dedikleri gibi, bu kontrolün atlanması kolaydır, bu nedenle uygulamanın sunucu tarafında tekrar kontrol etmeye değer.
durum.Metin- ajax'ın dosyaları sunucuya yükleme sürecinde görüntülenen metin. Dosyalar desteklenmiyorsa bir hata mesajı görüntüleneceğini unutmayın.
onComplete- Dosyanın sunucuya yüklenmesi tamamlandıktan sonra işlevi başlatıyoruz. Bu işlevde: status.text değerini temizleyin; yüklenen dosyaları sayfaya ekle Dosyalar.
Gördüğünüz gibi, AJAX kullanarak sunucuya dosya yüklemek göründüğünden daha kolay. Ama yine de, bu yöntemde jQuery kitaplığının varlığı ile kafam karıştı. Ve jQuery kullanmadan ajax dosyası yüklemeyi nasıl uygulayacağınızı biliyorsanız, lütfen makalenin yorumlarında bildirin.
AJAX, jQuery, PHP kullanarak sunucuya birden fazla dosya yükleme
Kişisel ihtiyaçlarınız için, AJAX ve PHP kullanarak sunucuya birkaç dosyanın güzel bir yüklemesini yapmanız gerekiyorsa, o zaman jQuery kitaplığına bazı eklemeler yapmanız gerekecektir. Yani:
jQuery Form Eklentisi v2.18
Alanlar ve formlarla doğru ajax çalışması için eklenti.
Nereden alınır: www.malsup.com/jquery/form/
jQuery BlockUI Eklentisi v2.14
Güzel hata mesajları görüntülemenizi sağlayan eklenti.
Nereden alınır: www.malsup.com/jquery/block/
jQuery Çoklu Dosya Yükleme Eklentisi v1.31
Aynı anda birden fazla dosya yüklemenize izin veren jQuery kitaplığı için bir eklenti.
Nereden alınır: www.fyneworks.com/jquery/multiple-file-upload/
Tüm bu eklentileri ve tabii ki jQuery kütüphanesini zaten indirdiyseniz, geliştirmeye başlayabiliriz. Ayrıca bir önceki örnekte olduğu gibi sunucu tarafında veriyi işleyecek bir PHP dosyası oluşturmamız gerekiyor. Diyelim ki: doajaxfileupload.php... Şimdi, daha ayrıntılı olarak.
jQuery Form Eklentisi Harika bir eklentidir, ajax yöntemini kullanarak sunucuya dosya göndermek için kullanılır. Bu eklentinin başka kullanımları da var.
jQuery BlockUI Eklentisi- estetik amaçlı, eklentinin doğruluğu hakkında güzel mesajlar göstermek için kullanılır çokluDosyaYüklemekEklenti.
çokluDosyaYüklemekEklenti- bu eklenti, çoklu dosya yükleyicimizin temelidir. Birden fazla dosya seçmenizi sağlar. Aynı zamanda, dosya türlerini sınırlamak, yüklenen dosya sayısını ayarlamak, dosyayı kopyalar için kontrol etmek (eğer böyle bir dosya zaten seçilmişse) vb. için esnek ayarlara sahiptir.
Artık ihtiyacımız olan her şeye sahip olduğumuza göre, birden fazla dosya yüklemek için bir ajax betiği geliştirmeye başlayabiliriz.
index.php dosyasında her şeyin açık olduğunu düşünüyorum. Burası, dosya yükleme formunun bulunduğu ve jQuery kitaplığının ve ajax ile çalışmak için gerekli tüm eklentilerin bağlandığı yerdir. Kod ve eklenti yapılandırması hakkında birkaç kelime:
$ (". Çoklu Dosya"). Çoklu Dosya ((kabul: "jpg | gif | bmp | png | rar", maks: 15, STRING: (kaldır: "kaldır", seçili: "Seçili: $ dosya", reddedildi: " Yanlış dosya türü: $ ext! ", Çoğalt:" Bu dosya zaten seçili: \ n $ dosya! ")));
Yükleme için izin verilen dosya uzantılarını belirtin, yüklenen maksimum dosya sayısını belirtin.
$ ("# yükleniyor").ajaxStart (işlev () (((...));
Ajax sunucuya dosya yüklediğinde animasyonu gösterir ve kaldırır.
$ ("# uploadForm").ajaxForm ((...));
Sunucuya dosya göndermekten sorumludur.
doajaxfileupload.php- Bu, uygulamanın sunucu tarafımızdır, içinde her şey yeterince açıktır, ihtiyacınız varsa, zevkinize göre düzenleyebilirsiniz.
Belki de hepsi AJAX, jQuery ve PHP kullanarak sunucuya birden fazla dosya yüklemekle ilgilidir. Umarım her şey benim için olduğu kadar sizin için de işe yarar.
Dosyaları JS + IFRAME + PHP'ye yükleme
Güzelliğin değil, kodun işlevselliğinin ve kompaktlığının hayranıysanız, o zaman sizin için iyi haberler var. Sayfayı yeniden yüklemeden sunucuya dosya yüklemek sadece AJAX ve her türlü jQuery eklentisi yardımıyla mümkün değildir. Ayrıca bu, düz JavaScript, iframe (çerçeveler) ve php (her zaman gereklidir) ile yapılabilir. Mesele şu ki, AJAX'ta dosya yüklemelerini uygulamak imkansız. XmlHttpTalebi dosyaları yükleyemiyor. Bununla birlikte, bu atlatılabilir. Teknolojinin yardımıyla Uzaktan Komut Dosyası Oluşturma... Özellikle, kullanarak IFRAME... İşin ilginç yanı, formu normal dosya yüklemede olduğu gibi sadece belirteceğimiz formda oluşturacağız. hedef = "rFrame", yeniden yüklenecek ancak görsel olarak görüntülenmeyecek gizli bir iframe'e bakın. Yeniden yükledikten sonra, uygulamanın sunucu php tarafından dosya yüklemesini tamamlayacak bir JS işlev çağrısı döndürülecektir.
Bu indirici basittir, iki dosyadan oluşur ve yaklaşık 1 KB ağırlığındadır. Konuya gel. HTML dosyanızı oluşturun ve kodu buraya koyun:
Burada, dosyaları sunucuya yüklerken olduğu gibi hemen hemen aynı bileşenleri görüyoruz, yalnızca: hedef = "rÇerçeve"- yukarıda bahsettiğimiz; işlev onResponse- sunucu tarafından gönderdiğimiz JSON nesnesini alır. Ayrıca, eklemeyi unutmayın çok parçalı /biçim-veri, bu olmadan, form dosya yüklemeyecektir. Ardından, dosyanın sunucu koduna bakalım işleyici.php:
window.parent.onResponse("".$obj.""); ";) $ dir =" / uploads "; // sunucudaki yükleme dizininin yolu $ name = basename ($ _ FILES [" loadfile "] [" name "]); $ file = $ dir. $ name; $ başarı = move_uploaded_file ($ _ FILES ["loadfile"] ["tmp_name"], $ file); jsOnResponse ("(" dosya adı ":" ". $ adı." "," başarı ":" ". $ başarı. " ")" );?>
Uygulamanın sunucu tarafı, iframe yeniden yüklendikten sonra yürütülecek javascript kodunun çıktısı dışında bu makalenin ilk örneğine benzer ve dosya indirmenin sonucu hakkında bizi bilgilendirecektir.
Çok basit ve ilginç bir senaryo. Elbette geliştirebilirsiniz.
Taramalı Atomik Kuvvet Mikroskobu Laboratuvar raporu şunları içermelidir:
Havai iletişim ağı desteklerinin raflarının seçimi
AC katener tasarımı ve hesaplanması
Mikroişlemci sistemlerinin geliştirilmesi Mikroişlemci sistemlerinin tasarım aşamaları
mcs51 ailesinin mikrodenetleyicileri