php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析

吾爱主题阅读：124 2021-09-30 13:44:00 评论：0

本文实例讲述了php 下 html5 XHR2 + FormData + File API 上传文件操作。分享给大家供大家参考，具体如下：

FormData的作用：

FormData对象可以帮助我们自动的打包表单数据，通过XMLHttpRequest的send()方法来提交表单。当然FormData也可以动态的append数据。FormData的最大优点就是我们可以异步上传一个二进制文件。

例1如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <!DOCTYPE HTML> <html lang= "zh-CN" > <head> <meta charset= "UTF-8" > <title></title> </head> <body> <form method= "post" id= "myForm" 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既可以从表单读取数据，也可以动态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，现在可以让网页要求用户选择本地文件，并且读取这些文件的信息了。

通过File API，我们可以在用户选取一个或者多个文件之后，访问到代表了所选文件的一个或多个File对象，这些对象被包含在一个FileList对象中。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!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" id= "upfile" /> <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 + "\r\n" + "大小:" + file.size + "\r\n" ); }; </script> </html>

我们通过FormData + File API 上传文件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <!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" id= "upfile" /> <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 () { //我们创建一个FormData对象 var fd = new FormData(); var file = upfile.files[0]; //把文件添加到FormData对象中 fd.append( "file" , file); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { alert( this .responseText); } }; xhr.open( "post" , "upfile.php" , true ); //发送FormData对象 xhr.send(fd); return false ; }; </script> </html>

upfile.php代码如下：

1 2 3 4 5 6 7 8 9 10 11 <?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" ; }

使用对象URL来显示你所选择的图片

通过window.URL.createObjectURL()和 window.URL.revokeObjectURL()两个DOM方法。

这两个方法创建简单的URL字符串对象，用于指向任何 DOM File 对象数据，包括用户电脑中的本地文件。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 <!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" id= "upfile" /> <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 () { //创建一个img标签 var img = document.createElement( "img" ); //通过file对象创建对象URL img.src = window.URL.createObjectURL( this .files[0]); img.height = 60; img.onload = function () { //释放对象URL window.URL.revokeObjectURL( this .src); }; document.body.appendChild(img); }; myForm.onsubmit = function () { //我们创建一个FormData对象 var fd = new FormData(); var file = upfile.files[0]; //把文件添加到FormData对象中 fd.append( "file" , file); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { alert( this .responseText); } }; xhr.open( "post" , "upfile.php" , true ); //发送FormData对象 xhr.send(fd); return false ; }; </script> </html>

希望本文所述对大家PHP程序设计有所帮助。

原文链接：https://www.cnblogs.com/jkko123/p/6352065.html

可以去百度分享获取分享代码输入这里。

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。