Write a relatively low file upload function. You need to click Upload to upload it to the server.
But after testing, it still fails to upload. I don’t know what’s going on? Below is my code:
html
<body>
<p class="toolbar1">
<a href="javascript:;" id="upload" class="a-upload mr10"><input id="changeFile" type="file" name="myFiles" id="">点击这里上传文件</a>
<p class="showFileName mr10"></p>
<button id="uploadBtn" type="button" class="btn btn-primary">上传</button>
</p>
</body>php:
<?php
//做个路由 action为url中的参数
$action = $_GET['action'];
switch($action) {
case 'upload_file':
upload();
break;
}
function upload(){
// 获取上传的图片
$pic = $_FILES['myFiles']['tmp_name'];
$upload_ret = false;
if($pic){
// 上传的路径，建议写物理路径
$uploadDir = "../upload_files";
// 创建文件夹
if(!file_exists($uploadDir)){
mkdir($uploadDir, 0777);
}
// 用时间戳来保存图片，防止重复
$targetFile = $uploadDir . '/' . time() . $_FILES['myFiles']['name'];
// 将临时文件 移动到我们指定的路径，返回上传结果
$upload_ret = move_uploaded_file($pic, $targetFile) ? true : false;
}
return $upload_ret;
}
?>js:
$(function() {
//上传图片
$('#uploadBtn').on('click',function(){
/*alert('444');*/
uploadFiles();
})
function uploadFiles(){
//上传文件接口
var uploadUrl = "./php/data.php?action=upload_file";
//选择的文件
var files = document.getElementById('changeFile').files[0];
var fileArr = [files];
//经过调试是不进ajax的
$.ajax({
type:"post",
url:uploadUrl,
data:fileArr,
dataType: 'json',
contentType: 'application/json;charset=utf-8',
success: function(data) {
console.log(data);
},
error: function(data){
}
});
}
}After debugging, ajax is not entered in js. I don’t know what is the problem? Please help, thank you!
In php, $pic = $_FILES['myFiles']['tmp_name']; How to get the value of $pic? During debugging, I found that this value cannot be obtained. In js, I convert the obtained file information into an array and pass it through ajax post. How do I pass this array to php?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You are passing mixed data, try changing contenttype and processData to false
processData should be set to false
You need to use formData to submit using Ajax