用php / ajax上传图像正在刷新页面

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用php / ajax上传图像正在刷新页面相关的知识,希望对你有一定的参考价值。

脚本运行正常,我正在使用formData()通过ajax上传图像,并且已正确将其上传到文件夹,但是我不明白为什么在调用move_uploaded_file()后刷新页面的原因在php脚本中。这是完整的代码:

index.html

<label>Add picture?</label>
<input type='file' accept='.png,.gif,.jpg' onchange='upload_img(this)'>

script.js

function upload_img(e) {
  let file = e.files[0];
  let formData = new FormData();
  formData.append('file', file);

  let xhr = new XMLHttpRequest();
  xhr.onload = function () {
    // I want to show a message here but the page is being refreshed
    document.getElementById('ajax_result').innerhtml = xhr.responseText;
  }
  xhr.open("POST", "upload_img.php", true);
  xhr.send(formData);
}

upload_img.php

<?php
  if (!empty($_FILES['file'])) {
    var_dump($_FILES['file']);
    $path = "../img_uploads/";
    $path = $path . basename($_FILES['file']['name']);

    if (move_uploaded_file($_FILES['file']['tmp_name'], $path)) {
      echo "The file " .  basename($_FILES['file']['name']) . " has been uploaded";
    }
  }
答案

也许先尝试xfr.open,然后再尝试xfr.onload

以上是关于用php / ajax上传图像正在刷新页面的主要内容,如果未能解决你的问题,请参考以下文章

ASP.NET 用AJAX在页面上传头像,不能异步刷新?

PHP使用Ajax连续实现上传图片

PHP使用Ajax连续实现上传图片

怎么用ajax 提交上传的文件上传后在界面显示出来。但界面不刷新

键盘输入时,如何在Ajax调用URL更改后停止MVC页面刷新

php怎么不刷新页面更新数据.