Jquery tải hình ảnh hàng loạt. Ajax và PHP. Tải hình ảnh lên máy chủ

Ngày nay, các trang web ngày càng có tính tương tác cao. Điều này không chỉ áp dụng dịch vụ chuyên ngành, nhưng cũng internet thường xuyên cửa hàng, blog và các trang web nhỏ. Tính năng chính là JavaScript không đồng bộ và XML được viết tắt là AJAX. Công nghệ này cho phép trình duyệt lý lịch giao tiếp với máy chủ web và khi cập nhật dữ liệu, trang web không tải lại hoàn toàn. Nói cách khác, chúng ta có thể đưa ra yêu cầu và nhận phản hồi từ máy chủ mà không cần tải lại trang trên trình duyệt.

Vì ngôn ngữ phổ biến nhất để phát triển ứng dụng web là PHP nên hôm nay chúng ta sẽ sử dụng kết hợp AJAX và PHP. Ví dụ này sẽ giúp bạn hiểu rõ các nguyên tắc cơ bản khi làm việc với AJAX và PHP.

Trên thực tế, không có khó khăn đặc biệt nào, thuật toán hành động là:

Chọn ảnh
Nhấp vào nút “Gửi”
Chặn cuộc gọi biểu mẫu bằng JavaScript (jQuery)
Truyền nội dung tới trình xử lý tập lệnh PHP đặc biệt
Trả về kết quả thực hiện
Xử lý kết quả khi Trợ giúp về JavaScript(jQuery)
Hiển thị thông tin tải xuống cho người dùng

Sơ lược về jQuery và AJAX

Tôi sẽ đi chệch khỏi chủ đề một chút và giải thích jQuery là gì. jQuery là một thư viện JavaScript đặc biệt giúp đơn giản hóa việc phát triển các ứng dụng web nhiều lần. thư viện này cung cấp API để làm việc với AJAX. Nói một cách đơn giản, chúng ta sẽ viết ít mã hơn so với khi viết bằng JS thuần túy.

Ajax cho phép bạn trao đổi dữ liệu với máy chủ web và cập nhật nội dung của nó mà không cần tải lại trang web.

Tôi có xu hướng nghĩ rằng nếu có một công cụ cho phép bạn tăng tốc độ phát triển mà không gây hậu quả, thì tại sao không sử dụng nó? Nhưng cũng sẽ không hại gì nếu biết JS thuần túy (mặc dù mức độ thành thạo JS của cá nhân tôi ngang bằng với mức độ của các ví dụ sao chép-dán từ stackoverflow :)).

Chúng ta sẽ xem xét một trong những vấn đề mà tôi từng phải giải quyết, đó là tải hình ảnh lên một trang web có bản xem trước. Nếu bạn đã thay đổi hình đại diện của mình trên VKontakte, bạn sẽ hiểu tôi đang viết về điều gì.

Chúng tôi cần 3 tập tin đơn giản, Cái này:

Trang biểu mẫu
trình xử lý php
tập tin js

chỉ mục.html Tải lên Ajax Tải lên hình ảnh

Tệp hình ảnh:

Thường xuyên trang html với hình thức. Hãy chú ý đến enctype="multipart/form-data" , điều này là cần thiết để truyền tệp; tham số cho biết phương pháp mã hóa dữ liệu. Nếu bạn đang truyền tệp, giá trị phải luôn là multipart/form-data .

handler.php // Kiểm tra xem mảng tệp và mảng chứa dữ liệu được truyền đã được cài đặt chưa if(isset($_FILES) && isset($_FILES["image"])) ( // Lưu mảng được truyền vào biến $ image = $_FILES["image "]; // Kiểm tra kích thước tệp và nếu nó vượt quá kích thước đã chỉ định // hoàn tất việc thực thi tập lệnh và hiển thị lỗi nếu ($image["size"] > 200000) ( die("error "); ) // Lấy định dạng hình ảnh $imageFormat = boom(".", $image["name"]); $imageFormat = $imageFormat; // Tạo tên mới cho hình ảnh. Bạn có thể lưu với tên cũ một // nhưng điều này không được khuyến khích $imageFullName = "./images/ " . hash("crc32",time()) . "." . $imageFormat; // Lưu loại hình ảnh vào một biến $imageType = $image ["type"]; // Kiểm tra các định dạng hình ảnh có sẵn, nếu hình ảnh phù hợp, / / sao chép hình ảnh vào thư mục hình ảnh if ($imageType == "image/jpeg" || $imageType == "image/png" ) ( if (move_uploaded_file($image["tmp_name"],$imageFullName)) ( echo "success "; ) else ( echo "error"; ) ) )

