写一个比较low的文件上传功能,需要点击 上传 才会上传到服务器中。
但是经过测试,始终上传不了,不知道是怎么回事?下面是我的代码:
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){
}
});
}
}
经过调试,在js这里,是不进 ajax 的,不知道是哪里出了问题?请帮帮忙,谢谢!
在php 中, $pic = $_FILES['myFiles']['tmp_name'];
$pic 的值要怎么获取?调试中我发现这个值是获取不到的。在js中我把获取到的文件信息都转为一个数组通过ajax的post传递,这个数组要怎么传给php呢?
你传的是混合型数据,把contenttype和processData改成false试试
processData 要设为 false
你使用Ajax 提交 需要 需要 使用 formData 配合