PHP+Ajax+JS实现多图上传

下面我将为您详细讲解“PHP+Ajax+JS实现多图上传”的完整攻略。

总体思路

实现多图上传,我们需要通过Ajax技术将多张图片逐一传递到服务器端,再通过PHP将图片保存到指定目录中。下面是详细的步骤:

  1. 使用HMTL5的file类型的input框架,在客户端实现图片上传。
  2. 使用JavaScript遍历的方式,依次将图片上传到服务器端。
  3. JavaScript调用Ajax技术,将图片文件传递给服务器端。
  4. 服务器端接收Ajax传递过来的图片文件并保存到指定目录。
  5. 将上传结果以JSON格式返回给客户端。

示例1

以下是一个简单但完整的多图上传示例,前端使用原生HTML5+JS,后端使用PHP实现。

前端代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>多图上传示例</title>
</head>
<body>
  <input type="file" id="file" name="file" multiple>
  <button type="button" onclick="upload()">上传</button>
  <div id="result"></div>

  <script>
  function upload() {
    var files = document.getElementById('file').files;
    var formData = new FormData();
    for (var i = 0; i < files.length; i++) {
      formData.append('file[]', files[i]);
    }

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        var result = JSON.parse(xhr.responseText);
        var div = document.getElementById('result');
        div.innerHTML = '';
        for (var i = 0; i < result.length; i++) {
          div.innerHTML += '<img src="' + result[i] + '">';
        }
      }
    };
    xhr.open('POST', 'upload.php');
    xhr.send(formData);
  }
  </script>
</body>
</html>

后端代码:

<?php
$allowedExts = array('jpg', 'jpeg', 'gif', 'png');
$uploadDir = 'uploads/';
$uploadedFiles = array();
foreach ($_FILES['file']['name'] as $key => $name) {
  $tmp_name = $_FILES['file']['tmp_name'][$key];
  $extension = substr($name, strrpos($name, '.') + 1);
  if (!in_array($extension, $allowedExts)) {
    continue;
  }
  $filePath = $uploadDir . uniqid() . '.' . $extension;
  if (move_uploaded_file($tmp_name, $filePath)) {
    array_push($uploadedFiles, $filePath);
  }
}
echo json_encode($uploadedFiles);
?>

示例2

下面是使用jQuery实现的多图上传示例。

前端代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>多图上传示例</title>
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <input type="file" id="file" name="file" multiple>
  <button type="button" onclick="upload()">上传</button>
  <div id="result"></div>

  <script>
  function upload() {
    var formData = new FormData();
    $('input[type=file]').each(function() {
        var files = this.files;
        for (var i = 0; i < files.length; i++) {
          formData.append('file[]', files[i]);
        }
    });
    $.ajax({
      url: 'upload.php',
      type: 'POST',
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false,
      success: function(result) {
        var div = $('#result');
        div.empty();
        for (var i = 0; i < result.length; i++) {
          div.append('<img src="' + result[i] + '">');
        }
      }
    });
  }
  </script>
</body>
</html>

后端代码和示例1相同。

希望这份攻略能对您有所帮助!

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:PHP+Ajax+JS实现多图上传 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • javascript打印大全(打印页面设置/打印预览代码)

    下面是详细讲解“javascript打印大全(打印页面设置/打印预览代码)”的攻略: 打印页面设置 打印页面设置主要是使用window.print()方法,这个方法用于打印当前页面。在使用window.print()前,我们常常需要设置一些打印页面参数,如纸张大小、边距、横向还是纵向等等。 设置纸张大小 @media print { @page { size…

    JavaScript 2023年5月19日
    00
  • JS实现表单验证案例

    JS实现表单验证是前端开发中经常用到的技术,可有效防止用户提交无效或不完整的数据。下面是一些实现表单验证的技巧。 第一步:获取表单元素 在JS中,使用DOM API获取表单元素非常简单。首先得到表单元素本身,然后可以通过表单的表单元素来访问表单元素。例如: const form = document.querySelector(‘form’); const …

    JavaScript 2023年6月10日
    00
  • 前端编码规范(3)JavaScript 开发规范

    前端编码规范对于一个团队而言是非常重要的,它有助于提高代码的可阅读性、可维护性,并能够帮助团队成员之间保持协同配合。本文主要讲解 JavaScript 开发规范,下面将详细介绍该规范的内容。 1. 变量与常量命名规范 在 JavaScript 开发中,变量与常量命名应当遵循以下规范: 变量和常量名应该基于语义而非单词缩写 全局变量使用 全大写常量 的方式定义…

    JavaScript 2023年5月18日
    00
  • 2014 年最热门的21款JavaScript框架推荐

    2014 年最热门的21款JavaScript框架推荐 简介 本篇文章将会为您推荐 2014 年最热门的 21 款 JavaScript 框架。其中包括前端和后端框架、JavaScript 模板引擎、数据可视化工具等。在这些框架中,您可以选择最适合您项目需求的框架,轻松实现快速开发。 前端框架 1. AngularJS AngularJS是一个由谷歌开发的前…

    JavaScript 2023年5月18日
    00
  • php IIS日志分析搜索引擎爬虫记录程序第1/2页

    下面是PHP IIS日志分析搜索引擎爬虫记录程序第1/2页的完整攻略,包含以下几个步骤: 1. 配置IIS日志文件 在进行日志分析前,我们需要在IIS上配置日志文件,以记录用户访问网站的详细信息。可以按照以下步骤进行配置: 打开IIS管理器,在左侧面板中选择您要配置的站点,然后点击“logging”选项卡。 在日志文件目录下新建一个文件夹,用于存放日志文件。…

    JavaScript 2023年5月28日
    00
  • es6函数之箭头函数用法实例详解

    关于es6函数之箭头函数用法实例详解,我来为你进行详细的讲解。 什么是箭头函数? 箭头函数是ES6中新增的一个函数语法,它是一个匿名函数,语法比传统函数更加简洁。箭头函数的定义方式如下: // 无参箭头函数 () => {} // 有参箭头函数 (arg1, arg2) => {} // 带表达式的箭头函数 (arg1, arg2) => …

    JavaScript 2023年5月27日
    00
  • javascript同步Import,同步调用外部js的方法

    JavaScript同步Import是一种将外部JavaScript文件同步导入到当前JavaScript文件中的方法。这种方法可以让外部JavaScript文件中的函数和变量永久地集成到当前JavaScript文件中。以下是使用该方法的完整攻略: 1. 创建一个外部的JavaScript文件 首先,您需要在与当前JavaScript文件相同的目录中创建一个…

    JavaScript 2023年6月11日
    00
  • javascript中对Attr(dom中属性)的操作示例讲解

    下面是 “javascript中对Attr(dom中属性)的操作示例讲解”的完整攻略。 什么是 Attr 在 DOM 中,每一个元素都有一系列属性(Attributes)和值(Value)。比如,元素的 id 属性、class 属性等都是属性。在 JavaScript 中,对于这些属性的操作都可以通过 Attr 来完成。 Attr 的操作 获取属性值 获取 …

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部