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

Thảo luận trong 'Tips and Guides' bắt đầu bởi PVS, 15/04/2015.

  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,804
    Đã được thích:
    7,062
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    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ã:
    - 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ã:
    
    
    - Chèn xuống dưới đoạn code sau:
    Mã:
    
    
    - Chèn xuống dưới đoạn code sau:
    Mã:
        
        
        
        
    * Thêm nút "Upload Ảnh vào thanh menu:

    1.png

    - Vào sửa temp navigation, tìm đoạn:
    Mã:
    - Chèn lên trên:
    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:

    * 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ã:
    - Thay bằng đoạn code sau:
    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​
     

    Các file đính kèm:

  2. Jindo_Katori

    Jindo_Katori Thượng Đế

    Tham gia:
    01/03/2015
    Bài viết:
    1,463
    Đã được thích:
    1,114
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    http://tuyhoaplus.com
    Nơi ở:
    http://tuyhoaplus.com
    Web:
    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.
     
    THB thích bài này.
  3. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,804
    Đã được thích:
    7,062
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    mình đã test luôn rồi :D, có ảnh demo đó mà ^^, ảnh tự chụp á :D
     
    THB thích bài này.
  4. ndkhoa

    ndkhoa Thượng Đế

    Tham gia:
    09/04/2015
    Bài viết:
    138
    Đã được thích:
    134
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Watermark nó được không bác?
     
    THB thích bài này.
  5. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,804
    Đã được thích:
    7,062
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    được nha bạn
     
    THB thích bài này.
  6. shynn

    shynn Thượng Đế

    Tham gia:
    18/03/2015
    Bài viết:
    207
    Đã được thích:
    171
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Nghề nghiệp:
    Học Sinh
    Nơi ở:
    Nghệ An
    Quá tuyệt. Chức năng gần giống Remote Image Uploader
     
    THB thích bài này.
  7. Jindo_Katori

    Jindo_Katori Thượng Đế

    Tham gia:
    01/03/2015
    Bài viết:
    1,463
    Đã được thích:
    1,114
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    http://tuyhoaplus.com
    Nơi ở:
    http://tuyhoaplus.com
    Web:
    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
     
    THB thích bài này.
  8. juli_0

    juli_0 Thượng Đế

    Tham gia:
    21/03/2015
    Bài viết:
    72
    Đã được thích:
    77
    Điểm thành tích:
    18
    Giới tính:
    Nam
    Web:
    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á
     
  9. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,804
    Đã được thích:
    7,062
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    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ích bài này.
  10. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,804
    Đã được thích:
    7,062
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    mình test ở 1.4.6 đó bạn, hoàn toàn bình thường nên mới share chứ @@
     
    Jindo_Katori, juli_0 and THB like this.
  11. juli_0

    juli_0 Thượng Đế

    Tham gia:
    21/03/2015
    Bài viết:
    72
    Đã được thích:
    77
    Điểm thành tích:
    18
    Giới tính:
    Nam
    Web:
    Mình thay nút " tải file đính kèm" thành " up ảnh thì làm sao bác
     
    THB thích bài này.
  12. THB

    THB Admin - Founder Thành viên BQT

    Tham gia:
    25/02/2015
    Bài viết:
    6,336
    Đã được thích:
    3,550
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    CEO
    Nơi ở:
    Bình Dương
    Web:
    cũng được. lâu quá quên rồi. để tim lại.:D
     
    juli_0 thích bài này.
  13. juli_0

    juli_0 Thượng Đế

    Tham gia:
    21/03/2015
    Bài viết:
    72
    Đã được thích:
    77
    Điểm thành tích:
    18
    Giới tính:
    Nam
    Web:
    Hướng dẫn mình cái :)
     
    THB thích bài này.
  14. juli_0

    juli_0 Thượng Đế

    Tham gia:
    21/03/2015
    Bài viết:
    72
    Đã được thích:
    77
    Điểm thành tích:
    18
    Giới tính:
    Nam
    Web:
    THB thích bài này.
  15. juli_0

    juli_0 Thượng Đế

    Tham gia:
    21/03/2015
    Bài viết:
    72
    Đã được thích:
    77
    Điểm thành tích:
    18
    Giới tính:
    Nam
    Web:
    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
    [​IMG]
    Anh em thay toàn bộ attachment_upload_button thành
    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.phoxinhbaobao.com/threads/huong-dan-tao-popup-upload-anh-cho-bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365.360.html
     

    Các file đính kèm:

    ptvinhdtk, CIYTE and THB like this.
  16. THB

    THB Admin - Founder Thành viên BQT

    Tham gia:
    25/02/2015
    Bài viết:
    6,336
    Đã được thích:
    3,550
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    CEO
    Nơi ở:
    Bình Dương
    Web:
    bác nào cần upanh thì ib hay email cho mình: huybinh3000@gmail.com. Share free nha (vì có lý do nên ko share puplic đc):D
     
    Mr.Yellow, Jindo_Katori and juli_0 like this.
  17. Jindo_Katori

    Jindo_Katori Thượng Đế

    Tham gia:
    01/03/2015
    Bài viết:
    1,463
    Đã được thích:
    1,114
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    http://tuyhoaplus.com
    Nơi ở:
    http://tuyhoaplus.com
    Web:
    Ý em nói cái này nè bác @PVS :eek:
     

    Các file đính kèm:

    THB thích bài này.
  18. Jindo_Katori

    Jindo_Katori Thượng Đế

    Tham gia:
    01/03/2015
    Bài viết:
    1,463
    Đã được thích:
    1,114
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    http://tuyhoaplus.com
    Nơi ở:
    http://tuyhoaplus.com
    Web:
    Remote img hả bác :rolleyes:
     
    THB thích bài này.
  19. shynn

    shynn Thượng Đế

    Tham gia:
    18/03/2015
    Bài viết:
    207
    Đã được thích:
    171
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Nghề nghiệp:
    Học Sinh
    Nơi ở:
    Nghệ An
    Làm sao để thêm nút Add Images như này vậy

    upload_2015-4-23_0-15-43.png

    upload_2015-4-23_0-16-14.png
     
    juli_0 and THB like this.
  20. THB

    THB Admin - Founder Thành viên BQT

    Tham gia:
    25/02/2015
    Bài viết:
    6,336
    Đã được thích:
    3,550
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    CEO
    Nơi ở:
    Bình Dương
    Web:
    dùng addon chip
     

Chia sẻ trang này