Bu blogumuzda kodlayacak Yükle Formunu gelen Empresyonist Ul ve Pl upload API'sını kullanarak kodlayacağız. Plupload, yükleme ilerlemesi, resim boyutlandırma ve yığın halinde yüklemeler gibi bazı benzersiz özellikler sağlayan HTML5 Gears, Silverlight, Flash, BrowserPlus veya normal formları kullanarak dosyaları yüklemenizi sağlar. Bu şekilde tüm tarayıcılarla uyumlu çok güçlü bir yükleme formu oluşturabilirsiz.
-css -style.css -img - resimler dosyaları buraya -js -jquery-progressbar.min.js -plupload.full.js -plupload.flash.swf -plupload.silverlight.xap -uploads Yüklenen dosyalar burada -index.html -upload.php
Başlık, kapat düğmesi, metin paragrafı, seçme ve yükleme düğmeleri eklemeliyiz, seçilen dosyaları, ilerleme çubuğunu ve karşıdan yükleme sonrası onay kutusunu ekleyeceğiz.
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
|
< div class = "upload-form" id = "uploader" >
< h1 class = "replace-text" >Upload Form
|
Sonraki düşünmek, yükleme formumuzda kullanacağımız JS komut dosyalarını eklememiz gerektiğini düşünüyoruz. Bu yüzden, jQuery API'sini ekleyerek başlayacağız, kendi sunucunuzda indirebilmeniz ve barındırabilmeniz için Google CDN tarafından barındırılan bir API'yi kullandık.Sonra "plupload.full.js" ve "jquery-progressbar.min.js" dosyasını eklemelisiniz . Tüm bu komut dosyalarını sayfanıza ekleyin.
1
2
3
4
5
6
7
8
9
10
11
12
|
< meta charset = "utf-8" > < title >Upload Form Tutorial - by Valeriu Timbuc for Design Modo
|
Bu adımda yükleme formu işlevselliğini ekleyeceğiz. Bu kod olmadan çalışmaz.
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
// Upload Form $( function () { // Settings //////////////////////////////////////////////// var uploader = new plupload.Uploader({ runtimes : 'html5,flash,silverlight' , // Set runtimes, here it will use HTML5, if not supported will use flash, etc. browse_button : 'pickfiles' , // The id on the select files button multi_selection: false , // Allow to select one file each time container : 'uploader' , // The id of the upload form container max_file_size : '100kb' , // Maximum file size allowed url : 'upload.php' , // The url to the upload.php file flash_swf_url : 'js/plupload.flash.swf' , // The url to thye flash file silverlight_xap_url : 'js/plupload.silverlight.xap' , // The url to the silverlight file filters : [ {title : "Image files", extensions : "jpg,gif,png"} ] // Filter the files that will be showed on the select files window }); // Start Upload //////////////////////////////////////////// // When the button with the id "#uploadfiles" is clicked the upload will start $( '#uploadfiles' ).click( function (e) { uploader.start(); e.preventDefault(); }); uploader.init(); // Initializes the Uploader instance and adds internal event listeners. // Selected Files ////////////////////////////////////////// // When the user select a file it wiil append one div with the class "addedFile" and a unique id to the "#filelist" div. // This appended div will contain the file name and a remove button uploader.bind( 'FilesAdded' , function (up, files) { $.each(files, function (i, file) { }); up.refresh(); // Reposition Flash/Silverlight }); // Error Alert ///////////////////////////////////////////// // If an error occurs an alert window will popup with the error code and error message. // Ex: when a user adds a file with now allowed extension uploader.bind( 'Error' , function (up, err) { alert("Error: " + err.code + ", Message: " + err.message + (err.file ? ", File: " + err.file.name : "") + ""); up.refresh(); // Reposition Flash/Silverlight }); // Remove file button ////////////////////////////////////// // On click remove the file from the queue $( 'a.removeFile' ).live( 'click' , function (e) { uploader.removeFile(uploader.getFile( this .id)); $( '#' + this .id).remove(); e.preventDefault(); }); // Progress bar //////////////////////////////////////////// // Add the progress bar when the upload starts // Append the tooltip with the current percentage uploader.bind( 'UploadProgress' , function (up, file) { var progressBarValue = up.total.percent; $( '#progressbar' ).fadeIn().progressbar({ value: progressBarValue }); $( '#progressbar .ui-progressbar-value' ).html( '' + up.total.percent + '%' ); }); // Close window after upload /////////////////////////////// // If checkbox is checked when the upload is complete it will close the window uploader.bind( 'UploadComplete' , function () { if ($( '.upload-form #checkbox' ).attr( 'checked' )) { $( '.upload-form' ).fadeOut( 'slow' ); } }); // Close window //////////////////////////////////////////// // When the close button is clicked close the window $( '.upload-form .close' ).on( 'click' , function (e) { $( '.upload-form' ).fadeOut( 'slow' ); e.preventDefault(); }); }); // end of the upload form configuration
|
Şimdi formumuzu şekillendirmeye başlayacağız. Önce, kullanacağımız öğelere sıfırlama stilleri ekleyeceğiz. Ardından, form konteynerine stil vereceğiz. Üstte bir arka plan deseni ve bir CSS3 degrade ekleyin; genişliği 200 piksele ayarlayın (toplam 250 piksel paddings yüzünden), minimum yüksekliği 180 piksele ayarlayın (toplamda 270 piksel olacak şekilde) , minimum yüklemeniz gerekir, çünkü yüklenecek dosyaları eklediğinde kutunun daha büyük olması gerekecek ve yuvarlak köşeleri ekleyin.
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
|
/* Reset */ .upload-form, .upload-form div, .upload-form span, .upload-form input, .upload-form a, .upload-form h 1 , .upload-form p { margin : 0 ; padding : 0 ; border : none ; outline : none ; } /* Form Container */ .upload-form { position : relative ; z-index : 100 ; cursor : default ; width : 200px ; min-height : 180px ; padding : 25px 25px 65px 25px ; -webkit-border-radius: 3px ; -moz-border-radius: 3px ; border-radius: 3px ; background : url (../img/upload-bg.png); background : -webkit-linear-gradient( top , rgba( 255 , 255 , 255 , 0.1 ) 0% , rgba( 0 , 0 , 0 , 0.1 ) 100% ), url (../img/upload-bg.png); background : -moz-linear-gradient( top , rgba( 255 , 255 , 255 , 0.1 ) 0% , rgba( 0 , 0 , 0 , 0.1 ) 100% ), url (../img/upload-bg.png); background : -o-linear-gradient( top , rgba( 255 , 255 , 255 , 0.1 ) 0% , rgba( 0 , 0 , 0 , 0.1 ) 100% ), url (../img/upload-bg.png); background : -ms-linear-gradient( top , rgba( 255 , 255 , 255 , 0.1 ) 0% , rgba( 0 , 0 , 0 , 0.1 ) 100% ), url (../img/upload-bg.png); background : linear-gradient( top , rgba( 255 , 255 , 255 , 0.1 ) 0% , rgba( 0 , 0 , 0 , 0.1 ) 100% ), url (../img/upload-bg.png); } /* Clear Floats */ .upload-form .cb { clear : both ; } |
Başlığı stil etmek için yazı tipini, boyutunu, rengini vb. ayarlayacağız. Bu formda, başlık için bir resim bulunuyor, bu nedenle metni yerine koyacak yeni bir sınıf "replace-text"oluşturduk. görüntü olarak, temel olarak metni text-indent özelliğini kullanarak gizleyerek ve görüntüyü bir arka plan olarak ekliyoruz. Kapat düğmesi için genişliği ve yüksekliği ayarlayıp form kapının üzerine yerleştireceğiz. Bitirmek için, metin paragrafına bazı temel tipografi stilleri ekleyeceğiz.
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
|