Programming, Network, Office, Hardware, Software, Design, Photography.. I am just a GEEK
Related Articles
Sử dụng Ajax để gửi dữ liệu lên Server là kỹ thuật đã được sử dụng từ lâu giúp truyền tải dữ liệu 1 cách nhanh chóng hơn. Trong bài này, Ngô Tôn sẽ hướng dẫn cách Upload nhiều file trong PHP sử dụng Ajax.
Cấu trúc cơ bản của Ajax
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$.ajax({ type: 'POST', url: 'data.php', data: { id: "1", name: "Ngo Ton" }, dataType: 'html', success: function(data) { // code here }, error: function() { // code here } }); |
- type: Kiểu gửi dữ liệu, có thể là POST hoặc GET, giống với thuộc tính method trong form
- url: Đường dẫn xử lý dữ liệu, tương tự như thuộc tính action trong form
- data: Tập hợp các biến dữ liệu gửi lên server
- dataType: Kiểu dữ liệu có thể html, text, json, xml
- success: Hàm chạy khi nhận dữ liệu thành công
- error: Hàm chạy khi có lỗi xảy ra
Upload multi file in PHP with Ajax
Để gửi được file về server ta sẽ phải dùng FormData()
|
1 |
var formData = new FormData(); |
Input file có dạng sau
|
1 |
<input type="file" name="attachment[]" id="attachment" multiple> |
Ta sẽ tiến hành Append vào FormData
|
1 2 3 4 |
var ins = document.getElementById('attachment').files.length; for (var x = 0; x < ins; x++) { formData.append("myfile[]", document.getElementById('attachment').files[x]); } |
Ajax
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$.ajax({ type: 'POST', url: 'data.php', data: formData, enctype: 'multipart/form-data', contentType: false, processData: false, success: function(data) { // code here }, error: function() { // code here } }); |
Ta bắt buộc phải có 2 thuộc tính contentType: false, processData: false
PHP
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$output_dir = "public/files/"; $fileCount = count($_FILES["myfile"]["name"]); for($i=0; $i < $fileCount; $i++) { $fileName = $_FILES["myfile"]["name"][$i]; $fullpath = $output_dir.$fileName; $file_info = pathinfo($fullpath); $uploaded_filename = $file_info['filename']; $count = 1; while (file_exists($fullpath)) { $info = pathinfo($fullpath); $fullpath = $info['dirname'] . '/' . $uploaded_filename . '(' . $count++ . ')' . '.' . $info['extension']; } move_uploaded_file($_FILES["myfile"]["tmp_name"][$i],$fullpath); } |
Ta sẽ đếm số lượng file dựa vào tên bằng hàm count($_FILES[“myfile”][“name”]). Sau đó chạy vòng lặp lấy thông tin của file pathinfo(), nếu trùng tên thì thêm “(số lượng)” vào sau tên và tiến hành upload lên server move_uploaded_file($_FILES[“myfile”][“tmp_name”][$i],$fullpath);
Vậy là xong, chúc các bạn thành công.
* Bonus cho các bạn
Nếu ta muốn truyền dữ liệu dạng mảng bằng FormData ta sẽ làm như sau:
|
1 2 3 4 5 6 7 8 |
var array = [ {'id':1, 'name':'A' }, {'id':2, 'name':'B' } ]; |
Ta sẽ Append vào FormData:
|
1 |
formData.append('arr',JSON.stringify(array)); |
Ở đây, hàm JSON.stringify() sẽ chuyển từ mảng sang chuỗi Json.
Phía PHP server sẽ nhận như sau:
|
1 |
$array = json_decode($_POST['arr'],true); |
Ta dùng hàm json_decode() để chuyển đổi chuỗi json về mảng. Chú ý là phải có đối số thứ hai là true.
Buy me a coffee
Leave a Reply