AngularJS Dosya Yükleme( PHP )

DumanInc · 1 Eki 2021

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Eklentili Dosya Yükleyici

1.Adım : Github üzerinden yada uygulamanın bitmiş halinden script dosyalarını HTML sayfamıza dahil ediyoruz. Sayfanın daha düzgün görünmesi için bootstrap css kütüphanesini projeye cdn üzerinden dahil edilmiştir. controller.js dosyasını da oluşturuyoruz.

1
2
3
4
5
6

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

" >
<link rel="stylesheet" href="tasarim.css">
<script src="

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

"></script>
<script src="dist/angular-file-upload.js"></script>

2.Adım: controller.js dosyalarını aşağıdaki şekilde oluşturuyoruz.

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

'use strict';

angular.module('app', ['angularFileUpload'])
.controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) {
var uploader = $scope.uploader = new FileUploader({
url: 'upload.php'
});

// FILTERS

// a sync filter
uploader.filters.push({
name: 'syncFilter',
fn: function(item /*{File|FileLikeObject}*/, options) {
console.log('syncFilter');
return this.queue.length < 10;
}
});

// CALLBACKS

uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function(fileItem) {
console.info('onAfterAddingFile', fileItem);
};
uploader.onAfterAddingAll = function(addedFileItems) {
console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function(item) {
console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function(fileItem, progress) {
console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function(progress) {
console.info('onProgressAll', progress);
};
uploader.onSuccessItem = function(fileItem, response, status, headers) {
console.info('onSuccessItem', fileItem, response, status, headers);
};
uploader.onErrorItem = function(fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function(fileItem, response, status, headers) {
console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function(fileItem, response, status, headers) {
console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function() {
console.info('onCompleteAll');
};

console.info('uploader', uploader);
}]);

3. Adım: controller içinde dosya yükleme için kullanılacak PHP dosyasını aşağıdaki şekilde oluşturuyoruz.( upload.php )

Upload.php dosyasının bulunduğu dizin içinde dosyalar klasörüne yükleme yapılacaktır. Bu nedenle dosyalar klasörünü de oluşturmak gerekiyor.

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

<?php

if ( !empty( $_FILES ) ) {

$tempPath = $_FILES[ 'file' ][ 'tmp_name' ];
$uploadPath = dirname( __FILE__ ) . DIRECTORY_SEPARATOR . 'dosyalar' . DIRECTORY_SEPARATOR . $_FILES[ 'file' ][ 'name' ];

move_uploaded_file( $tempPath, $uploadPath );

$answer = array( 'answer' => 'Yükleme Tamamlandı' );
$json = json_encode( $answer );

echo $json;

} else {

echo 'Dosya Yok';

}

4.Adım: HTML dosyasının body kısmı. container class içinde kullanılan nv-file-drop özelliği ile bulunan gri alan üzerinde dosyalar bırakıldığında dosya yükleyici için dosyaları otomatik olarak bağlamaktadır.

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
80
81
82
83
84
85

<body id="ng-app" ng-app="app">

<div style="background:#dedede" class="container" ng-controller="AppController" nv-file-drop="" uploader="uploader">
<div class="col-md-3">

<h3>Dosyaları Seç</h3>

<div ng-show="uploader.isHTML5">
<div class="well dosya-alan" nv-file-over="" uploader="uploader">
Dosyaları Buraya Sürükleyin
</div>
</div>

Çoklu Dosya Seçme
<input type="file" nv-file-select="" uploader="uploader" multiple /><br>
</div>
<div class="col-md-9" style="margin-bottom: 40px">

<h3>Yüklenecek Dosyalar</h3>
<p>Dosya Sayısı: {{ uploader.queue.length }}</p>

<table class="table">
<thead>
<tr>
<th width="50%">Dosya Adı</th>
<th ng-show="uploader.isHTML5">Dosya Boyutu</th>
<th ng-show="uploader.isHTML5">Süreç</th>
<th>Durum</th>
<th>İşlem</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in uploader.queue">
<td><strong>{{ item.file.name }}</strong></td>
<td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
<td ng-show="uploader.isHTML5">
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
</div>
</td>
<td class="text-center">
<span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
<span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
</td>
<td nowrap>
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span> Yükle
</button>
<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> İptal
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
<span class="glyphicon glyphicon-trash"></span> Vazgeç
</button>
</td>
</tr>
</tbody>
</table>

<div>
<div>
Yükleme Durumu:
<div class="progress" style="">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span> Hepsini Yükle
</button>
<button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Hepsini İptal Et
</button>
<button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
<span class="glyphicon glyphicon-trash"></span> Hepsini Sil
</button>
</div>

</div>
</div>

</body>

En basit hali ile angularjs file uplad örneğini indirip kullanbilirsiniz.

Eklentisiz Dosya Yükleyici

İnternette bulduğum tekli dosya yükleme örneğini çoklu olarak düzenleyip tekrar attım. Bulduğum kaynaktaki örnek çalışmamasına rağmen kodların çoğu yazıldığı için referans olarak sayfanın altında belirttim.

1.Adım: HTML Dosyasını Oluşturulması

1
2
3
4
5
6
7
8
9

<body ng-app="myApp">

<div ng-controller = "myCtrl">
<input type ="file" file-model="dosya" multiple />
<button ng-click = "dosyaYukleyici()">Dosya Yükle</button>
</div>
</body>

2.Adım: Angularjs kütüphanesini dahil etme, diretifleri ve kontroller hazırlama

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

<script src="

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

"></script>
<script>
var myApp = angular.module('myApp', []);

myApp.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;

element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files);
});
});
}
};
}]);

