phpstudy_PHP Ajax文件异步上传代码(XMLHttpRequest)例子

更新时间:2019-12-04    来源:php常用代码    手机版     字体:

【www.bbyears.com--php常用代码】

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 代码







xhr.send(FormData) Example


 

 
<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>


本文来源:http://www.bbyears.com/jiaocheng/82227.html