不得不说,太孤陋寡闻了,上一篇jquery的$.ajax()利用FormData数据类型与php后台交互写到JavaScript没有特定函数获取文件名,现在要打脸了,看人家怎么说的:/how-to/get-file-info-name-size-type-javascript/
Before sending the file to the server for upload, it always a good idea to validate the file. Using JavaScript you can easily get the file info and validate in client-side. The following single line of javaScript code, help you to get the file name, size, type, and modified date
//DOM对象的FileUpload对象var fileName = document.getElementById('file').files[0].name //文件名var fileSize = document.getElementById('file').files[0].size //文件大小var fileType = document.getElementById('file').files[0].type //文件类型var fileModifiedDate = document.getElementById('file').files[0].lastModifiedDate //文件最近修改日期
本来一直都是直接使用jQuery来获取元素id的,所以上面那句话我想着下面这行jQuery代码来代替
var file = $("#file").files[0];//错误操作,为了演示用
但是我发现会报错,然后说是
DOM对象的方法jQuery对象是不能使用的。
然后找了大半天想知道jQuery对象和DOM对象的区别
DOM对象我觉得用以下的HTML DOM Tree来描述会好理解一下。
而Jquery对象我想会比较好理解一点,或者自行百度。W3School里面有讲到jQuery的DOM元素方法,
所以我就想着JQuery对象转化为DOM对象,然后使用,下面这句加上index索引[0]就可以转化为DOM对象,神奇啊
var file = $("#file")[0].files[0]; //正确的JQuery对象转换成DOM对象
好吧,那么下面就准备上传文件到服务器了,留意
对于php后台,需要了解的知识是关于php文件的一些操作:
1、了解php的全局数组$_FILES:/php/php_file_upload.asp
2、了解php的文件上传move_uploaded_file()函数:/php/func_filesystem_move_uploaded_file.asp
php的全局数组$_FILES
php的文件上传move_uploaded_file()函数
好了,了解得差不多了,快要上代码了,不过再等等,还要了解FormData.append()添加文件类型,上一篇jquery的$.ajax()利用FormData数据类型与php后台交互说过在同一个键(name)append()多个值(value)的话,会叠加成集合(数组)的。那好吧,那就现在是折腾一番吧,虽然实践出真知,但也过被自己坑个不少时间。呜呜呜!~
注意是我用了FormData.append()了两个文件,还有一点要注意的是,php的数组array不支持一个键有两个值,只会覆盖掉。
但是全局数组$_FILES的name、type、size等等就可以有多个值,个人感觉$_FILES是一个三维数组。
上代码,
index.html代码:
<!DOCTYPE html><html><head><meta charset="utf-8"><!--利用cdn添加js和css库 --><script src="/jquery/3.2.1/jquery.min.js"></script></head><body style="text-align: center; padding: 100px;">姓名: <input type="text" name="name" id="yourName" /><br>年龄: <input type="text" name="age" id="yourAge" /><br>性别: <input type="text" name="sex" id="yourSex"><br>选择文件1:<input type="file" name="file" id="file"><br>选择文件2:<input type="file" name="file" id="file2"><br><button id="send">提交</button><br><br><br><br><div id="result">结果:</div></body> <script type="text/javascript">$(function () {$("#send").click(function () {var name = $("#yourName").val();var age = $("#yourAge").val();var sex = $("#yourSex").val();var file1 = document.getElementById('file').files[0]; //获取文件路径名,注意了没有files[1]这回事,已经试过坑//var file1 = $("#file")[0].files[0]; //这句跟上一面那句作用一样var file2 = document.getElementById('file2').files[0]; //获取文件路径名,其实id相同也是可以的,不要用getElementById来区分就行console.log(document.getElementById('file').files[0].name);console.log(document.getElementById('file').files[0].size);console.log(document.getElementById('file').files[0].type);console.log(document.getElementById('file').files[0].lastModifiedDate);var formData = new FormData();formData.append('name',name);formData.append('name','123');//用于在php后台演示直接$_POST['name']只会获得最后的那个值123formData.append('age',age);formData.append('sex',sex);formData.append('file[]',file1);formData.append('file[]',file2); //叠加成数组,传给php$.ajax({type: "POST",url: "server.php", //同目录下的php文件data:formData,dataType:"json", //声明成功使用json数据类型回调//如果传递的是FormData数据类型,那么下来的三个参数是必须的,否则会报错cache:false, //默认是true,但是一般不做缓存processData:false, //用于对data参数进行序列化处理,这里必须false;如果是true,就会将FormData转换为String类型contentType:false, //一些文件上传http协议的关系,自行百度,如果上传的有文件,那么只能设置为falsesuccess: function(msg){ //请求成功后的回调函数$("#result").append("你的名字是"+msg.name+",性别:"+msg.sex+",年龄:"+msg.age+",上传的文件名1:"+msg.file1+",上传的文件名2:"+msg.file2);}});})})</script></html>
server.php后台代码
<?phpdate_default_timezone_set('PRC'); //获取中国时区,'PRC':中华人民共和国if(!file_exists(date("Ymd",time()))) //如果文件夹不存在,则创建一个mkdir(date("Ymd",time())); $username = $_POST['name']; //获取索引$age = $_POST['age'];$sex = $_POST['sex'];$filesName = $_FILES['file']['name']; //文件名数组$filesTmpNamew = $_FILES['file']['tmp_name']; //临时文件名数组for($i= 0;$i<count($filesName);$i++) // count():php获取数组长度的方法{if(file_exists(date("Ymd",time()).'/'.$filesName[$i])){//die($filesName[$i]."文件已存在"); //如果上传的文件已经存在}else{move_uploaded_file($filesTmpNamew[$i], date("Ymd",time()).'/'.$filesName[$i]); //保存在缓冲区的是临时文件名而不是文件名}}//$file = basename($_POST['file']); //php的basename() 方法可获取文件名// if(file_exists(date("Ymd",time()).'/'.$file)){// //die("文件已存在");// }// else{// move_uploaded_file($_FILES['file']['tmp_name'], date("Ymd",time()).'/'.$file);// }$json_array = array('name'=>$username,'age'=>$age ,'sex'=>$sex,'file1'=>$filesName[0] ,'file2'=>$filesName[1]); //转换成数组类型$json= json_encode($json_array); //将数组转换成json对象echo $json;?>
结果: