jQuery.upload.js是一個基于jQuery的上傳插件,它允許用戶上傳多張圖片或文件,與其他插件相比,它顯示和使用更加簡單,易于用戶操作。
在開始使用jQuery.upload.js之前,需要引入jQuery庫和jQuery.upload.js文件,如下所示:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="jquery.upload.js"></script>
使用jQuery.upload.js上傳多張圖片或文件,可以按以下步驟進行:
$('#upload_file').upload({
url: 'upload.php', //上傳文件的地址
multiple: true, //允許上傳多張圖片或文件
dataType: 'json', //返回數據類型為json
onSuccess: function(files, data, xhr, pd) { //上傳成功后執行的函數
console.log(data);
}
});
可以發現,使用jQuery.upload.js主要需要設置上傳文件的地址、是否允許多張上傳、返回數據類型和成功后的回調函數等內容,除此之外其他設置可以忽略。
使用jQuery.upload.js上傳多張圖片或文件時,需要在HTML中設置一個input標簽,并設置一個ID名,如下所示:
<input type="file" id="upload_file" name="file[]" multiple="multiple" />
注意:multiple="multiple"屬性是指允許多張上傳,name="file[]"和后臺接收的參數名相對應,以便后臺獲取到上傳文件的名稱等信息。
最后,在后臺代碼中可以使用如下PHP代碼獲取上傳文件的信息:
$file = $_FILES['file'];
$count = count($file['name']);
for ($i = 0; $i < $count; $i++) {
$name = $file['name'][$i]; //獲取文件名
$tmp_name = $file['tmp_name'][$i]; //獲取臨時文件名
move_uploaded_file($tmp_name, $name); //移動文件
}
以上就是使用jQuery.upload.js上傳多張圖片或文件的全部內容,希望對大家有所幫助。