myApp.service('dosyaYukle', ['$http', function ($http) {
this.uploadFileToUrl = function(dosyalar, yuklemeAdres){

/*döngü ile seçilen dosyaları yukleme klasörüne tek tek yüklüyoruz.*/
for (var i in dosyalar)
{
var fdata = new FormData();
fdata.append("file", dosyalar); /*$_FILES['file'] olarak çağrılacak kısım*/
console.log(dosyalar);

$http.post(yuklemeAdres, fdata, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})

.success(function(data){
console.log(data);
})

.error(function(data){
console.log(data);
});
}
}
}]);
//upload.php dosyasını oluşturmayı unutmayın.
myApp.controller('myCtrl', ['$scope', 'dosyaYukle', function($scope, fileUpload){
$scope.dosyaYukleyici = function(){
var file = $scope.dosya;

var yuklemeAdres = "upload.php";
fileUpload.uploadFileToUrl(file, yuklemeAdres);
};
}]);

</script>

3.Adım: Dosya Yükleyicisi olan upload.php sayfasını oluşturma. UNUTMAYIN dosyalar klasörünün upload.php dosyası ile aynı yerde olması gerekiyor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php

if ( !empty( $_FILES ) ) {

$tempPath = $_FILES[ 'file' ][ 'tmp_name' ];
$uploadPath = dirname( __FILE__ ) . DIRECTORY_SEPARATOR . 'dosyalar' . DIRECTORY_SEPARATOR . $_FILES[ 'file' ][ 'name' ];

move_uploaded_file( $tempPath, $uploadPath );

$answer = array( 'answer' => 'Yükleme Tamamlandı' );
$json = json_encode( $answer );

echo $json;

} else {

echo 'Dosya Seçilmedi';

}

AngularJS Dosya Yükleme( PHP )

DumanInc

Eklentili Dosya Yükleyici

Eklentisiz Dosya Yükleyici

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Benzer konular

AngularJS Dosya Yükleme( PHP )

DumanInc

Eklentili Dosya Yükleyici​

Eklentisiz Dosya Yükleyici​

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Benzer konular

Eklentili Dosya Yükleyici

Eklentisiz Dosya Yükleyici