php 下 html5 XHR2 + FormData + File API 上傳文件操作實(shí)例分析

更新時(shí)間：2020年02月28日 10:35:31 作者：懷素真

這篇文章主要介紹了php 下 html5 XHR2 + FormData + File API 上傳文件操作,結(jié)合實(shí)例形式分析了php 下使用html5 XHR2 + FormData + File API 實(shí)現(xiàn)上傳文件操作方法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了php 下 html5 XHR2 + FormData + File API 上傳文件操作。分享給大家供大家參考，具體如下：

FormData的作用：

FormData對(duì)象可以幫助我們自動(dòng)的打包表單數(shù)據(jù)，通過(guò)XMLHttpRequest的send()方法來(lái)提交表單。當(dāng)然FormData也可以動(dòng)態(tài)的append數(shù)據(jù)。FormData的最大優(yōu)點(diǎn)就是我們可以異步上傳一個(gè)二進(jìn)制文件。

例1如下：

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <form method="post" id="myForm" onsubmit="return post();">
    用戶名<input type="text" name="uname" />
    密碼<input type="password" name="upwd" />
    郵箱<input type="text" name="uemail" />
    <input type="submit" name="submit" value="提交" />
  </form>
</body>
<script type="text/javascript">
function post() {
  var myForm = document.getElementById("myForm");
  //FormData既可以從表單讀取數(shù)據(jù)，也可以動(dòng)態(tài)append(鍵,值)添加
  var fd = new FormData(myForm);

  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      alert(this.responseText);
    }
  };
  xhr.open("post", "post.php", true);
  xhr.send(fd);
  return false;
}
</script>
</html>

File API

使用HTML5 DOM新增的File API，現(xiàn)在可以讓網(wǎng)頁(yè)要求用戶選擇本地文件，并且讀取這些文件的信息了。

通過(guò)File API，我們可以在用戶選取一個(gè)或者多個(gè)文件之后，訪問(wèn)到代表了所選文件的一個(gè)或多個(gè)File對(duì)象，這些對(duì)象被包含在一個(gè)FileList對(duì)象中。

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <form method="post" id="myForm">
    <input type="file" name="file" id="upfile" />
    <input type="submit" name="submit" value="提交" />
  </form>
</body>
<script type="text/javascript">
  var upfile = document.getElementById("upfile");
  upfile.onchange = function() {
    var file = this.files[0];
    alert("文件名:" + file.name + "\r\n" + "大小:" + file.size + "\r\n");
  };
</script>
</html>

我們通過(guò)FormData + File API 上傳文件

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <form method="post" id="myForm">
    <input type="file" name="file" id="upfile" />
    <input type="submit" name="submit" value="提交" />
  </form>
</body>
<script type="text/javascript">
  var myForm = document.getElementById("myForm");
  var upfile = document.getElementById("upfile");

  myForm.onsubmit = function() {
    //我們創(chuàng)建一個(gè)FormData對(duì)象
    var fd = new FormData();
    var file = upfile.files[0];
    //把文件添加到FormData對(duì)象中
    fd.append("file", file);

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        alert(this.responseText);
      }
    };
    xhr.open("post", "upfile.php", true);
    //發(fā)送FormData對(duì)象
    xhr.send(fd);
    return false;
  };
</script>
</html>

upfile.php代碼如下：

<?php
$uploadDir = './upload/';
if(!file_exists($uploadDir)) {
  @mkdir($uploadDir, 0777, true);
}
$uploadFile = $uploadDir . basename($_FILES['file']['name']);
if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile)) {
  echo "OK";
} else {
  echo "NO";
}

使用對(duì)象URL來(lái)顯示你所選擇的圖片

通過(guò)window.URL.createObjectURL()和 window.URL.revokeObjectURL()兩個(gè)DOM方法。

這兩個(gè)方法創(chuàng)建簡(jiǎn)單的URL字符串對(duì)象，用于指向任何 DOM File 對(duì)象數(shù)據(jù)，包括用戶電腦中的本地文件。

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <form method="post" id="myForm">
    <input type="file" name="file" id="upfile" />
    <input type="submit" name="submit" value="提交" />
  </form>
</body>
<script type="text/javascript">
  var myForm = document.getElementById("myForm");
  var upfile = document.getElementById("upfile");

  upfile.onchange = function() {
    //創(chuàng)建一個(gè)img標(biāo)簽
    var img = document.createElement("img");
    //通過(guò)file對(duì)象創(chuàng)建對(duì)象URL
    img.src = window.URL.createObjectURL(this.files[0]);
    img.height = 60;
    img.onload = function() {
      //釋放對(duì)象URL
      window.URL.revokeObjectURL(this.src);
    };
    document.body.appendChild(img);
  };

  myForm.onsubmit = function() {
    //我們創(chuàng)建一個(gè)FormData對(duì)象
    var fd = new FormData();
    var file = upfile.files[0];
    //把文件添加到FormData對(duì)象中
    fd.append("file", file);

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        alert(this.responseText);
      }
    };
    xhr.open("post", "upfile.php", true);
    //發(fā)送FormData對(duì)象
    xhr.send(fd);
    return false;
  };
</script>
</html>

更多關(guān)于PHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《php文件操作總結(jié)》、《PHP目錄操作技巧匯總》、《PHP常用遍歷算法與技巧總結(jié)》、《PHP數(shù)據(jù)結(jié)構(gòu)與算法教程》、《php程序設(shè)計(jì)算法總結(jié)》及《PHP網(wǎng)絡(luò)編程技巧總結(jié)》

希望本文所述對(duì)大家PHP程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: