Hướng dẫn Tạo chức năng upload ảnh nhanh

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,818
Được Like
11,109
Tạo chức năng upload ảnh nhanh

1. Tác dụng:
- Upload hình ảnh lên hosting Google Picasa & xuất link nhúng.
- Upload hình ảnh mà không cần load trang hiện tại.

2. Phương thức hoạt động:
- Sử dụng jquery của fancybox để load iframe trang upload hình ảnh. Do vậy, trước tiên chúng ta cần phải có 1 trang upload ảnh đã. ;)

3. Hướng dẫn:
a. Hướng dẫn tạo trang upload ảnh lên Google Picasa's hosting: ;;)

- Download file Upanh ở đính kèm về và giải nén ta có 2 thư mục: "fancybox" và "upanh"
- Upload 2 forder đó lên hosting (ngang hàng file index.php của forum)
- Thay file logo.png trong thư mục "upanh" bằng file logo.png của bạn. (Đây là file dùng để đóng dấu ảnh sau khi file ảnh đã được upload trên Google Picasa.)
- Sửa lại thông số của file "config.php" trong thư mục "upanh":

Mã:
<?php
set_time_limit(0);
define('DIR', dirname(__FILE__));
$user = "Dia-chi-Gmail";
$pass = "Mat-khau-dang-nhap-Gmail";
$albumId = "ID-album_tren_https://picasaweb.google.com";
$sitename = 'vnxf.vn';
$images_in_slide = 10;
$max_images_size = 2; //2 = 2MB
?>

- Vào trang http://picasaweb.google.com/home để tạo album ảnh - Nên lập riêng 1 tài khoản Gmail miễn phí để dùng cho upanh)
Lưu ý:
1. Hướng dẫn lấy dãy số ID của Album: Xem hình các bước dưới đây nhá! >:D<
- Bước 1:

upanh3.png

- Bước 2:
Click vào nút "Thêm ảnh"

upanh4.png

Bấm đúp vào dãy số ID để copy và dán vào file "config.php"

upanh5.png

1 tài khoản Google hiện tại cho 1Gb để upload ảnh vào Picasa Web (ảnh có size nhỏ hơn 800px ko bị tính vào dung lượng), giới hạn 1000 ảnh trong 1 album.

b. Hướng dẫn nhúng trang upanh: ;)
- Vào sửa temp PAGE_CONTAINER, tìm đoạn:
Mã:
</xen:hook>
</head>

- Chèn xuống dưới đoạn code sau:
Mã:
</xen:hook>
</head>
- Chèn xuống dưới đoạn code sau:
Mã:
    <script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
    <script type="text/javascript" src="fancybox/khac.js"></script>

* Thêm nút "Upload Ảnh vào thanh menu:

1.png

- Vào sửa temp navigation, tìm đoạn:
Mã:
<!-- extra tabs: end -->

- Chèn lên trên:
Mã:
<!-- upanh -->
            <li class="navTab members Popup PopupControl PopupClosed PopupContainerControl">
            <a id="kenhkinhdoanh-iframe" class="navLink" href="http://yourdomain/upanh">Upload Ảnh</a>
            </li>

Vậy là xong, khi ra ngoài, trên thanh Menu, sẽ có thêm nút Upload ảnh.
Trong trường hợp các bạn muốn chỉ cho thành viên đã đăng nhập mới được upload ảnh thì thay bằng đoạn code sau:

Mã:
<!-- upanh -->
                <xen:if is="{$visitor.user_id}">
            <li class="navTab members Popup PopupControl PopupClosed PopupContainerControl">
            <a id="kenhkinhdoanh-iframe" class="navLink" href="http://yourdomain/upanh">Upload Ảnh</a>
            </li>
        </xen:if>

* Thêm nút "Upload Ảnh vào khung soạn thảo:

2.png

- Vào template: thread_create tìm đoạn sau:

Mã:
<dl class="ctrlUnit submitUnit">
        <dt></dt>
            <dd>
            <input type="submit" value="{xen:phrase create_thread}" accesskey="s" class="button primary" />
            <xen:include template="attachment_upload_button" />
            <input type="button" value="{xen:phrase preview}..." class="button PreviewButton JsOnly" />
        </dd>
    </dl>

- Thay bằng đoạn code sau:
Mã:
<dl class="ctrlUnit submitUnit">
<dt></dt>
<dd>
<input type="submit" value="{xen:phrase create_thread}" accesskey="s" class="button primary" />
<xen:include template="attachment_upload_button" />
<li class="navTab members Popup PopupControl PopupClosed PopupContainerControl">
<a id="kenhkinhdoanh-iframe" class="button primary" href="http://yourdomain/upanh">Upload Ảnh</a>
</li>
<input type="button" value="{xen:phrase preview}..." class="button PreviewButton JsOnly" />
</dd>
</dl>

Lưu ý: Bạn phải sửa "http://yourdomain/upanh" thành đường dẫn đến trang upload ảnh của bạn.:>

Chúc bạn thành công!


Nguồn: bangvu.net​
 

Đính kèm

  • Upanh.zip
    2 MB · Lượt xem: 626

Jindo_Katori

Thượng Đế
Tham gia
01/03/2015
Bài viết
1,465
Được Like
1,204
Quá nhanh quá nguy hiểm.
Rất chi tiết và đầy đủ.
Đang dùng đt chưa test được. Mai sẽ ra quán net test cho bác.
 
  • Like
