Share code upload ảnh cho chatbox
15:38:55 01.07.2018[#1]
MrKen
MrKen [Off]
Ahihi
(SV!)
Demo: forum.vsite.tk

Cách làm: mở index.twig
1. Thay form chat bằng code sau
  1. {% if api.can_chat %}
  2. <div class="menu"><form action="{{ chat_data.form_url }}" method="post" id="chat-form">
  3. <textarea name="text" id="chat-input"></textarea>
  4. <input type="hidden" name="token" value="{{ chat_data.form_token }}" />
  5. <input type="submit" name="submit" value="Gửi" />
  6. {% if api.device != 'old_phone' %}<a class="btn" href="#" id="img-button">Đăng ảnh</a><span id="img-status"></span>{% endif %}
  7. </form><input type="file" id="img-select" class="hide" accept="image/*" /></div>
  8. <div class="menu hide" id="img-result"></div>
  9. {% endif %}

2. Thêm code sau vào cuối index.twig
  1. {% if api.device != 'old_phone' %}
  2. <script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
  3. <script type="text/javascript">
  4. var imgs = '';
  5. $(document).ready(function(){
  6. $('#img-button').click(function(){$('#img-select').trigger('click');return !1});
  7. $('#img-select').change(function(){upload(this.files[0])});
  8. $('#chat-form').submit(function(e){
  9. var _this = $(this);
  10. if (imgs.length > 0) {
  11. e.preventDefault();
  12. $.post(_this.attr('action'), {text: ($('#chat-input').val() + imgs), token: _this.find('input[name="token"]').val()}, function(){
  13. window.location.reload();
  14. })
  15. }});
  16. });
  17. function upload(file) {
  18. if(file && file.type.match(/image.*/)){
  19. var fd = new FormData();
  20. fd.append("image", file);
  21. var xhr = new XMLHttpRequest();
  22. xhr.open("POST", "https://api.imgur.com/3/image.json");
  23. xhr.upload.onprogress = function(e) {
  24. if (e.lengthComputable) {
  25. var percent = Math.floor((e.loaded / e.total) * 100) + '%';
  26. $("#img-status").html("Đang tải ("+percent+")");
  27. }
  28. };
  29. xhr.onload = function() {
  30. try{
  31. var res = JSON.parse(xhr.responseText);
  32. if (res.status === 200 && res.success === true) {
  33. var data = res.data;
  34. $("#img-status").html("Đang xử lí...");
  35.  
  36. $('#img-result').show();
  37. imgs += '\r\n[url=' + data.link + '][img]' + data.link.replace(/\.([a-z]+)$/, 'm.$1') + '[/img][/url]';
  38. $("#img-result").append('<img src="' + data.link.replace(/\.([a-z]+)$/, 'b.$1') + '" class="img-thumb">');
  39. $("#img-status").html('');
  40. } else {
  41. window.alert('Lỗi: tải lên thất bại');
  42. $("#img-status").html('');
  43. }
  44. } catch (e) {
  45. window.alert('Lỗi: tải lên thất bại');
  46. $("#img-status").html('');
  47.  
  48. }
  49. }
  50. xhr.setRequestHeader('Authorization', 'Client-ID 21ca8b31c6adc09');
  51. xhr.send(fd);
  52. } else {
  53. window.alert('Chỉ cho phép chọn ảnh');
  54. };
  55. };
  56. </script>
  57. {% endif %}

3. Thêm vào CSS
  1. .hide {display:none}


Vậy là xong.
Chúc các bạn thành công!
Đã chỉnh sửa. MrKen (10:43:44 14/09/2018)
22:16:56 27.07.2018[#2]
RoSino18k
RoSino18k [Off]
Tàu ngầm =))
Thành viên
Sao ở ngoài chatbox cứ up ảnh xong 1 lúc là mất luôn vậy??
20:36:15 29.07.2018[#3]
PMTpro
PMTpro [Off]
Không tâm trạng
Thành viên
ngon, chưa kịp tách % upload thì share rồi v
21:17:38 29.07.2018[#4]
MrKen
MrKen [Off]
Ahihi
(SV!)
đù, share từ đầu tháng =))
21:13:59 20.08.2018[#5]
Poker
Poker [Off]
Thành viên
MrKen wrote »
Demo: forum.vsite.tk

Cách làm: mở index.twig
1. Thay form chat bằng code sau
{% if api.can_chat %}
<div class="menu"><form action="chat.php?act=write&in=main" method="post" id="chat-form">
<texta...

Trên thì xài jquery dưới lại xài XMLHttpRequest() 3
10:06:03 09.09.2018[#6]
MrKen
MrKen [Off]
Ahihi
(SV!)
Poker wrote »
Trên thì xài jquery dưới lại xài XMLHttpRequest() 3

cái này để sử dụng mấy thuộc tính của XHR thôi mà v
dùng jquery cũng được nhưng mà viết kiểu này gọn hơn xíu
21:54:35 10.09.2018[#7]
Poker
Poker [Off]
Thành viên
MrKen wrote »
cái này để sử dụng mấy thuộc tính của XHR thôi mà v
dùng jquery cũng được nhưng mà viết kiểu này gọn hơn xíu

Sao mà gọn dc hơn jq man. Nó có hàm sẵn cả mà
22:02:40 10.09.2018[#8]
MrKen
MrKen [Off]
Ahihi
(SV!)
Sẵn thì vẫn phải viết lại xhr
22:03:38 10.09.2018[#9]
MrKen
MrKen [Off]
Ahihi
(SV!)
jQuery làm gì có upload progress
13:43:25 11.09.2018[#10]
Poker
Poker [Off]
Thành viên
MrKen wrote »
jQuery làm gì có upload progress

Ờ hơ. Cơ mà cho hỏi chỗ xhr.send(). Nếu xhr.send('post=abc'); thì nó nhận dc giá trị api.r.post('post') còn dùng xhr.send(FormData().append('post','abc')) thì ko dc