Tệp đầu vào tiến trình tải tệp Ajax. Tải tập tin lên máy chủ bằng ajax
Cái này rất bài báo thú vị, về cách upload file lên server bằng công nghệ AJAX. Như bạn đã biết, ajax là javascript không đồng bộ, cho phép bạn làm việc với máy chủ mà không cần tải lại các trang trong trình duyệt. Công nghệ này rất hữu ích để thực hiện ý tưởng của chúng tôi: tải tệp lên máy chủ mà không cần tải lại các trang trình duyệt. Ý tưởng của chúng tôi cũng có thể được thực hiện theo những cách khác; hãy đọc về tất cả những điều này bên dưới trong bài viết của chúng tôi.
Hôm nay chúng ta sẽ học gì? Tải tệp lên máy chủ bằng AJAX + jQuery + PHPViệc triển khai tải tệp lên máy chủ bằng AJAX phức tạp hơn một chút so với việc chỉ gửi văn bản POST hoặc NHẬN yêu cầu. Nhưng nó không quá khó để hiểu và thành thạo kỹ thuật này. Nếu bạn chưa hiểu đầy đủ về cách AJAX và PHP tương tác với nhau, tôi khuyên bạn trước tiên nên đọc bài viết về nó. Nhưng ngay cả khi bạn không biết công nghệ AJAX hoạt động như thế nào thì cũng không sao, vì chúng ta sẽ sử dụng thư viện jQuery và plugin ajax_upload. Và nếu bạn làm theo tất cả các ví dụ và hướng dẫn từng bước, thì bạn sẽ có thể triển khai một trình tải tệp tuyệt vời lên máy chủ.
Bản chất của phương pháp: Chúng tôi sẽ tạo một hình ảnh HTML của trình tải, trong đó sẽ chứa: trường nhập tệp, nút xác nhận, khối trạng thái tải xuống (nó sẽ được hiển thị: “đã tải” hoặc “lỗi”), một ul list (các phần tử DOM mới sẽ được thêm vào, nói cách khác là danh sách các tệp đã tải xuống). Chúng tôi sẽ tạo một trình xử lý cho nút xác nhận trong JS, sử dụng cú pháp jQuery và chuyển tệp tới plugin ajax_upload. Plugin này sẽ gửi tệp và tất cả dữ liệu cần thiết đến phía máy chủ. Phía máy chủ, đây là của chúng tôi ứng dụng PHP, thao tác này sẽ lưu tệp vào thư mục mong muốn và trả về kết quả công việc. Hoặc đơn giản là nó sẽ trả về một thông báo lỗi nếu có sự cố xảy ra. Chúng ta có một nhiệm vụ, hãy bắt đầu nhé?
Mã ajax HTML của trình tải
Hãy tạo ra tập tin HTML, sẽ chứa khung của trình tải tệp của chúng tôi. Tôi sẽ cung cấp cho bạn mã HTML, sau đó tôi sẽ giải thích nội dung của nó.
Cập nhật dử liệu
Như bạn có thể thấy, mã HTML của trình tải ajax phức tạp đến mức không thể chịu nổi. Nhưng vẫn cần phải làm rõ cái gì là cái gì:
< div id=" upload" >Tải tệp lên là nút xác nhận của chúng tôi để tải tệp lên máy chủ. Dưới đây là mã CSS cho thiết kế.
< span id=" status" >- đây là khối mà chúng ta sẽ đặt phản hồi từ phía máy chủ của ứng dụng. "Đã tải" hoặc "Lỗi".
< ul id=" files" >- đây là danh sách các tệp đã được tải lên máy chủ bởi trình tải lên jquery + ajax của chúng tôi.
Như đã hứa, tôi sẽ cung cấp mã kiểu CSS bên dưới cho các nút xác nhận tải tệp lên:
#upload( lề:30px 200px; đệm:15px; font-weight:bold; font-size:1.3em; font-family:Arial, Helvetica, sans-serif; text-align:center; nền:#f2f2f2; color: #3366cc; đường viền:1px rắn #ccc; chiều rộng:150px; con trỏ:con trỏ !quan trọng; -moz-border-radius:5px; -webkit-border-radius:5px; )
Ứng dụng PHP phía máy chủ
Như đã đề cập ở phần bản chất của phương thức, phía máy chủ chỉ sao chép (lưu) tệp và trả về kết quả công việc của nó (“Đã tải” hoặc “Lỗi”). Nhưng đây chỉ là một ví dụ mà bạn không nên dựa vào. Không có sự bảo vệ khỏi hacker hack và không có giới hạn kích thước tệp. Nếu bạn tạo bộ nạp khởi động để sử dụng công khai, hãy đảm bảo triển khai các bổ sung trên. Dưới đây là mã PHP cho một trình tải lên tệp mẫu, tạo một tệp có tên upload-file. php và đặt đoạn mã sau vào đó:
Nếu bạn nhìn kỹ, bạn sẽ nhận thấy rằng mọi thứ ở đây đều được viết bằng văn bản tiếng Nga, hay đúng hơn là:
$uploaddir – thư mục trên máy chủ nơi các tập tin sẽ được tải lên.
$ file – tên của tệp đã tải xuống, có đính kèm đường dẫn đến thư mục máy chủ.
Điều đơn giản nhất đã được thực hiện. Phần thú vị sắp đến – phía jQuery + AJAX của trình tải tệp lên.
Mã JavaScript
Giống như bất kỳ ứng dụng nào khác sử dụng JS, mã phải được đặt ở phần đầu của tài liệu. Khác lưu ý quan trọng: trước khi viết mã JS này, đừng quên thêm trước thư viện jQuery và plugin tải lên ajax_. Nếu bạn đã làm điều đó thì thật tuyệt, hãy bắt đầu viết một số mã:
$(function())( var btnUpload=$("#upload"); var status=$("#status"); new AjaxUpload(btnUpload, ( action: "upload-file.php", //Tên của tên trường nhập tệp: "uploadfile", onSubmit: function(file, ext)( if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext)))( // Xác thực tệp tiện ích mở rộng status.text (Chỉ các tệp JPG, PNG, GIF"); return false; ) status.text("Đang tải lên..."); ), onComplete: function(file, reply)( //Xóa trạng thái văn bản trạng thái. text("") ; //Thêm các tập tin đã tải lên vào trang tính if(response==="success")( $("").appendTo("#files").html("
"+file).addClass("thành công"); ) else( $("").appendTo("#files").text(file).addClass("error"); ) ) )); ));
Đầu tiên, chúng ta khởi tạo quyền truy cập vào nút xác nhận tải lên và ghi nó vào biến btnUpload. Đồng thời, chúng ta có quyền truy cập vào khối tin nhắn máy chủ (trạng thái). Tiếp theo là hoạt động với plugin tải lên ajax. Chúng tôi tạo một đối tượng mới và chỉ định các tham số chúng tôi cần:
Hành động – đường dẫn đến trình xử lý máy chủ của chúng tôi đối với các tệp đã tải lên.
Tên là tên của trường đầu vào mà từ đó chúng ta sẽ nhận được tệp được tải lên máy chủ.
onSubmit – Các hàm được thực thi trước khi ajax tải tệp lên máy chủ. Trong trường hợp của chúng tôi, đây là quá trình xác thực các tệp đã tải xuống (kiểm tra các tiện ích mở rộng được hỗ trợ). Nhưng một lần nữa, việc kiểm tra, như người ta nói đối với những người “cận tâm”, việc kiểm tra này rất dễ bị bỏ qua, vì vậy bạn nên kiểm tra lại ở phía máy chủ của ứng dụng.
trạng thái. văn bản - văn bản được hiển thị trong quá trình ajax tải tệp lên máy chủ. Xin lưu ý rằng nếu các tập tin không được hỗ trợ, thông báo lỗi sẽ được hiển thị.
onComplete – Chạy chức năng khi tệp được tải lên máy chủ. Trong chức năng này: xóa giá trị của status.text; thêm các tập tin đã tải xuống vào bảng tập tin.
Như bạn có thể thấy, việc tải tệp lên máy chủ bằng AJAX dễ dàng hơn bạn tưởng. Tuy nhiên, tôi vẫn bối rối trước sự hiện diện của thư viện jQuery trong phương thức này. Và nếu bạn biết cách triển khai tải xuống tệp ajax mà không cần sử dụng jQuery, vui lòng cho tôi biết trong phần bình luận của bài viết.
Tải nhiều tệp lên máy chủ bằng AJAX, jQuery, PHPNếu vì nhu cầu cá nhân của bạn, bạn cần tải một số tệp lên máy chủ một cách đẹp mắt bằng AJAX và PHP, thì bạn sẽ phải sử dụng một số bổ sung cho thư viện jQuery. Cụ thể là:
Plugin biểu mẫu jQuery v2.18
Plugin giúp ajax hoạt động chính xác với các trường và biểu mẫu.
Kiếm ở đâu: www.malsup.com/jquery/form/
Plugin jQuery BlockUI v2.14
Một plugin cho phép bạn hiển thị các thông báo lỗi đẹp mắt.
Kiếm ở đâu: www.malsup.com/jquery/block/
Plugin tải lên nhiều tệp jQuery v1.31
Một plugin cho thư viện jQuery cho phép bạn tải lên nhiều tệp cùng một lúc.
Kiếm ở đâu: www.fyneworks.com/jquery/multiple-file-upload/
Nếu bạn đã tải xuống tất cả các plugin này và tất nhiên là cả thư viện jQuery, chúng ta có thể bắt đầu phát triển. Ngoài ra, chúng ta cần tạo một tệp PHP, như trong ví dụ trước, tệp này sẽ xử lý dữ liệu ở phía máy chủ. Hãy gọi nó là: doajaxfileupload.php. Bây giờ, chi tiết hơn.
Plugin jQuery Form là một plugin tuyệt vời, nó được sử dụng để gửi tệp đến máy chủ bằng phương thức ajax. Plugin này cũng có thể được sử dụng theo những cách khác.
Plugin jQuery BlockUI – được sử dụng cho mục đích thẩm mỹ, để hiển thị các thông báo đẹp mắt về hoạt động chính xác của Plugin tải lên nhiều tệp.
Plugin tải lên nhiều tệp – plugin này là nền tảng của trình tải lên nhiều tệp của chúng tôi. Nó cho phép bạn chọn nhiều tập tin. Đồng thời, nó có các cài đặt linh hoạt để giới hạn loại tệp, đặt số lượng tệp được tải xuống, kiểm tra tệp trùng lặp (nếu tệp đó đã được chọn), v.v.
Bây giờ chúng ta đã có mọi thứ mình cần, chúng ta có thể bắt đầu phát triển tập lệnh ajax để tải xuống một số tệp.
Trong tệp index.php, tôi nghĩ mọi thứ đều rõ ràng. Đây là biểu mẫu tải lên tệp thực tế và thư viện jQuery cũng như tất cả các plugin cần thiết để làm việc với ajax đều được kết nối. Một vài lời về cấu hình mã và plugin:
$(".MultiFile").MultiFile(( chấp nhận:"jpg|gif|bmp|png|rar", max:15, STRING: ( xóa:"remove", đã chọn:"Đã chọn: $file", bị từ chối:" Loại tệp không hợp lệ: $ext!", trùng lặp:"Tệp này đã được chọn:\n$file!" )));
Chỉ định phần mở rộng của tệp được phép tải xuống, cho biết số lượng tệp được tải xuống tối đa.
$("#loading").ajaxStart(function())((( ... ));
Hiển thị và xóa hoạt ảnh khi tệp ajax được tải lên máy chủ.
$("#uploadForm").ajaxForm(( ... ));
Chịu trách nhiệm gửi tập tin đến máy chủ.
doajaxfileupload.php là phía máy chủ của ứng dụng của chúng tôi, mọi thứ trong đó khá rõ ràng, nếu cần, bạn có thể chỉnh sửa theo sở thích của mình.
Có lẽ tất cả chỉ là việc tải một số tệp lên máy chủ bằng AJAX, jQuery và PHP. Tôi hy vọng mọi thứ sẽ diễn ra tốt đẹp với bạn như đối với tôi.
Tải tệp lên bằng JS + IFRAME + PHPNếu bạn không phải là người yêu thích vẻ đẹp mà là chức năng và mã nhỏ gọn thì có một tin tốt cho bạn. Bạn có thể tải tệp lên máy chủ mà không cần tải lại trang, không chỉ sử dụng AJAX và tất cả các loại plugin jQuery. Ngoài ra, điều này có thể được thực hiện bằng cách sử dụng JavaScript, iframe và php đơn giản (luôn cần thiết). Thực tế là việc sử dụng AJAX không thể thực hiện tải tệp lên. XmlHttpRequest không có khả năng tải xuống tệp. Mặc dù, điều này có thể được phá vỡ. Sử dụng công nghệ Remote Scripting. Cụ thể là sử dụng IFRAME. Điều thú vị là chúng ta sẽ tạo một biểu mẫu như khi tải tệp lên thông thường, chỉ ở dạng chúng ta sẽ chỉ định target="rFrame" , tham chiếu đến một iframe ẩn, sẽ được tải lại nhưng điều này sẽ không được hiển thị trực quan. Sau khi khởi động lại, một lệnh gọi hàm JS sẽ được trả về từ phía máy chủ PHP của ứng dụng, thao tác này sẽ hoàn tất quá trình tải xuống tệp.
Trình tải này đơn giản, bao gồm hai tệp và nặng khoảng 1 KB. Vào vấn đề. Tạo tệp HTML của bạn và đặt mã vào đó:
hàm onResponse(d) ( eval("var obj = " + d + ";"); notification("File " + obj.filename + (obj.success ? " " : " NOT ") + "loaded."); )
Ở đây, chúng ta thấy hầu hết các thành phần giống như khi chỉ tải tệp lên máy chủ, chỉ: target=" rFrame" - mà chúng ta đã nói ở trên; hàm onResponse – nó nhận đối tượng JSON mà chúng tôi gửi từ phía máy chủ. Ngoài ra, đừng quên chỉ định nhiều phần/dữ liệu biểu mẫu, nếu không có biểu mẫu này sẽ không tải tệp. Tiếp theo, hãy xem mã máy chủ trong tệp handler.php:
Phía máy chủ của ứng dụng tương tự như ví dụ đầu tiên của bài viết này, ngoại trừ đầu ra của mã javascript, sẽ được thực thi sau khi iframe được tải lại và sẽ thông báo cho chúng tôi về kết quả tải tệp.
Một kịch bản rất đơn giản và thú vị. Tất nhiên bạn có thể cải thiện nó.
Có rất nhiều thư viện trên Internet thực hiện việc tải file lên máy chủ. Vì vậy, nhà phát triển có nhiều lựa chọn về việc sử dụng công cụ nào. Nhưng đôi khi chúng khá khó khăn đối với người mới bắt đầu. Ban đầu, đối với bài viết, người ta quyết định viết một thư viện đơn giản, dễ hiểu. Nhưng may mắn thay, có khá nhiều thứ được tìm thấy trên Internet thực hiện đơn giản tải xuống các tập tin mà nó đã được quyết định sử dụng. Nó được gọi là dmuploader và là một plugin jQuery.
Sử dụng dmuploader, chúng tôi sẽ tạo một trình tải lên có thiết kế tương tự như trình tải lên được triển khai trong wordpress. Với tính năng kéo và thả và nhấp chuột! Hãy vượt qua!
Cấu trúc dự án:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | #dropzone ( border : 4px gạch ngang #bbb ; bán kính đường viền : 5px ; color : #444 ; đệm : 25px ; căn chỉnh văn bản : center ; ) #dropzone .title ( font-size : 20px ; ) #dropzone input ( -moz -màu sắc viền dưới cùng: không có ; -moz-border-left-colors: không có ; -moz-border-right-colors: không có ; -moz-border-top-colors: không có ; màu viền: trong suốt ; viền- hình ảnh: không có; con trỏ: con trỏ; hướng: ltr; lề: 0; độ mờ: 0; vị trí: tuyệt đối; bên phải: 0; trên cùng: 0; biến đổi: dịch(-300px, 0px) tỷ lệ(4 ) ; ) #dropzone. khoảng trình duyệt ( nền : #f7f7f7 ; đường viền : 1px Solid #ccc ; color : #555 ; con trỏ : con trỏ ; cỡ chữ : 16px ; chiều cao : 46px ; chiều cao dòng : 44px ; phần đệm : 0 36px ; ) #dropzone .browser span:hover ( border : 1px Solid #999 ; ) |
Javascript:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | // index.php $(document).ready (function () ( $("#dropzone") .dmUploader (( url: "upload.php" , dataType: "json" , maxFileSize: 256 * 1014 , allowTypes: " image/*" , onBeforeUpload: function (id) ( $) .show () ; ) , onUploadSuccess: function (id, reply) ( $("div#output" ) .html (" ![](https://viws.ru/wp-content/uploads/2019/05/"
+
response.data
.url
+
) " ) ; ) , onUploadError: function (id, tin nhắn) ( $.jGrowl ("Tệp: " + id + " không tải lên được: " + tin nhắn, ( chủ đề: "error" ) ) ; ) , onFileTypeError: function (tệp ) ( $.jGrowl (, ( theme: "error" ) ) ; ) , onFileSizeError: function (tệp) ( $.jGrowl ("Tệp quá lớn!!" , ( theme: "error" ) ) ; ) , onFallbackMode: function (tin nhắn) ( $.jGrowl ("Trình duyệt của bạn không được hỗ trợ 8(" , ( theme: "error") ) ; ) ) ; ) ) ; |
Tất cả! Phần khách hàng đã sẵn sàng. Chi tiết hơn một chút:
Máy chủ
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | // upload.php require_once __DIR__ . "/protected/bootstrap.php" ; if (! IS_POST() || ! $_FILES ) ( stopAndResponseMessage("error" , "POST only, FILES" ) $files = ConvertFileInformation($_FILES ) ; if (! isset ($files [ "file" ] ) ) ( stopAndResponseMessage("error" , "Tệp chưa được tải lên" ) ; ) $file = $files [ "file" ] ; if ($file [ "error" ] !== UPLOAD_ERR_OK) ( stopAndResponseMessage( "error" , uploadCodeToMessage( $file [ "error" ] ) ) ; ) $mimeType = GuessMimeType($file [ "tmp_name" ] ) ; if (! $mimeType ) ( stopAndResponseMessage("error" , "Loại tệp không được nhận dạng!" ) ; ) $validMimeType = [ "image/png" , "image/jpeg" ] ; if (! in_array ($mimeType , $validMimeType ) ) ( stopAndResponseMessage( "error" , "Chỉ có thể tải png và jpeg!" ) ; ) $ size = kích thước tệp ($ file [ "tmp_name" ] ) ; if ($size > 256 * 1024 ) ( stopAndResponseMessage("error" , "Tệp quá lớn!! ) ; ) $uploadDir = __DIR__ . "/files" ; if (! is_writable ($ uploadDir ) ) ( stopAndResponseMessage( "error" , "Thư mục tập tin không thể ghi được." ); ) $tên tệp = thời gian () . "-" . mt_Rand (0000 , 9999 ) . "." . đoánFileExtension($mimeType) ; if (! move_uploaded_file ( $file [ "tmp_name" ] , $uploadDir . "/" . $filename ) ) ( stopAndResponseMessage("error" , "Tệp không được di chuyển!" ) ; ) sendResponse("upload" , [ " url " => "files/" . $filename ] ) ; |
Đáng để chỉ ra Đặc biệt chú ý trên hàm GuessMimeType. Sử dụng phần mở rộng FileInfo, nó xác định loại MIME tài liệu. Như có thể thấy từ mã, loại và kích thước của tệp được gửi từ trình duyệt không được phát hiện trong quá trình xác minh. Chúng có thể bị giả mạo bởi kẻ tấn công.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //protected/inc/func.php function GuessMimeType($path , $magicFile = null ) ( if (! is_file ($path ) ) ( return null ; ) if (! is_readable ($path ) ) ( return null ; ) if (! $finfo = new \finfo(FILEINFO_MIME_TYPE, $magicFile ) ) ( return ; ) return $finfo -> file ($path ) ; ) |
Dựa trên bản demo, bạn có thể đào sâu kiến thức của mình trong lĩnh vực này. TRONG mã nguồn Các liên kết được cung cấp để nghiên cứu thêm. Cuộc thí nghiệm!
Chắc hẳn nhiều người đã từng gặp câu hỏi “Làm cách nào để tải tệp lên máy chủ bằng JS và JQuery?”.
Và có lẽ không phải ai cũng làm được điều này. Trên thực tế, mọi thứ không khó như bạn tưởng.
TRONG bài học này Mình sẽ mô tả quá trình upload file lên máy chủ (hosting).
Công nghệ Ajax được sử dụng để trao đổi dữ liệu giữa trình duyệt và máy chủ web.
Phiên bản JQuery được sử dụng trong công thức: 2.2.2.
Chúng tôi tạo đánh dấu nguyên thủy từ thẻ html, đầu và thân.
Trong thẻ head, bạn cần đưa đường dẫn đến thư viện jquery.
Trong ví dụ này tôi đang sử dụng jquery từ máy chủ google.
TRONG thẻ cơ thể Chúng tôi tạo một biểu mẫu bao gồm thẻ đầu vào và nút.
Sử dụng input type="file" bạn chọn một tệp để tải.
Cần có thẻ nút để chạy mã js để truyền tệp.
Chúng tôi đặt biểu mẫu name="uploader", enctype="multipart/form-data", phương thức="POST".
Tên biểu mẫu: name="người tải lên"
Phương thức mã hóa dữ liệu biểu mẫu: enctype="multipart/form-data"
Phương thức truyền dữ liệu: phương thức="POST"
Gửi tập tin này: Tải lên
Tất cả mã đánh dấu html và js:
Gửi tập tin này: Tải lên
Hãy chuyển sang mã script java.
Để chuyển file, bạn phải chuyển toàn bộ biểu mẫu:
$("biểu mẫu").submit(function(e) (
Chúng tôi đọc dữ liệu biểu mẫu thành một biến:
var formData = new FormData($(this));
Tiếp theo, chúng tôi sử dụng công nghệ ajax để truyền dữ liệu lên máy chủ web.
Nếu quá trình truyền tệp thành công, một thông báo sẽ được hiển thị trong cửa sổ bật lên.
Nếu xảy ra lỗi hoặc thiếu tệp, một thông báo sẽ hiển thị kèm theo nội dung về sự cố đã phát sinh.
$.ajax(( url: "file.php", type: "POST", data: formData, async: false, thành công: function (msg) ( Alert(msg); ), error: function(msg) ( Alert( "Error!"); ), cache: false, contentType: false, processData: false ));
Tất cả mã đều ở dạng tập lệnh java với sử dụng jquery:
Bây giờ tất cả những gì còn lại là mã phía máy chủ để nhận dữ liệu từ biểu mẫu phương thức ĐĂNG lời yêu cầu.
Chúng tôi lấy thư mục gốc của trang web và chỉ định một thư mục để tải xuống các tệp:
$uploaddir = $_SERVER["DOCUMENT_ROOT".DIRECTORY_SEPARATOR."uploads".DIRECTORY_SEPARATOR;
Đọc tệp đã tải xuống:
$uploadfile = $uploaddir . tên cơ sở($_FILES["userfile"]["name"]);
Kiểm tra xem tập tin đã được tải hay chưa.
Theo dữ liệu đến, chúng tôi chỉ định một tin nhắn đi kèm.
Nếu tệp không được tải lên, hãy tải nó lên thư mục được chỉ định trong $uploadfile:
if (move_uploaded_file($_FILES["userfile"]["tmp_name"], $uploadfile)) ( $out = "Tệp hợp lệ và đã được tải lên thành công.\n"; ) else ($out = "Có thể bị tấn công tải lên tệp !\N"; )
Khi các hành động được chỉ định được thực hiện, một phản hồi sẽ được trả về.
Tất cả mã trong php:
Tất cả Mã HTML bao gồm cả j:
Gửi tệp này: Tải lên $("form").submit(function(e) ( var formData = new FormData($(this)); $.ajax(( url: "file.php", type: "POST", dữ liệu: formData, async: false, thành công: function (msg) ( Alert(msg); ), error: function(msg) ( Alert("Error!"); ), cache: false, contentType: false, processData: false )); e.preventDefault(); ));
Tải file mã nguồn:
Tải tập tin hoặc hình ảnh lên máy chủ là một công việc khá điển hình. Nhưng tiến trình không đứng yên, và do đó, tất nhiên, bây giờ tôi muốn các tệp được tải xuống ở lý lịch. Theo quy định, trước đây điều này có thể được thực hiện bằng cách sử dụng công nghệ đèn flash hoặc khung nội tuyến. Ngoài ra, nhiều người sử dụng các plugin như jQuery Form Plugin hoặc Ajax File Upload Plugin hoặc Multiple File Upload Plugin và rất nhiều plugin khác. Với sự ra đời của đối tượng FormData, mọi thứ đã trở nên đơn giản hơn nhiều. FormData() cho phép bạn soạn một tập hợp dữ liệu để gửi đến máy chủ bằng XMLHttpRequest.
Chúng ta hãy thử viết mã của riêng mình mà không cần bất kỳ plugin nào (tất nhiên là ngoại trừ khung jQuery) để tải hình ảnh hoặc tệp lên máy chủ ở chế độ nền. Nói chung, thuật toán hành động của chúng tôi sẽ giống như thế này: điền dữ liệu vào các trường biểu mẫu. Các trường có thể là bất cứ thứ gì, văn bản, vùng văn bản, vùng chọn và tệp. Khi bạn chọn tệp, nhờ mã jQuery của chúng tôi, các tệp này sẽ được tải xuống ở chế độ nền vào một thư mục tạm thời trên máy chủ, ví dụ như “tmp”. Tiếp theo, khi bạn nhấp vào nút gửi của biểu mẫu, dữ liệu sẽ được gửi đến tập lệnh máy chủ, tập lệnh này sẽ xử lý dữ liệu này. Hãy tưởng tượng rằng đây là những bài viết. Chúng tôi sẽ ghi lại dữ liệu được truyền vào cơ sở dữ liệu với một id duy nhất. Tiếp theo, chúng tôi sẽ tạo một thư mục trong thư mục “hình ảnh” với số “id” duy nhất và nếu chúng tôi có bất kỳ tệp nào trong thư mục “tmp”, chúng tôi sẽ sao chép chúng vào thư mục “id” đã tạo và sau đó xóa “tmp” " thư mục. Tóm lại: chúng ta điền hình ảnh vào tmp làm nền, khi submit form chúng ta ghi dữ liệu vào cơ sở dữ liệu sẽ có một số bản ghi duy nhất. Chúng tôi tạo một thư mục có số này và di chuyển các tệp của chúng tôi đến đó. Tất cả. Trong bài viết này, chúng tôi sẽ không xem xét việc tải lên cơ sở dữ liệu và sao chép tệp. Tôi nghĩ sẽ có điều gì đó dành cho mọi người ở đây. Chúng tôi sẽ tập trung vào một điều - tải không đồng bộ hình ảnh (hoặc tập tin).
Vì vậy, đây là phần html của chúng tôi. Ở đây chúng ta sẽ chú ý đến thực tế là chúng ta có một tệp GIF có hình ảnh của trình tải trước (vòng tròn lặp), mà chúng ta ẩn khỏi hiển thị bằng các kiểu. Chúng ta cũng sẽ gán id = file cho trường file và enctype = “multipart/form-data” cho biểu mẫu. Tên trường tệp sẽ là tệp, tức là. để chúng ta có thể làm việc với mảng, vì chúng ta được phép tải lên nhiều tệp (nhiều thuộc tính).
#preloader (khả năng hiển thị: ẩn;) Thêm thông tin 
Trong biểu mẫu này, ngoài trường tệp, chúng tôi có một số trường chẳng hạn: input=text. Những thứ kia. phía trước chúng tôi dạng thông thường ví dụ: đối với bảng quản trị, đây là tập hợp các trường bạn cần. Để bắt đầu, nếu muốn, bạn có thể kiểm tra hoạt động của tập lệnh bằng cách viết các dòng hiển thị mảng FILES ở đầu tệp:
//upload.php print_r($_FILES);
Bây giờ hãy viết tập lệnh máy chủ của chúng ta, tập lệnh này sẽ được gọi từ sử dụng jQuery. Nhiệm vụ của nó là chuyển các tệp đã tải lên từ thư mục tạm thời của máy chủ sang thư mục tạm thời của máy chủ, chẳng hạn như chúng tôi đã quyết định trong “tmp”, sau đó hiển thị chúng.
//upload.php function show_dir($dir) // hàm hiển thị ảnh từ thư mục tmp ( $list = scandir($dir); unset($list,$list); foreach ($list as $file) ( echo " "; ) ) foreach ($_FILES as $key => $value) ( //di chuyển tệp sang tmp move_uploaded_file($value["tmp_name"], "tmp/".$value["name"]); ) show_dir( "./tmp/");
Và bây giờ là tập lệnh js của chúng tôi, tập lệnh này sẽ tải các tệp của chúng tôi lên máy chủ ở chế độ nền. Tất cả điều kỳ diệu sẽ được thực hiện nhờ đối tượng FormData(). Chúng tôi sẽ thêm mã này vào cuối index.php trước thẻ.
$(document).ready(function())( $("#preloader").hide(); $("#file").bind("change", function())( var data = new FormData() ; var error = ""; jQuery.each($("#file").files, function(i, file) ( if(file.name.length< 1) { error = error + " Файл имеет неправильный размер! "; } //Проверка на длину имени if(file.size >1000000) ( error = error + " File " + file.name + " quá lớn."; ) // Kiểm tra kích thước tệp if(file.type != "image/png" && file.type != "image/jpg " " && !file.type != "image/gif" && file.type != "image/jpeg") ( error = error + "File " + file.name + " không khớp với png, jpg hoặc gif" ; ) / /Kiểm tra loại tập tin data.append("file-"+i, file); )); if (error != "") ($("#info").html(error);) else ( $.ajax(( url: "upload.php", data: data, cache: false, contentType: false, processData: false, gõ: "POST", beforeSend: function() ( $("#preloader").show(); ), thành công: function(data)( $("#info").html(data); $("#preloader").hide(); ) )); ) )) ));
Chà, có vẻ như vậy là hết rồi. Nếu có ai không hiểu điều gì, hãy hỏi. Nếu ai có bổ sung gì thì tôi cũng rất vui!
Mẹo: nếu bạn chưa sử dụng mã để xóa tệp khỏi bất kỳ thư mục nào thì tôi khuyên bạn nên thay đổi chức năng xóa rmdir thành echo để kiểm tra nhằm đảm bảo rằng chỉ những tệp bạn muốn xóa mới bị xóa. Ví dụ: trình tải trước Gif có thể được lấy từ bài học Cách tạo ảnh động Gif của tôi. Ví dụ ở cuối bài viết.
Nếu ai đó muốn thêm vẻ đẹp, chẳng hạn như thanh tiến trình, thì để làm được điều này, chúng ta sẽ cần thêm một vài dòng mã. TRONG mẫu html chúng tôi sẽ thêm một siêu phần tử từ html5 - Progress và trong mã js, chúng tôi sẽ thêm một số dòng có đối tượng XMLHttpRequest.
Và vì vậy, html của chúng tôi sẽ được bổ sung những điều sau:
Và chúng ta sẽ thêm vào mã js:
Hàm ProgressHandlingFunction(e)( if(e.lengthComputable)( $("progress").attr((value:e.loaded,max:e.total)); ) )
Xhr: function() ( var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload)( // kiểm tra xem quá trình tải lên có đang được thực hiện không myXhr.upload.addEventListener("progress",progressHandlingFunction, false); // truyền tới các giá trị hàm ) trả về myXhr; )
Kết quả cuối cùng của mã js:
$(document).ready(function())( function ProgressHandlingFunction(e)( if(e.lengthComputable)( $("progress").attr((value:e.loaded,max:e.total)); ) ) $("#preloader").hide(); $("#file").bind("change", function())( var data = new FormData(); var error = ""; jQuery.each( $( "#file").files, function(i, file) ( if(file.name.length< 1) { error = error + " Файл имеет неправильный размер! "; } if(file.size >1000000) ( error = error + " File " + file.name + " quá lớn."; ) if(file.type != "image/png" && file.type != "image/jpg" && !file. type != "image/gif" && file.type != "image/jpeg") ( error = error + "File " + file.name + " không khớp với png, jpg hoặc gif"; ) data.append( "tập tin -"+i, tập tin); )); if (error != "") ($("#info").html(error);) else ( $.ajax(( url: "productUploadImg.php", type: "POST", xhr: function() ( var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload)( // kiểm tra xem quá trình tải lên có đang diễn ra không myXhr.upload.addEventListener("progress",progressHandlingFunction, false); // truyền giá trị cho hàm ) return myXhr; ) , data: data, cache: false, contentType: false, processData: false, beforeSend: function() ( $("#preloader").show(); ), thành công: function(data)( $ ("#info" ).html(data); $("#preloader").hide(); ), lỗi: errorHandler = function() ( $("#info").html("Lỗi tải tệp") ; ) )); ) )) ));