Reactions: THB

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,818
Được Like
11,109
Quá nhanh quá nguy hiểm.
Rất chi tiết và đầy đủ.
Đang dùng đt chưa test được. Mai sẽ ra quán net test cho bác.
mình đã test luôn rồi :D, có ảnh demo đó mà ^^, ảnh tự chụp á :D
 
  • Like
Reactions: THB

ndkhoa

Thượng Đế
Tham gia
09/04/2015
Bài viết
138
Được Like
137
Watermark nó được không bác?
 
  • Like
Reactions: THB

shynn

Thượng Đế
Tham gia
18/03/2015
Bài viết
207
Được Like
176
Quá tuyệt. Chức năng gần giống Remote Image Uploader
 
  • Like
Reactions: THB

Jindo_Katori

Thượng Đế
Tham gia
01/03/2015
Bài viết
1,465
Được Like
1,204
Vừa mới tải cái slide thumnail về test thử mà huk đc chắc lại phiên bản cũ rồi
 
  • Like
Reactions: THB

juli_0

Thượng Đế
Tham gia
21/03/2015
Bài viết
74
Được Like
79
Mình xài cái này thấy đơn giản hơn http://yeuchim.com/upanh . Thanks bác đã hướng dẫn cách chèn vào thread creat. Bác hướng dẫn cách bỏ không cho gửi đính kèm với,nặng data quá
 

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,818
Được Like
11,109
Mình xài cái này thấy đơn giản hơn http://yeuchim.com/upanh . Thanks bác đã hướng dẫn cách chèn vào thread creat. Bác hướng dẫn cách bỏ không cho gửi đính kèm với,nặng data quá
bạn vào ACP > Home > Optine > Attachments > giảm kích thước hoặc xóa hết định dạng file có thể tải lên xem sao ^^
 

juli_0

Thượng Đế
Tham gia
21/03/2015
Bài viết
74
Được Like
79
bạn vào ACP > Home > Optine > Attachments > giảm kích thước hoặc xóa hết định dạng file có thể tải lên xem sao ^^
Mình thay nút " tải file đính kèm" thành " up ảnh thì làm sao bác
 
  • Like
Reactions: THB

THB

Admin - Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
6,656
Được Like
3,942
cũng được. lâu quá quên rồi. để tim lại.:D
 

juli_0

Thượng Đế
Tham gia
21/03/2015
Bài viết
74
Được Like
79
Có bài thay bằng nút attachment rồi nè bác http://www.vnxf.vn/threads/huong-dan-tao-popup-upload-anh-cho-xenforo.360.html
Mà code này nó không mở trên trình soạn thảo, tức là up ảnh xong là phải nhấn "back" để quay lại
Mã:
<script type="text/javascript" src="http://cdn.vietdesigner.net/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script> <script type="text/javascript" src="http://cdn.vietdesigner.net/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script> <link rel="stylesheet" type="text/css" href="http://cdn.vietdesigner.net/js/fancybox/jquery.fancybox-1.3.4.css" media="screen" /> <script type="text/javascript" src="http://cdn.vietdesigner.net/js/fancybox/khac.js"></script> <li class="navTab members Popup PopupControl PopupClosed PopupContainerControl"> <a id="kenhkinhdoanh-iframe" class="button primary" href="http://upanh.vietdesigner.net/">Đăng ảnh</a> </li>

Mà sao có mấy cái cds.vietdesiinger là sao nhỉ
 
  • Like
Reactions: THB

juli_0

Thượng Đế
Tham gia
21/03/2015
Bài viết
74
Được Like
79
Sau khi tìm tòi được mình xin chia sẻ cách thay nút " tải file đính kèm " thành popup " up ảnh " Cái này khi mình bấm vào up ảnh thì nó sẽ mở cửa sổ chồng lên bài viết
5534656fa9d26.jpg

Anh em thay toàn bộ attachment_upload_button thành
Mã:
<script type="text/javascript" src="http://yeuchim.com/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script> <script type="text/javascript" src="http://yeuchim.com/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script> <link rel="stylesheet" type="text/css" href="http://yeuchim.com/js/fancybox/jquery.fancybox-1.3.4.css" media="screen" /> <script type="text/javascript" src="http://yeuchim.com/js/fancybox/khac.js"></script> <li class="navTab members Popup PopupControl PopupClosed PopupContainerControl"> <a id="kenhkinhdoanh-iframe" class="button primary" href="http://yeuchim.com/upanh/">Đăng ảnh</a> </li>
Sau đó up file fancybox vào thư mục js trên host
Thay thế domain http:yeuchim.com thành domain của các bạn
(Đã theo bài này nhưng không được http://www.vnxf.vn/threads/huong-dan-tao-popup-upload-anh-cho-xenforo.360.html
 

Đính kèm

  • fancybox.zip
    9 KB · Lượt xem: 21

Jindo_Katori

Thượng Đế
Tham gia
01/03/2015
Bài viết
1,465
Được Like
1,204

Đính kèm

  • Screenshot_2015-04-21-09-42-04.jpg
    Screenshot_2015-04-21-09-42-04.jpg
    324.1 KB · Lượt xem: 121
  • Screenshot_2015-04-21-09-43-27.jpg
    Screenshot_2015-04-21-09-43-27.jpg
    261.4 KB · Lượt xem: 98
  • Like
Reactions: THB

THB

Admin - Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
6,656
Được Like
3,942
dùng addon chip
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom