AJAX image upload
Ik wil een eigen imageupload schrijven. Eentje die niet de pagina ververst, maar eentje met AJAX, met Javascript. Ik heb een beetje gezocht naar Formdata etc. maar ik kom er maar niet uit. Iemand een leuke tutorial of een heel simpel stukje script?
Geen java, geen plugins; ... gewoon javascript in HTML5.
Even zoeken of ik een demo klaar heb
Met deze PHP-code is het wel degelijk mogelijk om een image te uploaden.
Benodigdheden (allemaal in de zelfde map steken):
"index.php"
"upload.php"
"files" (directory, op 777 zetten tijdens het testen)
werking:
De client sleept foto's in een drop-area; javascript genereert een preview (op zich al vrij cool)
De client drukt op de knop.
De foto's worden geüploadet, maar aan de pagina merk je daar voorlopig niets van (wegens code niet klaar).
Je vindt ze wel in de map files\
Kijk zeker ook naar de links die ik in het commentaar zet.
upload.php (merk op dat extra controle hier gewenst is)
Code (php)
1
2
3
2
3
<?php
move_uploaded_file ( $_FILES['file']['tmp_name'] , 'files/' . $_FILES['file']['name'] );
?>
move_uploaded_file ( $_FILES['file']['tmp_name'] , 'files/' . $_FILES['file']['name'] );
?>
index.php
Code (php)
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<style>
#drop_files{
width: 200px;
height: 200px;
border: 1px solid #000;
}
#preview{
width: 300px;
height: 600px;
border: 1px solid #000;
overflow: auto;
background-color: #101010;
}
#preview li{
height: 110px;
width: 140px;
/*float: left;*/
list-style: none;
border: 1px solid #999999;
margin: 5px;
background-color: #030303;
color: #ff6666;
}
#preview img{
max-height: 110px;
max-width: 110px;
}
#preview .close{
float: right;
}
</style>
<div id="drop_files"> Drag and drop image files here </div>
<input type="button" value="upload" id="upload_button">
<ul id="preview"></ul>
<script>
/**
* Upload file
* @see http://stackoverflow.com/questions/4856917/jquery-upload-progress-and-ajax-file-upload
*/
function upload(file, index) {
var url = 'upload.php';
//var file = this.files[0];
var xhr = new XMLHttpRequest();
xhr.file = file; // not necessary if you create scopes like this
xhr.addEventListener('progress', function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
console.log('xhr progress: ' + (Math.floor(done/total*1000)/10) + '%');
}, false);
if ( xhr.upload ) {
xhr.upload.onprogress = function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
console.log('xhr.upload progress: ' + done + ' / ' + total + ' = ' + (Math.floor(done/total*1000)/10) + '%');
};
}
xhr.onreadystatechange = function(e) {
if ( 4 == this.readyState ) {
console.log(['xhr upload complete', e]);
}
};
xhr.open('post', url, true);
// Form data. To give image a name.
var fd = new FormData;
fd.append('file', file);
//fd.append('photo2', file2);
//fd.append('index', index);
xhr.send(fd);
}
/**
* preview image
* @see http://stackoverflow.com/questions/16861744/preview-an-image-before-it-is-uploaded-hide-broken-img
*/
function preview(files) {
$('#drop_files').html(files.toString());
if (files && files[0]) {
for(var i=0; i<files.length; i++) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview').append('<li><span class="close">X</span><img src="' + e.target.result + '"></li>');
}
reader.readAsDataURL(files[i]);
}
}
//upload(files[0], 0);
}
/**
* Drag drop file
* @see http://stackoverflow.com/questions/9544977/using-jquery-on-for-drop-events-when-uploading-files-from-the-desktop
*/
function drag_drop_files(e) {
//
$('#drop_files').on(
'dragover',
function(e) {
e.preventDefault();
e.stopPropagation();
}
)
$('#drop_files').on(
'dragenter',
function(e) {
e.preventDefault();
e.stopPropagation();
}
)
$('#drop_files').on(
'drop',
function(e) {
if(e.originalEvent.dataTransfer) {
if(e.originalEvent.dataTransfer.files.length) {
e.preventDefault();
e.stopPropagation();
// copy file data to the uploadWidget
// uploadWidget.files.push(e.originalEvent.dataTransfer.files.FileList);
uploadWidget.files.push(e.originalEvent.dataTransfer.files);
/*UPLOAD or PROCESS FILES HERE*/
preview(e.originalEvent.dataTransfer.files);
// refresh sortable
$("#preview").sortable('refresh').disableSelection();
}
}
}
);
}
var uploadWidget = new Object();
uploadWidget.files = new Array();
$(document).ready(function() {
drag_drop_files(null);
$("#preview").sortable({
update: function() {
// voorlopig doen we hier niets
}
});
$('#upload_button').click(function(e) {
for(var i=0; i<uploadWidget.files[0].length; i++) {
upload(uploadWidget.files[0][i], i);
}
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<style>
#drop_files{
width: 200px;
height: 200px;
border: 1px solid #000;
}
#preview{
width: 300px;
height: 600px;
border: 1px solid #000;
overflow: auto;
background-color: #101010;
}
#preview li{
height: 110px;
width: 140px;
/*float: left;*/
list-style: none;
border: 1px solid #999999;
margin: 5px;
background-color: #030303;
color: #ff6666;
}
#preview img{
max-height: 110px;
max-width: 110px;
}
#preview .close{
float: right;
}
</style>
<div id="drop_files"> Drag and drop image files here </div>
<input type="button" value="upload" id="upload_button">
<ul id="preview"></ul>
<script>
/**
* Upload file
* @see http://stackoverflow.com/questions/4856917/jquery-upload-progress-and-ajax-file-upload
*/
function upload(file, index) {
var url = 'upload.php';
//var file = this.files[0];
var xhr = new XMLHttpRequest();
xhr.file = file; // not necessary if you create scopes like this
xhr.addEventListener('progress', function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
console.log('xhr progress: ' + (Math.floor(done/total*1000)/10) + '%');
}, false);
if ( xhr.upload ) {
xhr.upload.onprogress = function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
console.log('xhr.upload progress: ' + done + ' / ' + total + ' = ' + (Math.floor(done/total*1000)/10) + '%');
};
}
xhr.onreadystatechange = function(e) {
if ( 4 == this.readyState ) {
console.log(['xhr upload complete', e]);
}
};
xhr.open('post', url, true);
// Form data. To give image a name.
var fd = new FormData;
fd.append('file', file);
//fd.append('photo2', file2);
//fd.append('index', index);
xhr.send(fd);
}
/**
* preview image
* @see http://stackoverflow.com/questions/16861744/preview-an-image-before-it-is-uploaded-hide-broken-img
*/
function preview(files) {
$('#drop_files').html(files.toString());
if (files && files[0]) {
for(var i=0; i<files.length; i++) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview').append('<li><span class="close">X</span><img src="' + e.target.result + '"></li>');
}
reader.readAsDataURL(files[i]);
}
}
//upload(files[0], 0);
}
/**
* Drag drop file
* @see http://stackoverflow.com/questions/9544977/using-jquery-on-for-drop-events-when-uploading-files-from-the-desktop
*/
function drag_drop_files(e) {
//
$('#drop_files').on(
'dragover',
function(e) {
e.preventDefault();
e.stopPropagation();
}
)
$('#drop_files').on(
'dragenter',
function(e) {
e.preventDefault();
e.stopPropagation();
}
)
$('#drop_files').on(
'drop',
function(e) {
if(e.originalEvent.dataTransfer) {
if(e.originalEvent.dataTransfer.files.length) {
e.preventDefault();
e.stopPropagation();
// copy file data to the uploadWidget
// uploadWidget.files.push(e.originalEvent.dataTransfer.files.FileList);
uploadWidget.files.push(e.originalEvent.dataTransfer.files);
/*UPLOAD or PROCESS FILES HERE*/
preview(e.originalEvent.dataTransfer.files);
// refresh sortable
$("#preview").sortable('refresh').disableSelection();
}
}
}
);
}
var uploadWidget = new Object();
uploadWidget.files = new Array();
$(document).ready(function() {
drag_drop_files(null);
$("#preview").sortable({
update: function() {
// voorlopig doen we hier niets
}
});
$('#upload_button').click(function(e) {
for(var i=0; i<uploadWidget.files[0].length; i++) {
upload(uploadWidget.files[0][i], i);
}
});
});
</script>
Gewijzigd op 05/11/2013 17:57:26 door Kris Peeters