PHP Ajax文件异步上传代码（XMLHttpRequest）例子

发布:smiling　来源: PHP粉丝网　添加日期：2016-01-20 16:08:06　浏览: 评论：0　

文件异步上传通常是通过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>