jquery post werkt alleen op hele kleine bestanden?
Ik zit even met een probleem waar ik niet uitkom.
Heb een simpel jquery ajax post script gemaakt om een file te uploaden.
De bedoeling is dat ik aan de serverkant $_FILES kan uitlezen dus dat doen we op deze manier:
form.php
Niets mis mee, simpel, dat werkt.
Maar nu komt het: Als ik een klein bestandje van 27,6 kb upload dan werkt het netjes
in mijn alert box krijg ik deze output:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Array
(
[name] => monitor.jpg
[type] => image/jpeg
[tmp_name] => /tmp/phpcjQIFa
[error] => 0
[size] => 28261
)
(
[name] => monitor.jpg
[type] => image/jpeg
[tmp_name] => /tmp/phpcjQIFa
[error] => 0
[size] => 28261
)
Maar als ik een bestand upload van groter dan 600 kb dan krijg ik mijn alert box niet meer.
Waar gaat dit mis? Mij lijkt het te komen dat ik via ajax post geen grote bestanden kan uploaden.
In Chrome werkt het allemaal wel alleen bij kleine bestanden,
maar niet in firefox, daar krijg ik geen alert terug.
De html code
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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("form#data").submit(function(){
var data = new FormData();
jQuery.each($('#file')[0].files, function(i, file) {
data.append('file-'+i, file);
});
$.ajax({
url: 'form.php',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
});
});
</script>
</head>
<body>
<form id="data" method="post" enctype="multipart/form-data">
<input id="file" name="file" type="file" />
<button>Submit</button>
</form>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("form#data").submit(function(){
var data = new FormData();
jQuery.each($('#file')[0].files, function(i, file) {
data.append('file-'+i, file);
});
$.ajax({
url: 'form.php',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
});
});
</script>
</head>
<body>
<form id="data" method="post" enctype="multipart/form-data">
<input id="file" name="file" type="file" />
<button>Submit</button>
</form>
</body>
</html>
Alvast bedankt voor het meedenken.
Gewijzigd op 01/08/2012 13:05:33 door Bart V B
edit
volgens mij zit ik in de verkeerde hoek te kijken.
het enige wat ik wil is een respons met $_FILES array.
Gewijzigd op 01/08/2012 13:50:56 door Bart V B
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("form#data").submit(function(){
var data = new FormData();
jQuery.each($('#file')[0].files, function(i, file) {
data.append('file-'+i, file);
});
$.ajax({
url: 'form.php',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
return false;
});
});
});
</script>
</head>
<body>
<form id="data" method="post" enctype="multipart/form-data">
<input id="file" name="file" type="file" />
<button>Submit</button>
</form>
</body>
</html>
heb hem getest, werkt gewoon prima, met bestanden van 18 MB zelfs, laden duurt alleen halve minuut ;)
Quote:
heb hem getest, werkt gewoon prima, met bestanden van 18 MB zelfs, laden duurt alleen halve minuut ;)
Nah, dat is te lang.
Heb al wat anders gevonden waarmee ik verder kan.
Het enige wat is wilde bereiken is dat ik file size wilde hebben zodat ik daarmee een progressbar kan laten lopen. :)
voor de liefhebbers onder ons hier de uiteindelijke oplossing:
(nog niet met progresbar maar toch)
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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('input[type="file"]').change(function(){
var file = this.files[0];
$("#test").append('Filename : ' + file.name + '<br />Filesize : ' + file.size);
});
});
</script>
</head>
<body>
<input type="file" multiple="multiple" name="uploadedfile[]" />
<div id="test"></div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('input[type="file"]').change(function(){
var file = this.files[0];
$("#test").append('Filename : ' + file.name + '<br />Filesize : ' + file.size);
});
});
</script>
</head>
<body>
<input type="file" multiple="multiple" name="uploadedfile[]" />
<div id="test"></div>
</body>
</html>
Kan hem alleen niet in IE testen, dus als iemand even zo lief wil zijn om dat te doen graag. ;)
Gewijzigd op 02/08/2012 02:40:21 door Bart V B
Op Opera werkt het redelijk snel (1 sec)... op IE doet ie helemaal niets.
Rare is wel:
Als ik meer bestanden selecteer (dat kan door de MULTIPLE), dan geeft hij alleen de informatie van het eerste bestand.
En als ik dan een ander bestand selecteer, blijft het 'vorige' bestand ook staan.
Dat heb je met append().
Gewijzigd op 02/08/2012 11:02:31 door Eddy E