Question

我有一个带有进度条的上传器：

$('#calendar').fullCalendar({ defaultView: 'weekList', events: testEvents });：

index.php

<h1>Uploader</h1> <hr> <form action="#"> <input type="file" name="image" > <button class="btn btn-sm btn-info upload" type="submit">Upload</button> <button type="button" class="btn btn-sm btn-danger cancel">Cancel</button> <div class="progress progress-striped active"> <div class="progress-bar" style="width:0%"></div> </div> </form> <script> $(document).on('submit','form',function(e){ e.preventDefault(); $form = $(this); uploadImage($form); }); function uploadImage($form){ $form.find('.progress-bar').removeClass('progress-bar-success') .removeClass('progress-bar-danger'); var formdata = new FormData($form[0]); //formelement var request = new XMLHttpRequest(); //progress event... request.upload.addEventListener('progress',function(e){ var percent = Math.round(e.loaded/e.total * 100); $form.find('.progress-bar').width(percent+'%').html(percent+'%'); }); //progress completed load event request.addEventListener('load',function(e){ $form.find('.progress-bar').addClass('progress-bar-success').html('upload completed....'); }); request.open('post', 'upload.php'); request.send(formdata); $form.on('click','.cancel',function(){ request.abort(); $form.find('.progress-bar') .addClass('progress-bar-danger') .removeClass('progress-bar-success') .html('upload aborted...'); }); } </script>：

upload.php

到目前为止，这项工作非常顺利。我只是在我的页面上看不到“你好世界”。我试图改变这一行：

<?php

    $tmp_file = $_FILES['image']['tmp_name'];
    $filename = $_FILES['image']['name'];

    move_uploaded_file($tmp_file, 'files/'. $filename);

    echo "hello world";

?>

成：

   $form.find('.progress-bar').addClass('progress-bar-success').html('upload completed....');
            });

但我仍然没有看到“你好世界”

Answer 1

它是异步的。您需要定义onreadystatechange来捕获响应：

request.onreadystatechange = function () {
  if (request.readyState === 4 && request.status === 200) {
    //here you have your "hello word"
    alert(request.responseText);
  }
}

如何通过Ajax发送php“echo”？

1 个答案: