custom file input na selectie formsubmit probleem
Ik heb een eigen knop, die ik gebruik om de verborgen <input type='file'> te triggeren:
Waarom, omdat de default file type knop enorm lelijk is.
De html:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<form id="imageUploadForm" action="<?=HTML_ROOT.'inc/editphotoAjax.php'?>" enctype="multipart/form-data" >
<input type="file" name="plaatje" id="newfotoReal" style="display:none"/>
<input type="hidden" name="actie" value="add"/>
<input type="hidden" name="seo_title" value="<?=$seo_title?>" />
<input type="hidden" name="soort" value="fotoedit"/>
</form>
<input type="file" name="plaatje" id="newfotoReal" style="display:none"/>
<input type="hidden" name="actie" value="add"/>
<input type="hidden" name="seo_title" value="<?=$seo_title?>" />
<input type="hidden" name="soort" value="fotoedit"/>
</form>
Code (php)
1
2
3
4
2
3
4
$(document).delegate('#newfoto', 'click', function(t){
$("#newfotoReal").trigger('click');
})
$("#newfotoReal").trigger('click');
})
Hierboven is de trigger zodat ik een bestand kan selecteren, een plaatje in dit geval.
Vervolgens als het plaatje geselecteerd is gebruik ik:
Code (php)
1
2
3
2
3
$(document).on('change', '#newfotoReal', function() {
$("#imageUploadForm").submit();
});
$("#imageUploadForm").submit();
});
Vervolgens word de werkelijke normale submit geannuleerd, zodat je op dezelfde pagina blijft, met ajax word dit zo gedaan:
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
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
$('#imageUploadForm').on('submit',(function(e) {
e.preventDefault();
var formData = new FormData(this);
$(".loading-div").show();
$.ajax({
type:'POST',
url: $(this).attr('action'),
data:formData,
cache:false,
contentType: false,
processData: false,
success:function(data){
console.log("success");
console.log(data);
if (data!=="")
{
message = '<div style="padding-top: 10px" ><span id="popmessage">'+data+'</span><br><br></div>';
$('.popup').html(message);
$('.overlay').show();
$('.popup').show();
$('.popup').center();
$(window).resize(function(){
$('.popup').center();
});
$(".loading-div").hide();
fotoref();
}
},
error: function(data){
console.log("error");
console.log(data);
}
});
}));
e.preventDefault();
var formData = new FormData(this);
$(".loading-div").show();
$.ajax({
type:'POST',
url: $(this).attr('action'),
data:formData,
cache:false,
contentType: false,
processData: false,
success:function(data){
console.log("success");
console.log(data);
if (data!=="")
{
message = '<div style="padding-top: 10px" ><span id="popmessage">'+data+'</span><br><br></div>';
$('.popup').html(message);
$('.overlay').show();
$('.popup').show();
$('.popup').center();
$(window).resize(function(){
$('.popup').center();
});
$(".loading-div").hide();
fotoref();
}
},
error: function(data){
console.log("error");
console.log(data);
}
});
}));
Dit werkt verder de eerste keer, maar de tweede keer, gaat hij gewoon de normale submit doorvoeren en dan gaat hij ook daadwerkelijk naar:
http://mijndomein.nl/editphotoAjax.php?plaatje=1.jpg&actie=add&titelteksttogether&soort=fotoedit
Hoe kan ik dit altijd laten werken? en niet alleen de eerste keer?
bedankt
Daniek
- Ariën -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Gewijzigd op 06/10/2016 21:10:02 door - Ariën -
Verder valt me op dat je omslachtig te werk gaat. met het onchange event ga je eerst een onclick event afvuren. waarom? je kunt toch toch ook direct direct je ajax request doen?
Nee eerst een onclick event, dan een onchange event, in de onchange wordt het submitten van het formulier gedaan.
De onchange is wanneer je daarwerkelijk een bestand geselecteerd hebt.
Als ik direct na de onclick de ajax afvuur, dan word dit gedaan zonder dat het bestand geselecteerd is.
Of heb je een andere oplossing?
Je kunt gewoon controleren of er een bestand geselecteerd is:
Code (php)
1
2
3
2
3
if( document.getElementById("newfotoReal").files.length == 0 ){
console.log("no files selected");
}
console.log("no files selected");
}
Tevens kun je na de upload de waarde van je file-upload knop weer resetten:
Code (php)
1
document.getElementById("newfotoReal").value = "";
Toevoeging op 07/10/2016 12:26:04:
Misschien helpt dit: http://codepen.io/anon/pen/WGrXXx
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
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
$(function()
{
var uploadButton = document.getElementById("newfotoReal");
// controlle van het bestand voordat je met uploaden begint
function validateFileUpload()
{
if( uploadButton.files.length == 0 )
{
console.log("no file selected");
return false;
}
return true;
}
// daadwerkelijke upload na een geslaagde validatie
function doFilUpload()
{
console.log('upload file now!');
// hier je AJAX fileupload invoegen
// reset de file-upload button
uploadButton.value = "";
}
$(document).on('click', '#newfoto', function() {
$("#newfotoReal").trigger('click');
});
$(document).on('change', '#newfotoReal', function() {
if(validateFileUpload()) {
doFilUpload();
}
});
});
{
var uploadButton = document.getElementById("newfotoReal");
// controlle van het bestand voordat je met uploaden begint
function validateFileUpload()
{
if( uploadButton.files.length == 0 )
{
console.log("no file selected");
return false;
}
return true;
}
// daadwerkelijke upload na een geslaagde validatie
function doFilUpload()
{
console.log('upload file now!');
// hier je AJAX fileupload invoegen
// reset de file-upload button
uploadButton.value = "";
}
$(document).on('click', '#newfoto', function() {
$("#newfotoReal").trigger('click');
});
$(document).on('change', '#newfotoReal', function() {
if(validateFileUpload()) {
doFilUpload();
}
});
});
no file selected
Quote:
function doFilUpload()
{
console.log('upload file now!');
$("#imageUploadForm").submit();
// hier je AJAX fileupload invoegen
// reset de file-upload button
uploadButton.value = "";
}
{
console.log('upload file now!');
$("#imageUploadForm").submit();
// hier je AJAX fileupload invoegen
// reset de file-upload button
uploadButton.value = "";
}
ik heb de submit toegevoegd in do file upload.
Als ik direct de ajax doe, met de form data:
var formData = new FormData($('#imageUploadForm')[0]);
Leuk en aardig, maar er gebeurd niks.
Dus dit is geen oplossing helaas.
Toevoeging op 07/10/2016 14:45:36:
UPDATE<
Ik zie het probleem al. Het formulier:
<form id="imageUploadForm" action="
Code (php)
1
<?=HTML_ROOT.'inc/editphotoAjax.php'?>
<input type="file" name="plaatje" id="newfotoReal" style="display:none"/>
<input type="hidden" name="actie" value="add"/>
<input type="hidden" name="seo_title" value="
Code (php)
1
<?=$seo_title?>
<input type="hidden" name="soort" value="fotoedit"/>
</form>
Die werd ook opnieuw in ajax teruggegeven.
Dat moest ik buiten de ajaxcall laten en dan blijft het werken.