JQuery AJAXファイルのアップロードレスポンステキストが表示されない

Question

ファイルのアップロード用にjQuery/AJAXスクリプトを作成しましたが、PHPでアップロードを処理しています。プログレスバーとバリデーションで完璧に動作します。 1つの問題があり、私はPHPで設定した任意の応答テキストを取得し、json_encode();を使用してエンコードされますが、任意の応答を得ることはありません、代わりにこれを取得することはできません。

<div class="upload-div"> 
     <form method="post" enctype="multipart/form-data" class="upload_form" > 
     <label for="file" id="file_label" class="file-label"><i class="fa fa-plus"></i> إضافة صور<input type="file" name="files[]" id="file" multiple="" accept="image/*" /></label> 
     <input type="submit" id="upload_files" name="submitUpload" value="رفع الصور" /> 
     </form> 
     <div class="progress"> 
     <div class="bar"></div> 
     </div> 
     <div class="status-message"></div> 
     <div class="images-previews"></div> 
     <div id="next_step"></div> 
    <span class="submit-buttons"> 
    <a href="form" class="url-color"><i class="fa fa-arrow-right"></i> الرجوع</a> 
    <form method="post"><input type="submit" name="submitNoPics" value="التقدم بدون صورة" /></form> 
    </span> 
    </div> 

    <script src="js/upload.js"></script> 
    <script src="js/jquery.form.min.js"></script> 

    {"message":"Successfully uploaded 1 files!"} 

をあなたがメッセージを見ることができるようにI表示したいコードは最後の行にありますが、単独では表示されません。これはHTML文書全体で表示されます。私はAjaxを初めて使用しており、苦労しているので、下のHTMLとPHPのコードを掲載します。できるだけ早くやりたいだけでなく、実際にどうやってこれがうまくいかないのかを実際に理解したいからです。ありがとうございました。

PHP：

<?php 
    //file upload 

    $extensions = array('jpeg', 'jpg', 'png', 'gif'); 
    $dir = 'user-uploads/'; 
    $count = 0; 
    $imgCounter = 1; 

    if ($_SERVER['REQUEST_METHOD'] == 'POST' and isset($_FILES['files'])){ 
     for($x = 1; $x <= 8; $x++){ 
     unlink('user-uploads/img'.$listingID.'-'.$x.'.jpg'); 
     unlink('user-uploads/img'.$listingID.'-'.$x.'.png'); 
     unlink('user-uploads/img'.$listingID.'-'.$x.'.gif'); 
     } 
     mysqli_query($connectionDB, "DELETE FROM ad_image_tbl WHERE ad_id = $listingID"); 
     // loop all files 
     foreach ($_FILES['files']['name'] as $i => $name){ 
     // if file not uploaded then skip it 
     if (!is_uploaded_file($_FILES['files']['tmp_name'][$i])) 
      continue; 

     /* skip unprotected files 
     if(!in_array(pathinfo($name, PATHINFO_EXTENSION), $extensions)) 
      continue; 
     */ 
      switch($_FILES['files']['type'][$i]){ 
      case 'image/jpeg' : $ext = '.jpg'; break; 
      case 'image/png' : $ext = '.png'; break; 
      case 'image/gif' : $ext = '.gif'; break; 
      default : $ext = ''; 
      } 

      if($ext == ''){ 
      echo errorMessage('<li>الملف المرفق لا يعتبر صورة</li>'); 
      $error_message = 'الملف المرفق لا يعتبر صورة'; 
      $message = array('message'=>'Attached file is not a valid image file.'); 
      exit(); 
      } 
      else{ 
     // now we can move uploaded files 
     if($count <= 7){ 
      $listingImage = $dir.'img'.$listingID.'-'.$imgCounter.$ext; 
      if(move_uploaded_file($_FILES["files"]["tmp_name"][$i], $listingImage)) 
      mysqli_query($connectionDB, "INSERT INTO ad_image_tbl VALUES('$imgCounter', '$listingID', '$listingImage')"); 
      $imgCounter++; 
      $count++; 
     } 
    } 


    } 
      $message = array('message'=>'Successfully uploaded '.$count.' files!'); 
      echo json_encode($message); 
    } 

    ?> 

jQueryの/ AJAX：

$(function() { 
    /* variables */ 
    var fileInput = document.getElementById('file'); 
    var fileCount = fileInput.files.length; 
    if(fileCount > 8){ 
    fileCount = 8; 
    } 
    var bar = $('.bar'); 
    var progress = $('.progress'); 

    /* submit form with ajax request using jQuery.form plugin */ 
    $('.upload_form').ajaxForm({ 

    /* set data type json */ 
    dataType:'JSON', 

    /* reset before submitting */ 
    beforeSend: function() { 
     bar.width('0%'); 
     progress.css('display', 'block'); 
    }, 

    /* progress bar call back*/ 
    uploadProgress: function(event, position, total, percentComplete) { 
     var pVel = percentComplete + '%'; 
     bar.width(pVel); 
    }, 

    /* complete call back */ 
    complete: function(message){ 
    // var responseMessage = $.parseJSON(data.responseText); 
    progress.css('display', 'none'); 
    document.getElementById('next_step').innerHTML = '<form method="post"><input type="submit" name="uploadSubmit" value="الانتهاء" /></form>'; 
    console.log(message) 
    } 

    }); 
}); 

Answer 1

なぜあなたは、アップロードを処理するためのプラグインを使用することができます。 dropzone.js

それは、このコード全体の概要を作成するためにあまりにも難しい

$(function() { 
    Dropzone.options.uiDZResume = { 
     success: function(file, response){ 
      alert(response); 
     } 
    }; 
});