Đây là một trình xử lý rất đơn giản. Tôi đã tạo tên hình ảnh bằng hàm băm. Cách tốt nhất là thay đổi tên tệp khi tải chúng lên máy chủ.

ajaxupload.js $(document).ready(function () ( function readImage (input) ( if (input.files && input.files) ( var reader = new FileReader(); reader.onload = function (e) ( $( "#preview").attr("src", e.target.result); ) reader.readAsDataURL(input.files); ) ) hàm printMessage(destination, msg) ( $(destination).removeClass(); if ( msg == "success") ( $(destination).addClass("alert notification-success").text("File upload thành công."); ) if (msg == "error") ( $(destination).addClass ("cảnh báo cảnh báo-nguy hiểm").text("Đã xảy ra lỗi khi tải tệp lên."); ) ) $("#image").change(function())( readImage(this); )); $( "#upload -image").on("submit",(function(e) ( e.preventDefault(); var formData = new FormData(this); $.ajax(( type:"POST", // Loại yêu cầu url: " handler.php", // Dữ liệu tập lệnh xử lý: formData, // Dữ liệu chúng tôi truyền cache: false, // Trong các yêu cầu POST, nó bị tắt theo mặc định, nhưng hãy phát nó an toàn contentType: false, // Chúng tôi đặt loại mã hóa dữ liệu trong biểu mẫu, chúng tôi sẽ vô hiệu hóa processData: false, // Vô hiệu hóa vì chúng tôi đang truyền tệp thành công:function(data)( printMessage("#result", data); ), error:function(data)( console.log(data); ) )); ))); ));

Điều thú vị nhất xảy ra trong kịch bản này. Sử dụng hàm readImage() chúng ta sẽ đọc tệp từ trường biểu mẫu và chuyển nó vào khối cho xem trước. Một đối tượng FileReader được tạo. Nó cho phép một ứng dụng web đọc nội dung của một tập tin trên máy tính của người dùng. Sự kiện .onload sẽ kích hoạt khi nội dung được đọc, sử dụng sự kiện này chúng ta sẽ hiển thị hình ảnh trong khối xem trước.
Và cuối cùng, phương thức .readAsDataURL() bắt đầu quá trình đọc file, sau khi đọc xong sự kiện .onload sẽ được thực thi và hình ảnh sẽ xuất hiện trên màn hình của bạn.

Hàm printMessage được thiết kế để hiển thị thông tin về việc tải xuống tệp thành công hay thất bại. Chúng tôi không xem xét nó một cách chi tiết; nó không đại diện cho điều gì đặc biệt.

Chặn biểu mẫu và xử lý nó. Khi bạn click vào nút “Gửi”, sự kiện sẽ bị chặn bởi script và sử dụng hàm .preventDefault(), form sẽ không gửi dữ liệu tới index.html. .preventDefault() được sử dụng để ngăn chặn bất kỳ sự kiện nào xảy ra.

Chúng ta cần đối tượng FormData để tạo ĐĂNG yêu cầuđối với tập lệnh của chúng tôi, việc này đơn giản hơn nhiều so với việc nhập từng phần tử biểu mẫu vào một dòng. Chúng tôi đã tạo một đối tượng, điền dữ liệu vào đó và gửi nó đến ajax của chúng tôi.

Vâng, thực ra chính là yêu cầu AJAX. Vì chúng tôi sử dụng thư viện jQuery, việc tạo và thực hiện một yêu cầu như vậy sẽ không gây ra bất kỳ vấn đề gì cho bạn.

Thực ra, hãy kết thúc ở đây. Hình ảnh tải, trang không tải lại, mọi người đều vui vẻ. Nếu bạn có câu hỏi hoặc gợi ý, hãy viết bình luận.

Chúc một ngày tốt lành và may mắn :)

Cách tải bất kỳ tệp nào, ví dụ: ảnh lên máy chủ từ sử dụ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...

Đang tải AJAX tập tin: ví dụ chung

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 1. Dữ liệu từ trường tệp

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; ));

Bước 2. Tạo yêu cầu AJAX (bằng cách nhấp chuột)

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, các tham số AJAX bổ sung phải được chỉ định trong jQuery, do đó 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 vào 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 đặt 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, trạng thái, errorThrown)( console.log("ERROR Yêu cầu AJAX: " + trạng thái, jqXHR); ) )); ));

Bước 3. Xử lý yêu cầu: upload file lên server

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); ) )); )); ))