网站轮播管理

主体思路与导航菜单管理相同，唯一的区别是这里有文件上传需求，所以我们这里重点关注文件上传问题

快速调整除上传图片以外的功能

🚩 源代码: step-80

异步图片上传

核心问题

目前遇到的问题是，我们需要在点击保存按钮之前，将图片上传到服务器，并且可以获取到图片的访问路径。

由于我们这里的轮播管理采用的是 AJAX 方式维护，使用之前的表单方式肯定没法在这里使用了（同步方式），这里必须有一种异步上传文件的方式：

明确问题：在选择完图片过后，异步将文件上传到服务端，并获取这张图片的访问路径。

解决方案

1. 第三方 flash 库（Deprecated）
2. iframe（Deprecated）
3. HTML5 提供的 XMLHttpRequest Level 2（Modern）

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

异步上传文件接口

添加一个支持上传文件的接口 upload.php

 
1
// 如果选择了文件 $_FILES['file']['error'] => 0
2
if (empty($_FILES['file']['error'])) {
3
  // PHP 在会自动接收客户端上传的文件到一个临时的目录
4
  $temp_file = $_FILES['file']['tmp_name'];
5
  // 我们只需要把文件保存到我们指定上传目录
6
  $target_file = '../static/uploads/' . $_FILES['file']['name'];
7
  if (move_uploaded_file($temp_file, $target_file)) {
8
    $image_file = '/static/uploads/' . $_FILES['file']['name'];
9
  }
10
}
11
​
12
// 设置响应类型为 JSON
13
header('Content-Type: application/json');
14
​
15
if (empty($image_file)) {
16
  echo json_encode(array(
17
    'success' => false
18
  ));
19
} else {
20
  echo json_encode(array(
21
    'success' => true,
22
    'data' => $image_file
23
  ));
24
}

🚩 源代码: step-81

XHR2 调用接口上传文件

 
1
/**
2
 * 异步上传文件
3
 */
4
$('#upload').on('change', function () {
5
  // 准备要上传的数据
6
  var formData = new FormData()
7
  formData.append('file', this.files[0])
8
​
9
  // 发送 AJAX 请求，上传文件
10
  var xhr = new XMLHttpRequest()
11
  xhr.open('POST', '/admin/upload.php')
12
  xhr.addEventListener('load', function () {
13
    var res = JSON.parse(xhr.response)
14
    console.log(res)
15
  })
16
  xhr.send(formData)
17
})

🚩 源代码: step-82

jQuery 也是可以的（内部仍然是使用的 XMLHttpRequest level 2）

 
1
/**
2
 * 异步上传文件
3
 */
4
$('#upload').on('change', function () {
5
  // 准备要上传的数据
6
  var formData = new FormData()
7
  formData.append('file', this.files[0])
8
​
9
  // 发送 AJAX 请求，上传文件
10
  $.ajax({
11
    url: '/admin/upload.php',
12
    cache: false,
13
    contentType: false,
14
    processData: false,
15
    data: formData,
16
    type: 'post',
17
    success: function (res) {
18
      if (res.success) {
19
        $('#image').val(res.data).siblings('.thumbnail').attr('src', res.data).fadeIn()
20
      } else {
21
        $('#image').val('').siblings('.thumbnail').fadeOut()
22
        notify('上传文件失败')
23
      }
24
    }
25
  })
26
})

🚩 源代码: step-83