#寫一個比較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";
// 創(chuàng)建文件夾
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 的值要怎麼取得?調試中我發(fā)現這個值是獲取不到的。在js中我把取得到的檔案資訊都轉為一個陣列透過ajax的post傳遞,這個陣列要怎麼傳給php呢?
光陰似箭催人老,日月如移越少年。
你傳的是混合型數據,把contenttype和processData改成false試試
$.ajax({
type:"post",
url:uploadUrl,
data:{ "yourfiles": files} //這里改成obj對象,
dataType: 'json',
contentType: false,
processData:false,
success: function(data) {
console.log(data);
},
error: function(data){
}
});
processData 要設為 false
你使用Ajax 提交 需要 需要 使用 formData 來配合
var file = document.getElementById('changeFile').files[0]
var uploadUrl = "./php/data.php?action=upload_file"
var fd = new FormData()
fd.append('myFiles', file)
$.ajax({
type:"post",
url:uploadUrl,
data: fd,
processData: false,
contentType: false,
success: function(data) {
console.log(data);
},
error: function(data){
}
})