Tải tệp lên bằng Ajax PHP
|
Tải lên hình ảnh AJAX trong PHP rất đơn giản nếu bạn sử dụng đúng kỹ thuật. Bạn có thể hoàn thành việc này trong vòng chưa đầy năm phút. Khi bạn xây dựng trang web thường xuyên, tải lên hình ảnh là một trong những tính năng mà bạn gặp khá thường xuyên Show Trong ví dụ hướng dẫn này, tôi đã thêm mã để thực hiện tải lên hình ảnh PHP bằng AJAX mà không cần gửi biểu mẫu bằng cách không tải lại trang. Tôi sẽ sử dụng jQuery AJAX để thực hiện tải lên hình ảnh. Có một biểu mẫu với trường nhập tệp và nút gửi. Trong hướng dẫn trước, chúng ta đã xem ví dụ tải lên hình ảnh PHP mà không cần AJAX Hành động AJAX sẽ trỏ đến một URL có tập lệnh PHP. Tệp PHP này sẽ xử lý yêu cầu AJAX trong phần phụ trợ và sẽ gửi phản hồi là kết quả của việc tải lên hình ảnh Khi gửi biểu mẫu với tệp hình ảnh đã chọn, tập lệnh AJAX sẽ được thực thi. Trong tập lệnh ví dụ tải lên hình ảnh PHP AJAX này, nó sẽ gửi yêu cầu tải lên tới PHP cùng với hình ảnh đã tải lên Mã PHP di chuyển hình ảnh đã tải lên vào thư mục đích và trả về hình ảnh HTML để hiển thị bản xem trước dưới dạng phản hồi AJAX Sau khi tải lên một hình ảnh qua AJAX, chúng tôi đang hiển thị bản xem trước cho hình ảnh đã tải lên trong div đích Giao diện người dùng tải lên hình ảnh PHP AJAX với jQueryTập lệnh ví dụ hình ảnh tải lên này có hai tệp
mục lục. php Tôi đã sử dụng lệnh gọi AJAX mà không cần gửi biểu mẫu. Đối với lệnh gọi PHP AJAX, tôi đã sử dụng jQuery để thực hiện lệnh gọi. Tôi đã bao gồm mã JavaScript ở cuối tệp ngay trước phần nội dung HTML để có hiệu suất tải trang tốt hơn Bạn có thể sử dụng bất kỳ phiên bản jQuery nào từ rất cũ đến mới nhất có thể và nó sẽ hoạt động mà không gặp sự cố nào. Tải lên hình ảnh jQuery AJAX yêu cầu các tính năng cốt lõi của jQuery và không có gì lạ mắt được sử dụng Đối với tải lên hình ảnh AJAX, không bắt buộc phải có ____13_______ vì chúng tôi không gửi qua bài đăng biểu mẫu. Chúng tôi đang sử dụng truyền dữ liệu AJAX và không cần dữ liệu biểu mẫu nhiều phần để tải lên hình ảnh Tập lệnh PHP AJAX để tải lên hình ảnhĐể tải lên hình ảnh bằng AJAX, bạn cần có một tập lệnh phụ trợ để xử lý. Tải lên tập tin này. php ở đây trong ví dụ này tải lên tệp hình ảnh Khi gọi AJAX, tập lệnh PHP này sẽ di chuyển tệp vào đĩa và trả về phần tử HTML img trỏ đến tệp hình ảnh đã tải lên tải lên. php Sau khi tải lên hình ảnh thành công, chức năng thành công AJAX sẽ in HTML hình ảnh đã tải lên. Sau đó, phần này sẽ được thêm vào DIV mục tiêu để hiển thị bản xem trước cho người dùng Để tải lên hình ảnh PHP AJAX, bạn có thể sao chép hai tệp này và thêm nó vào dự án của mình. Đó là một quá trình tích hợp đơn giản Kiểm tra xem phần mở rộng tệp có tồn tại trong Mảng /* Container */
.container{
margin: 0 auto;
border: 0px solid black;
width: 50%;
height: 250px;
border-radius: 3px;
background-color: ghostwhite;
text-align: center;
}
/* Preview */
.preview{
width: 100px;
height: 100px;
border: 1px solid black;
margin: 0 auto;
background: white;
}
.preview img{
display: none;
}
/* Button */
.button{
border: 0px;
background-color: deepskyblue;
color: white;
padding: 5px 15px;
margin-left: 10px;
}0 hay không. Nếu tồn tại thì gán vị trí tệp cho biến /* Container */
.container{
margin: 0 auto;
border: 0px solid black;
width: 50%;
height: 250px;
border-radius: 3px;
background-color: ghostwhite;
text-align: center;
}
/* Preview */
.preview{
width: 100px;
height: 100px;
border: 1px solid black;
margin: 0 auto;
background: white;
}
.preview img{
display: none;
}
/* Button */
.button{
border: 0px;
background-color: deepskyblue;
color: white;
padding: 5px 15px;
margin-left: 10px;
}2Trả về biến /* Container */
.container{
margin: 0 auto;
border: 0px solid black;
width: 50%;
height: 250px;
border-radius: 3px;
background-color: ghostwhite;
text-align: center;
}
/* Preview */
.preview{
width: 100px;
height: 100px;
border: 1px solid black;
margin: 0 auto;
background: white;
}
.preview img{
display: none;
}
/* Button */
.button{
border: 0px;
background-color: deepskyblue;
color: white;
padding: 5px 15px;
margin-left: 10px;
}2Mã hoàn thành
|
