php 下 html5 XHR2 + FormData + File API 上傳文件操作實(shí)例分析
本文實(shí)例講述了php 下 html5 XHR2 + FormData + File API 上傳文件操作。分享給大家供大家參考，具體如下：
FormData的作用：
FormData對(duì)象可以幫助我們自動(dòng)的打包表單數(shù)據(jù)，通過XMLHttpRequest的send()方法來(lái)提交表單。當(dāng)然FormData也可以動(dòng)態(tài)的append數(shù)據(jù)。FormData的最大優(yōu)點(diǎn)就是我們可以異步上傳一個(gè)二進(jìn)制文件。
例1如下：
<!DOCTYPE HTML><html lang='zh-CN'><head> <meta charset='UTF-8'> <title></title></head><body> <form method='post' onsubmit='return post();'> 用戶名<input type='text' name='uname' /> 密碼<input type='password' name='upwd' /> 郵箱<input type='text' name='uemail' /> <input type='submit' name='submit' value='提交' /> </form></body><script type='text/javascript'>function post() { var myForm = document.getElementById('myForm'); //FormData既可以從表單讀取數(shù)據(jù)，也可以動(dòng)態(tài)append(鍵,值)添加 var fd = new FormData(myForm); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { alert(this.responseText); } }; xhr.open('post', 'post.php', true); xhr.send(fd); return false;}</script></html>
File API
使用HTML5 DOM新增的File API，現(xiàn)在可以讓網(wǎng)頁(yè)要求用戶選擇本地文件，并且讀取這些文件的信息了。
通過File API，我們可以在用戶選取一個(gè)或者多個(gè)文件之后，訪問到代表了所選文件的一個(gè)或多個(gè)File對(duì)象，這些對(duì)象被包含在一個(gè)FileList對(duì)象中。
<!DOCTYPE HTML><html lang='zh-CN'><head> <meta charset='UTF-8'> <title></title></head><body> <form method='post' id='myForm'> <input type='file' name='file' /> <input type='submit' name='submit' value='提交' /> </form></body><script type='text/javascript'> var upfile = document.getElementById('upfile'); upfile.onchange = function() { var file = this.files[0]; alert('文件名:' + file.name + 'rn' + '大小:' + file.size + 'rn'); };</script></html>
我們通過FormData + File API 上傳文件
<!DOCTYPE HTML><html lang='zh-CN'><head> <meta charset='UTF-8'> <title></title></head><body> <form method='post' id='myForm'> <input type='file' name='file' /> <input type='submit' name='submit' value='提交' /> </form></body><script type='text/javascript'> var myForm = document.getElementById('myForm'); var upfile = document.getElementById('upfile'); myForm.onsubmit = function() { //我們創(chuàng)建一個(gè)FormData對(duì)象 var fd = new FormData(); var file = upfile.files[0]; //把文件添加到FormData對(duì)象中 fd.append('file', file); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) {alert(this.responseText); } }; xhr.open('post', 'upfile.php', true); //發(fā)送FormData對(duì)象 xhr.send(fd); return false; };</script></html>
upfile.php代碼如下：
<?php$uploadDir = ’./upload/’;if(!file_exists($uploadDir)) { @mkdir($uploadDir, 0777, true);}$uploadFile = $uploadDir . basename($_FILES[’file’][’name’]);if(move_uploaded_file($_FILES[’file’][’tmp_name’], $uploadFile)) { echo 'OK';} else { echo 'NO';}
使用對(duì)象URL來(lái)顯示你所選擇的圖片
通過window.URL.createObjectURL()和 window.URL.revokeObjectURL()兩個(gè)DOM方法。
這兩個(gè)方法創(chuàng)建簡(jiǎn)單的URL字符串對(duì)象，用于指向任何 DOM File 對(duì)象數(shù)據(jù)，包括用戶電腦中的本地文件。
<!DOCTYPE HTML><html lang='zh-CN'><head> <meta charset='UTF-8'> <title></title></head><body> <form method='post' id='myForm'> <input type='file' name='file' /> <input type='submit' name='submit' value='提交' /> </form></body><script type='text/javascript'> var myForm = document.getElementById('myForm'); var upfile = document.getElementById('upfile'); upfile.onchange = function() { //創(chuàng)建一個(gè)img標(biāo)簽 var img = document.createElement('img'); //通過file對(duì)象創(chuàng)建對(duì)象URL img.src = window.URL.createObjectURL(this.files[0]); img.height = 60; img.onload = function() { //釋放對(duì)象URL window.URL.revokeObjectURL(this.src); }; document.body.appendChild(img); }; myForm.onsubmit = function() { //我們創(chuàng)建一個(gè)FormData對(duì)象 var fd = new FormData(); var file = upfile.files[0]; //把文件添加到FormData對(duì)象中 fd.append('file', file); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) {alert(this.responseText); } }; xhr.open('post', 'upfile.php', true); //發(fā)送FormData對(duì)象 xhr.send(fd); return false; };</script></html>
更多關(guān)于PHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《php文件操作總結(jié)》、《PHP目錄操作技巧匯總》、《PHP常用遍歷算法與技巧總結(jié)》、《PHP數(shù)據(jù)結(jié)構(gòu)與算法教程》、《php程序設(shè)計(jì)算法總結(jié)》及《PHP網(wǎng)絡(luò)編程技巧總結(jié)》
希望本文所述對(duì)大家PHP程序設(shè)計(jì)有所幫助。
相關(guān)文章：
1. Python常用擴(kuò)展插件使用教程解析2. AspNetCore&MassTransit Courier實(shí)現(xiàn)分布式事務(wù)的詳細(xì)過程3. vue組件庫(kù)的在線主題編輯器的實(shí)現(xiàn)思路4. 部署vue+Springboot前后端分離項(xiàng)目的步驟實(shí)現(xiàn)5. 網(wǎng)頁(yè)中img圖片使用css實(shí)現(xiàn)等比例自動(dòng)縮放不變形（代碼已測(cè)試）6. idea設(shè)置自動(dòng)導(dǎo)入依賴的方法步驟7. Python安裝并操作redis實(shí)現(xiàn)流程詳解8. AJAX實(shí)現(xiàn)數(shù)據(jù)的增刪改查操作詳解【java后臺(tái)】9. ajax post下載flask文件流以及中文文件名問題10. 使用AJAX（包含正則表達(dá)式）驗(yàn)證用戶登錄的步驟
網(wǎng)公網(wǎng)安備