Laravel  
laravel
文档
数据库
架构
入门
php技术
    
Laravelphp
laravel / php / java / vue / mysql / linux / python / javascript / html / css / c++ / c#

php多图无刷新上传

作者:以往的帅哥   发布日期:2025-03-27   浏览:385

要实现PHP多图无刷新上传,可以使用Ajax来实现。

首先,在HTML中创建一个表单,用于选择多个图片文件:

<form id="upload-form" enctype="multipart/form-data">
  <input type="file" name="images[]" multiple>
  <input type="submit" value="上传">
</form>
<div id="upload-result"></div>

然后,使用JavaScript代码监听表单的提交事件,通过Ajax将选中的图片文件发送到服务器:

<script>
document.getElementById('upload-form').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单的默认提交行为

  var form = document.getElementById('upload-form');
  var formData = new FormData(form); // 创建FormData对象

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'upload.php', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      document.getElementById('upload-result').innerHTML = xhr.responseText;
    } else {
      alert('上传失败');
    }
  };
  xhr.send(formData); // 发送FormData对象
});
</script>

最后,在服务器端的upload.php文件中,可以使用$_FILES全局变量来处理接收到的图片文件:

<?php
if (isset($_FILES['images'])) {
  $images = $_FILES['images'];

  foreach ($images['tmp_name'] as $key => $tmp_name) {
    $name = $images['name'][$key];
    $tmp = $images['tmp_name'][$key];
    $error = $images['error'][$key];

    if ($error === UPLOAD_ERR_OK) {
      move_uploaded_file($tmp, 'uploads/' . $name);
      echo '文件 ' . $name . ' 上传成功<br>';
    } else {
      echo '文件 ' . $name . ' 上传失败<br>';
    }
  }
}
?>

以上代码会将上传成功的文件保存在服务器的uploads目录下,并在页面上显示上传结果。

注意:在使用这段代码之前,需要确保服务器上的uploads目录有足够的权限用于保存上传的文件。

上一篇:php方法私有方法(php中类方法的访问权限)

下一篇:PHP抢红包设计实现(抢红包程序代码)

大家都在看

php session用法

phpisset函数

php后端

php爬虫框架

php读取csv文件

php 三元表达式

php文件加密

php 拆分字符串

php pcntl

php ||

Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3

Laravel 中文站