Question

に結果を示しています。

<form enctype="multipart/form-data" id="sql" action="./sql_parse.php" method="post"> 
    <input class='form-control' name="da_text"><br> 
    <input type='file' name='fileToUpload' id='fileToUpload'> 
</form> 

とjQuery：

$("#BTsubmit").click(function() { 
    $.post("./sql_parse.php", $("#sql").serialize(), function (data) { 
     $('#affiche_resultat').html(data); 
    }); 
}); 

私は希望をJqueryでフォームのテキストとファイルを送信し、その結果を部門#affiche_resultatに表示するようにします。ファイルがPOSTリクエストに含まれていないので、私はそれを使うことができず、PHPは私にエラーを与えます。あなたはXHRを通じてそれを行うことができます

Answer 1

、すなわち

$(':file').change(function(){ 
     var file = this.files[0]; 
     name = file.name; 
     size = file.size; 
     type = file.type; 

     if(file.name.length < 1) { 
     } 
     else if(file.size > 100000) { 
      alert("The file is too big"); 
     } 
     else if(file.type != 'image/png' && file.type != 'image/jpg' && file.type != 'image/gif' && file.type != 'image/jpeg') { 
      alert("The file does not match png, jpg or gif"); 
     } 
     else { 
      $(':submit').click(function(){ 
       var formData = new FormData($('*formId*')[0]); 
       $.ajax({ 
        url: './sql_parse.php', //server script to process data 
        type: 'POST', 
        xhr: function() { // custom xhr 
         myXhr = $.ajaxSettings.xhr(); 
         if(myXhr.upload){ // if upload property exists 
          myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // progressbar 
         } 
         return myXhr; 
        }, 
        // Ajax events 
        success: completeHandler = function(data) { 
         /* 
         * Workaround for Chrome browser // Delete the fake path 
         */ 
         if(navigator.userAgent.indexOf('Chrome')) { 
          var catchFile = $(":file").val().replace(/C:\\fakepath\\/i, ''); 
         } 
         else { 
          var catchFile = $(":file").val(); 
         } 
         $('#affiche_resultat').html(data); 
        }, 
        error: errorHandler = function() { 
         alert("Something went wrong!"); 
        }, 
        // Form data 
        data: formData, 
        // Options to tell jQuery not to process data or worry about the content-type 
        cache: false, 
        contentType: false, 
        processData: false 
       }, 'json'); 
      }); 
     } 
    });