28
4
CFSDN nhấn mạnh vào giá trị tạo ra nguồn mở và chúng tôi cam kết xây dựng nền tảng chia sẻ tài nguyên để mọi nhân viên CNTT có thể tìm thấy thế giới tuyệt vời của bạn tại đây.
Bài viết trên blog CFSDN Mã ví dụ xem trước tải lên avatar PHP này được tác giả sưu tầm và biên soạn. Nếu bạn quan tâm đến bài viết này, hãy nhớ thích nó.
Khi nói đến việc tải ảnh lên, mọi người đều quen thuộc với nó. Tuy nhiên, trong các dự án trong tương lai, bạn có thể không được phép tải ảnh lên bằng phương pháp gửi trang làm mới, chẳng hạn như tải ảnh đại diện lên. Theo lẽ thường, bạn phải xác nhận việc tải lên sau. chọn ảnh trong album và chắc chắn nó sẽ không được tải lên theo cách làm mới bằng cách nhấp vào gửi qua biểu mẫu. Tôi sẽ giới thiệu với các bạn hai ảnh tải lên không làm mới không đồng bộ + xem trước ảnh: thứ nhất là tải lên thông qua plug-in uploadfy làm sẵn, có rất nhiều ví dụ trên Internet.
Tuy nhiên, điều tôi sẽ tập trung giới thiệu với các bạn là phương pháp thứ hai, tải hình ảnh lên thông qua Ajax. Vì việc sử dụng plug-in uploadfy yêu cầu thiết bị hỗ trợ Flash ở định dạng swf nên phương pháp đầu tiên không thể sử dụng được cho hầu hết các điện thoại di động. Trước tiên, hãy để tôi nói cho bạn biết về nguyên tắc tải lên: kiểm soát trường văn bản tệp thông qua js. Sau khi chọn ảnh, hãy gửi biểu mẫu không đồng bộ thông qua Ajax, sau đó sử dụng vị trí của ảnh làm giá trị trả về và sử dụng js để đặt src. thuộc tính của img làm giá trị trả về.
Tải lên khu vực avatar:
Mã số:
|
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
"http://www.w3.org/1999/xhtml"
>
<đầu>
"Loại nội dung"
nội dung=
"text/html; charset=utf-8"
/>
"bootstrap-3.3.7-dist../../../css/bootstrap.min.css"
quan hệ=
"nofollow bên ngoài"
quan hệ=
"bảng định dạng"
loại=
"văn bản/css"
/>
"bootstrap-3.3.7-dist/js/jquery-1.11.2.min.js"
>
"bootstrap-3.3.7-dist../../../js/bootstrap.min.js"
>
"văn bản/css"
>
#yl{ chiều rộng: 200px; chiều cao: 200px; ảnh nền: url(img/avatar.png); kích thước nền: 200px 200px;}
#file{ chiều rộng: 200px; chiều cao: 200px; float: bên trái; độ mờ: 0;}
.modal-content{ chiều rộng: 500px;}
.kk{ lề trái: 130px;}
lớp học
=
"btn btn-chính btn-lg"
dữ liệu-chuyển đổi=
"phương thức"
mục tiêu dữ liệu=
"#myModal"
>
Tải hình đại diện lên
lớp học
=
"Mode mờ dần"
định danh=
"myModal"
chỉ mục tab=
"-1"
vai trò=
"hộp thoại"
aria-labelledby=
"nhãnModal của tôi"
aria-ẩn=
"ĐÚNG VẬY"
>
lớp học
=
"hộp thoại modal"
>
lớp học
=
"nội dung modal"
>
lớp học
=
"tiêu đề modal"
>
"cái nút"
lớp học
=
"đóng"
dữ liệu-bỏ qua=
"phương thức"
aria-ẩn=
"ĐÚNG VẬY"
>
&lần;
lớp học
=
"tiêu đề-modal"
định danh=
"nhãnModal của tôi"
>
Tải hình đại diện lên
lớp học
=
"modal-body"
>
"sc"
hành động=
"tải lên.php"
phương pháp=
"bưu kiện"
enctype=
"nhiều phần/dữ liệu biểu mẫu"
mục tiêu=
"thượng xuyên"
>
"ẩn giấu"
tên=
"tp"
giá trị=
""
định danh=
"tp"
/>
"y"
lớp học
=
"Ừm"
>
"tài liệu"
tên=
"tài liệu"
định danh=
"tài liệu"
onchange=
"document.getElementById('sc').submit()"
/>
|
Trung tâm cá nhân
Điều phát hành
từ bỏ"hiển thị:không có"
tên=
"thượng xuyên"
định danh=
"thượng xuyên"
>
lớp học
=
"modal-footer"
>
"cái nút"
lớp học
=
"btn btn-mặc định"
dữ liệu-bỏ qua=
"phương thức"
>Đóng
"văn bản/javascript"
>
//Hàm gọi lại, gọi phương thức này để truyền đường dẫn tệp và thay đổi hình nền
chức năng
hiển thị hình ảnh(url)
{
của chúng tôi
div = document.getElementById(
"y"
);
div.style.backgroundImage =
"url("
+url+
")"
;
tài liệu.getElementById(
"tp"
).giá trị = url;
}