文件异步上传通常是通过ajax实现了，也有朋友说使用iframe来实现这个虽然说可以达到目的但不是真正的a异步上传了并且如果浏览器不支持irame那么iframe模仿上传就无效了，下面我们来看一段真正的文件异步上传例子。
<script>ec(2);</script>
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 代码
<script><br> document.querySelector('#afile').addEventListener('change', function(e) {<br> var file = this.files[0];<p> var fd = new FormData();<br> fd.append("afile", file);<br> // These extra params aren't necessary but show that you can include other data.<br> fd.append("username", "Groucho");<br> fd.append("accountnum", 123456);<p> var xhr = new XMLHttpRequest();<br> xhr.open('POST', 'handle_file_upload.php', true);<br> <br> xhr.upload.onprogress = function(e) {<br> if (e.lengthComputable) {<br> var percentComplete = (e.loaded / e.total) * 100;<br> console.log(percentComplete + '% uploaded');<br> }<br> };<p> xhr.onload = function() {<br> if (this.status == 200) {<br> var resp = JSON.parse(this.response);<p> console.log('Server got:', resp);<p> var image = document.createElement('img');<br> image.src = resp.dataUrl;<br> document.body.appendChild(image);<br> };<br> };<p> xhr.send(fd);<br> }, false);<br> </script>
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
