custom file input na selectie formsubmit probleem

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Innovatieve, nauwkeurige Senior PHP Developer voor

Eind jaren ’90 is dit bedrijf opgericht. Ze hebben zich altijd beziggehouden met het ontwikkelen van software voor overheidsinstanties. Dit zijn instanties waaronder bijvoorbeeld ook onder andere : de belastingdienst, burgerszaken, verschillende bedrijven, notarissen, incassobureau’s en ook nog bewindvoerders. Momenteel tellen ze 20 medewerkers, waarvan 2/3 deel allemaal developers zijn. Doordat ze de enigste aanbieder van dit soort software op de markt zijn, groeien ze erg hard. Door de enorme groei, hebben ze dan ook concrete groeiplannen in het verschiet. Functie-omschrijving Het bedrijf wordt door allerlei instanties ingeschakeld. Tegenwoordig wordt alles digitaal geregeld en gezien de essentie van dit soort

Bekijk vacature »

Daniel van Seggelen

Daniel van Seggelen

06/10/2016 19:56:24
Quote Anchor link
Hi

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)
PHP script in nieuw venster Selecteer het PHP script
1
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>



Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
     $(document).delegate('#newfoto', 'click', function(t){

            $("#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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$(document).on('change', '#newfotoReal', function() {
        $("#imageUploadForm").submit();
    });


Vervolgens word de werkelijke normale submit geannuleerd, zodat je op dezelfde pagina blijft, met ajax word dit zo gedaan:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
$('#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);
                
            }
        });
    }));


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!
Gewijzigd op 06/10/2016 21:10:02 door - Ariën -
 
PHP hulp

PHP hulp

17/12/2018 21:42:07
 
Frank Nietbelangrijk

Frank Nietbelangrijk

07/10/2016 00:30:20
Quote Anchor link
Het antwoord op je vraag weet ik zo even niet, maar ik weet wel dat de events die aan een HTML element hebt hangen verwijderd worden wanneer het element verwijderd wordt. Dit gebeurt doorgaans als je een gedeelte van je HTML vernieuwt met AJAX. Dus komt er met ajax een nieuwe '#newfotoReal' fileupload knop ? zo ja: laat javascript dan ook een nieuw onchange event aan deze knop hangen.

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?
 
Daniel van Seggelen

Daniel van Seggelen

07/10/2016 04:31:42
Quote Anchor link
Beste Frank,

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?
 
Frank Nietbelangrijk

Frank Nietbelangrijk

07/10/2016 11:54:59
Quote Anchor link
Daniel,

Je kunt gewoon controleren of er een bestand geselecteerd is:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
if( document.getElementById("newfotoReal").files.length == 0 ){
    console.log("no files selected");
}


Tevens kun je na de upload de waarde van je file-upload knop weer resetten:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
document.getElementById("newfotoReal").value = "";




Toevoeging op 07/10/2016 12:26:04:

Misschien helpt dit: http://codepen.io/anon/pen/WGrXXx

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
$(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();
    }
  });

});
 
Daniel van Seggelen

Daniel van Seggelen

07/10/2016 14:11:30
Quote Anchor link
Het probleem is precies hetzelde als voorheen, Ik krijg in de codelelog:

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 = "";
}


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)
PHP script in nieuw venster Selecteer het PHP script
1
<?=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="
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.