不得不说,太孤陋寡闻了,上一篇jquery的$.ajax()利用FormData数据类型与php后台交互写到JavaScript没有特定函数获取文件名,现在要打脸了,看人家怎么说的:https://www.codexworld.com/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:http://www.w3school.com.cn/php/php_file_upload.asp
2、了解php的文件上传move_uploaded_file()函数:http://www.w3school.com.cn/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="https://cdn.bootcss.com/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']只会获得最后的那个值123
formData.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协议的关系,自行百度,如果上传的有文件,那么只能设置为false
success: function(msg){ //请求成功后的回调函数
$("#result").append("你的名字是"+msg.name+",性别:"+msg.sex+",年龄:"+msg.age+",上传的文件名1:"+msg.file1+",上传的文件名2:"+msg.file2);
}
});
})
})
</script>
</html>
server.php后台代码
<?php
date_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;
?>
结果: