HTML5 ve PHP ile Yükleme Formu Oluşturma - Lacivert Tanıtım Medya Anonim Şirketi
HTML5 ve PHP ile Yükleme Formu Oluşturma

HTML5 ve PHP ile Yükleme Formu Oluşturma

 

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.

 

Adım 1 - Dosyaların Yapısı

 
 
Dosya yapısı çok basittir. Önce "Plupload API" ve "jQuery UI Progressbar" yazılımını indirmeniz gerekir . Ardından gerekli tüm klasörleri oluşturun ve belirtilen dosyaları ekleyin.
 
  • css - Burada .css dosyalarını ekleyin.
  • img - Buraya resim ekleyin.
  • js - Komut dosyalarını buraya ekleyin.
  • uploads - Burada, yüklenen dosyaları kaydedilecektir.
-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

 

Adım 2 - HTML İşaretleme

 

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 Formh1>
    <a href="#" class="close" title="Close Window"><img src="img/close-button.png" alt="Close">a>
 
    <p>Laos, alongside many of its Southeast Asian neighbours, is well known for producing.p>
 
    
    <div>
        <a class="button" id="pickfiles" href="#">Selecta>
        <a class="button" id="uploadfiles" href="#">Uploada>
    div>
 
    
    <div id="filelist" class="cb">div>
 
    
    <div id="progressbar">div>
 
    
    <div id="closeAfter">
        <span class="checkbox">
            <input type="checkbox" name="checkbox" id="checkbox">
            <label for="checkbox">Close window after uploadlabel>
        span>
    div>
 
div>

 

Adım 3 - Komut dosyası dosyalarını ekleme

 

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 Modotitle>
 
<link rel="stylesheet" href="css/style.css" media="screen">
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">script>
<script src="js/plupload.full.js">script>
<script src="js/jquery-progressbar.min.js">script>
<script>

 

4. Adım - Form Yapılandırmasını Yükle

 

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

 

Adım 5 - Form Sarmalayıcı

 

Ş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 h1,
.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; }

 

 

6. Adım - Başlık ve Kapatma Düğmesi ve Paragraf

 

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