<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> function pics(){ var pic = document.getElementsByTagName('input')[0].files; console.log(pic); } </script> </head> <body> <input type="file" name="pic" onchange='pics();'> </body> </html>
查看下他是什么东西：
我们可以很清晰看到我们上传的只是一个文件而已。。。。
那么我们再来深入玩玩。。。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> function pics(){ var pic = document.getElementsByTagName('input')[0].files[0]; console.log(pic); } </script> </head> <body> <input type="file" name="pic" onchange='pics();'> </body> </html>
效果如下：
这样我们就可以很详细的看到我们文件的具体内容是什么了。。。。。。
如果是做超大型文件上传的是靠如下方法：
要不断切割文件内容，切割成小块。。。
废话不多说来模拟一个上传的再说。。。。。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> function selefile(){ //创建FormData对象 var fd = new FormData(); //获取文件对象 var pic = document.getElementsByTagName('input')[0].files[0]; //把文件内容追加到表单数据里 fd.append('pic',pic); //创建xmlhttprequest对象 var xhr = new XMLHttpRequest(); //打开 xhr.open('POST','12.php',true); //发送fd给后端 xhr.send(fd); //接收 xhr.onreadystatechange = function(){ if(this.readyState == 4){ document.getElementById('desc').innerHTML = this.responseText; } } } </script> </head> <body> <input type="file" name="pic" onchange="selefile();" > <div id="desc"></div> </body> </html>
<?php //print_r($_FILES); if(empty($_FILES)){ exit('No file'); } if($_FILES['pic']['error'] != 0){ exit('no file'); } $picaddress = 'upload/'.time().rand(); move_uploaded_file($_FILES['pic']['tmp_name'],$picaddress.'.jpg'); echo 'OK';
效果如下所示：
