PHP Ajax文件異步上傳代碼（XMLHttpRequest）例子

2024-05-04 21:49:55

字體：大中小

來源：轉載

供稿：網友

文件異步上傳通常是通過ajax實現了,也有朋友說使用iframe來實現這個雖然說可以達到目的但不是真正的a異步上傳了并且如果瀏覽器不支持irame那么iframe模仿上傳就無效了,下面我們來看一段真正的文件異步上傳例子.

PHP 代碼:

$fileName = $_FILES['afile']['name'];

$fileType = $_FILES['afile']['type'];

$fileContent = file_get_contents($_FILES['afile']['tmp_name']);

$dataUrl = 'data:' . $fileType . ';base64,' . base64_encode($fileContent);

$json = json_encode(array(

  'name' => $fileName,

  'type' => $fileType,

  'dataUrl' => $dataUrl,

  'username' => $_REQUEST['username'],

  'accountnum' => $_REQUEST['accountnum']

));

echo $json;

Html 及 JS 代碼

<!DOCTYPE html>



<html>

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />

<title>xhr.send(FormData) Example</title>

</head>

<body>

<input type="file" name="afile" id="afile" accept="image/*"/>

<script>

document.querySelector('#afile').addEventListener('change', function(e) {

  var file = this.files[0];

  var fd = new FormData();

  fd.append("afile", file);

  // These extra params aren't necessary but show that you can include other data.

  fd.append("username", "Groucho");

  fd.append("accountnum", 123456);

  var xhr = new XMLHttpRequest();

  xhr.open('POST', 'handle_file_upload.php', true);



  xhr.upload.onprogress = function(e) {

    if (e.lengthComputable) {

      var percentComplete = (e.loaded / e.total) * 100;

      console.log(percentComplete + '% uploaded');

    }

  };

  xhr.onload = function() {

    if (this.status == 200) {

      var resp = JSON.parse(this.response);

      console.log('Server got:', resp);

      var image = document.createElement('img');

      image.src = resp.dataUrl;

      document.body.appendChild(image);

    };

  };

  xhr.send(fd);

}, false);

</script>



</body>

</html>