3.2 傳送檔案資料

API: 傳檔

POST https://notes.webmix.cc/html5_tutorial/file/file_receive.php

Request Body

Name

Type

Description

the_file*

File 物件

傳遞檔案

後端 PHP 程式如下：

<?php
    header('Content-Type: text/html; charset=utf-8');  //傳送出去的編碼
    ini_set("display_errors", "On");
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: *');
    error_reporting(E_ALL & ~E_NOTICE);
    
    // 取得副檔名
    $new_array = explode(".", $_FILES['the_file']['name']);
    $ext = end($new_array);
    
    $target_dir = "./upload/"; // 目標路徑
    $new_filename = time() . "_" . rand(10,100) . "." . $ext; // 新的檔名
    $target_file = $target_dir . $new_filename; // 存的位置 + 檔名
    move_uploaded_file($_FILES["the_file"]["tmp_name"], $target_file);
    
    $arr = array('code' => "success", "file_path" => "https://notes.webmix.cc/html5_tutorial/file/upload/".$new_filename);
    echo json_encode($arr);
?>

建立 ajax/practice/xmlhttprequest_upload_file.html 檔案，內容如下：

<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="utf-8">
    <title>AJAX: 檔案上傳進度顯示</title>
  </head>
  <body>

    <input type="file" id="the_file" accept="image/*">
    <div id="upload_status"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>

      $(function(){

        $("#the_file").on("change", function(e){

          let xhr = new XMLHttpRequest();

          // 1. 改成 POST，然後帶入 API 網址
          xhr.open("POST", "https://notes.webmix.cc/html5_tutorial/file/file_receive.php", true);

          xhr.addEventListener("load", function(){
            alert("檔案傳送完成");
            let r = JSON.parse(xhr.response);
            console.log(r);
          });

          xhr.addEventListener("error", function(){
            console.log("執行到 error 程式");
          });

          xhr.addEventListener("loadend", function(){
            alert("執行到 loadend 程式");
          });

          // 2. 綁定 progress 事件，用來監控傳檔的進度
          xhr.upload.addEventListener('progress', function(evt) {

            // evt.lengthComputable: 是否可被計算
            // evt.loaded: 已傳了多少
            // evt.total: 總共有多少要傳

            if (evt.lengthComputable) {

              var loaded = (evt.loaded / evt.total);
              if (loaded <= 1) {
                var percent = loaded * 100;
                let upload_status_el = document.getElementById("upload_status");
                upload_status_el.innerHTML = percent + "%";
              }

            }

          });

          // 3. 將資料，跟著請求(request)發送出去
          //<form enctype="multipart/form-data">
            //<input type="file" name="the_file">
          //</form>
          let form_data = new FormData();
          form_data.append('the_file', this.files[0]);
          xhr.send(form_data);

        });
      
      });
    </script>
  </body>
</html>

Previous3.1 傳送一般資料 Next4 Fetch

Last updated 1 month ago

hashtagAPI: 傳檔

hashtagRequest Body

API: 傳檔

Request Body