Question

我已经为文件上传创建了一个jQuery / AJAX脚本，我使用PHP处理上传。它与进度条和验证完美配合。但是有一个问题，我无法获得我在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!"}

正如您所看到的，我想要显示的消息位于最后一行代码中，但它并不是单独显示的。它显示整个HTML文档。我将在下面发布我的HTML和PHP代码，因为我是Ajax的新手，我正在努力。请帮助我，如果你可以解释，因为我不只是想完成它，我想真正理解这是如何以及为什么这不起作用。谢谢。

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);
        }
    };
});

JQuery AJAX文件上传responseText未显示

1 个答案: