Tải hình ảnh lên máy chủ php jquery ajax. Tải tệp động với jQuery

Làm cách nào để tải bất kỳ tệp nào, chẳng hạn như ảnh, lên máy chủ bằng AJAX và jQuery? Nó khá dễ dàng để làm! Và dưới đây chúng tôi sẽ phân tích mọi thứ một cách chi tiết.

Vào thời “cổ xưa” đó, khi chưa có jQuery hoặc có thể đã có jQuery nhưng trình duyệt chưa quá phức tạp, tải tệp lên một trang web bằng AJAX là một công việc tẻ nhạt: thông qua đủ loại nạng như iframe. Tôi đã không nắm bắt được thời điểm đó và bây giờ ai quan tâm? Nhưng bây giờ có một điều thú vị khác - việc lưu tệp vào trang web rất đơn giản. Ngay cả quản trị viên web không có kinh nghiệm và hiểu biết về cách hoạt động của AJAX cũng có thể nhanh chóng hiểu được chuyện gì đang xảy ra. Và bài viết này sẽ giúp anh ta. Nếu bạn sao lưu các khả năng này bằng các chức năng của WordPress, thì việc xử lý và tải tệp lên máy chủ một cách an toàn sẽ trở thành một nhiệm vụ hoàn toàn tầm thường và thậm chí thú vị (ví dụ với WordPress, hãy xem phần cuối bài viết).

Tuy nhiên, dù mọi thứ có đơn giản đến đâu thì cũng cần lưu ý rằng vẫn cần có kinh nghiệm làm việc tối thiểu với các tệp và kiến ​​thức cơ bản về Javascript, jQuery và PHP! Tối thiểu, bạn cần hình dung các tập tin được tải lên máy chủ như thế nào, như trong phác thảo chung AJAX hoạt động được và bạn cần có khả năng đọc và hiểu mã ít nhất một chút.

Phương pháp được mô tả dưới đây khá ổn định và chủ yếu dựa vào Đối tượng Javascript new FormData() , có hỗ trợ cơ bản trong tất cả các trình duyệt.

Để nhận thức dễ hiểu hơn về tài liệu, nó được chia thành các bước. Thế thôi, hãy bay đi...

Tất cả bắt đầu với sự hiện diện của trường đầu vào thuộc loại tệp trên trang web. Trường này không cần phải là một phần của biểu mẫu (thẻ).

Do đó, chúng ta có mã HTML với trường tệp và nút “Tải tệp lên”.

Tải tập tin

Bước đầu tiên là lấy dữ liệu của các tệp đã tải xuống.

Khi click vào trường file sẽ xuất hiện cửa sổ chọn file, sau khi chọn dữ liệu về chúng sẽ được lưu vào trường nhập và chúng ta cần “nhặt” từ đó. Để thực hiện việc này, chúng tôi sẽ đính kèm một hàm vào sự kiện JS thay đổi để lưu dữ liệu trường tệp hiện có trong các tệp biến JS:

Tập tin Var; // Biến đổi. sẽ chứa dữ liệu tệp // điền dữ liệu vào biến khi giá trị trường thay đổi file $("input").on("change", function())( files = this.files; ));

Chúng tôi có dữ liệu tệp, bây giờ chúng tôi cần gửi nó qua AJAX. Chúng tôi chỉ định sự kiện này cho một lần nhấp vào nút “Tải tệp lên”.

Tại thời điểm nhấp chuột, chúng ta tạo một đối tượng mới new formData() và thêm dữ liệu từ biến files vào đó. Sử dụng formData() chúng ta sẽ đảm bảo rằng dữ liệu đã gửi trông như thể chúng ta vừa gửi biểu mẫu trong trình duyệt.

Để yêu cầu như vậy diễn ra, bạn cần chỉ định các tham số bổ sung trong jQuery Tham số AJAX, vì vậy hàm $.post() thông thường không phù hợp và chúng tôi sử dụng một hàm tương tự linh hoạt hơn: $.ajax() .

Hai điều quan trọng thông số bổ sung cần được đặt thành sai:

ProcessData Vô hiệu hóa việc xử lý dữ liệu được truyền đi. Theo mặc định, ví dụ, đối với NHẬN yêu cầu jQuery thu thập dữ liệu thành chuỗi truy vấn và nối chuỗi đó vào cuối URL. Vì dữ liệu ĐĂNG thực hiện các phép biến đổi khác. Mọi thay đổi đối với dữ liệu nguồn sẽ gây trở ngại cho chúng tôi, vì vậy chúng tôi tắt tùy chọn này... contentType Tắt cài đặt tiêu đề loại yêu cầu. Mặc định cài đặt jQuery bằng "application/x-www-form-urlencoded". Tiêu đề này không hỗ trợ gửi tệp. Nếu bạn đặt tham số này thành "multipart/form-data", PHP sẽ vẫn không thể nhận ra dữ liệu đang được truyền và sẽ hiển thị cảnh báo "Thiếu ranh giới trong multipart/form -data"... Nói chung, cách dễ nhất là tắt tùy chọn này, sau đó mọi thứ sẽ hoạt động! // xử lý và Gửi AJAX yêu cầu khi bạn nhấp vào nút upload_files $(".upload_files").on("click", function(event)( event.stopPropagation(); // dừng tất cả các sự kiện JS hiện tại event.preventDefault(); // dừng sự kiện mặc định cho phần tử hiện tại - nhấp vào tag // không làm gì nếu tập tin trống if(typeof files == "unknown") return; // tạo một đối tượng dữ liệu biểu mẫu var data = new FormData(); // điền vào đối tượng dữ liệu các tệp có định dạng phù hợp để gửi $.each(files, function(key, value)( data.append(key, value); )); // thêm một biến để xác định yêu cầu data.append("my_file_upload", 1); // AJAX request $.ajax(( url: "./submit.php", type: "POST", // important! data: data, cache: false, dataType: "json", // vô hiệu hóa việc xử lý dữ liệu được truyền , hãy để chúng được truyền đi như là processData: false, // vô hiệu hóa việc thiết lập tiêu đề loại yêu cầu. Vì vậy, jQuery sẽ thông báo cho máy chủ rằng đây là một yêu cầu chuỗi contentType: false, // hàm phản hồi thành công của máy chủ thành công: function(respond, status, jqXHR)( // OK - các tập tin được tải if(typeof Reply.error === "unknown")( // hiển thị đường dẫn của các tập tin đã tải xuống trong khối ".ajax-reply" var files_path = Reply.files; var html = ""; $.each(files_path, function( key, val)( html += val +"
"; )) $(".ajax-reply").html(html); ) // lỗi khác ( console.log("ERROR: " + Reply.error); ) ), // lỗi chức năng phản hồi của máy chủ: function(jqXHR, status, errorThrown)( console.log("AJAX request LỖI: " + status, jqXHR); ) )); ));

Hiện nay Bước cuối cùng: yêu cầu đã gửi cần được xử lý.

Để làm rõ hơn, chúng tôi sẽ xử lý yêu cầu mà không cần kiểm tra bổ sungđối với các tập tin, tức là chỉ cần lưu các tập tin đã nhận vào thư mục mong muốn. Mặc dù, để bảo mật, các tệp đã gửi phải được kiểm tra, ít nhất là phần mở rộng (loại) của tệp...

Hãy tạo một tệp submit.php với đoạn mã sau (giả sử rằng submit.php nằm trong cùng thư mục với tệp mà yêu cầu AJAX được gửi đi):

jQuery(document).ready(function($)( // link to file AJAX handler var ajaxurl = ""; var nonce = ""; var files; // biến. sẽ chứa dữ liệu file // điền dữ liệu vào biến khi đã thay đổi giá trị trường file $("input").on("change", function())( files = this.files; )); // xử lý và gửi yêu cầu AJAX khi nhấp vào nút upload_files $(" .upload_files").on ("click", function(event)( event.stopPropagation(); // dừng tất cả các sự kiện JS hiện tại event.preventDefault(); // dừng sự kiện mặc định cho phần tử hiện tại - nhấn for tag // không làm gì nếu tập tin trống if(typeof files == "unknown") return; // tạo dữ liệu file theo định dạng phù hợp để gửi var data = new FormData(); $.each(files, function(key, value)( data.append(key, value); )); // thêm biến định danh yêu cầu data.append("action", "ajax_fileload"); data.append("nonce", nonce); data.append("post_id", $("body").attr("class").match(/postid-(+)/)); var $reply = $(".ajax-reply"); // Yêu cầu AJAX $reply.text("Đang tải..."); $.ajax(( url: ajaxurl, type: "POST", data: data, cache: false, dataType: "json", // vô hiệu hóa việc xử lý dữ liệu được truyền, để nó được truyền như vậy là processData: false, // vô hiệu hóa thiết lập tiêu đề kiểu Vì vậy, jQuery sẽ thông báo cho máy chủ rằng đây là một yêu cầu chuỗi contentType: false, // chức năng phản hồi của máy chủ thành công thành công: function(respond, status, jqXHR)( // OK if(respond.success)( $ .each(respond.data, function (key, val)( $reply.append(""); )); ) // lỗi khác ( $reply.text("ERROR: " + Reply.error); ) ), // lỗi chức năng phản hồi của máy chủ: function(jqXHR, status, errorThrown)( $reply.text("AJAX request ERROR: " + status); ) )); )); ))