PHP Ajax文件异步上传代码（XMLHttpRequest）（ PHP 基础知识总结）
- 技术交流
- 2024-10-25 23:47:01
PHP Ajax文件异步上传代码（XMLHttpRequest）（ PHP 基础知识总结）
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 代码
<!DOCTYPE html><!--Copyright 2012 Google Inc.Licensed under the Apache License, Version 2.0 (the "License");you may not use this file except in compliance with the License.You may obtain a copy of the License at www.apache.org/licenses/LICENSE-2.0Unless required by applicable law or agreed to in writing, softwaredistributed under the License is distributed on an "AS IS" BASIS,WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.See the License for the specific language governing permissions andlimitations under the License.Author: Eric Bidelman (ericbidelman@chromium.org)--><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><!--[if IE]><script src="ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script><script>CFInstall.check({mode: 'overlay'});</script><![endif]--></body></html>PHP Ajax文件异步上传代码（XMLHttpRequest）（ PHP 基础知识总结）由讯客互联技术交流栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“PHP Ajax文件异步上传代码（XMLHttpRequest）（ PHP 基础知识总结）”
