jQuery上傳PHP是一種非常常用的技術,廢話不多說,我們先來看一下關于jQuery上傳PHP的一些例子。
$(document).ready(function(){
$("#upload").change(function(){
var formData = new FormData();
formData.append('file', $('#upload')[0].files[0]);
$.ajax({
url: 'process.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(data){
alert(data);
},
error: function(){
alert('上傳失敗');
}
});
});
});
這段代碼是一個典型的jQuery上傳文件到PHP的例子,它首先在頁面加載完成后,監聽上傳按鈕的變化。使用FormData創建一個新對象,將上傳文件添加至formData中,然后使用$.ajax()方法向服務器發送POST請求。如果上傳成功,將返回一個‘success’信息;否則,將返回一個‘上傳失敗’信息。
接下來,我們來看看如何處理上傳文件。
if(isset($_FILES['file'])){
$file_name = $_FILES['file']['name'];
$file_type = $_FILES['file']['type'];
$file_size = $_FILES['file']['size'];
$file_tmp = $_FILES['file']['tmp_name'];
if(move_uploaded_file($file_tmp, 'uploads/'.$file_name)){
echo "文件上傳成功";
}
else{
echo "文件上傳失敗";
}
}
這段PHP代碼將會處理客戶端上傳的文件。如果成功,則將文件保存到指定的目錄中,然后向客戶端發送上傳成功信息;否則,將向客戶端發送上傳失敗信息。
最后,我們來看看如何在jQuery中使用進度條監控文件上傳進度。
$("#upload").on('change', function(){
var uploadFile = $(this)[0].files[0];
var formData = new FormData();
formData.append('upload_file', uploadFile);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
xhr: function(){
var xhr = $.ajaxSettings.xhr();
xhr.upload.onprogress = function(evt){
var loaded = evt.loaded; //已經上傳大小
var total = evt.total; //附件總大小
var percent = Math.floor(100*loaded/total); //已經上傳百分比
$(".progress-bar").attr('aria-valuenow',percent).css("width",percent+"%").text(percent+"%");
}
return xhr;
}
});
});
通過監聽onprogress事件,我們可以根據已上傳的大小和附件總大小計算出上傳進度,并根據進度更新進度條。
這就是關于jQuery上傳PHP的一些例子。無論是上傳文件還是顯示進度條,jQuery都可以發揮出其最大的作用。