Asked Dec 11th, 2018 8:56 AM 3118 3 3
  • 3118 3 3
0

Có upload file qua Ajax được không?

Share
  • 3118 3 3

Như tiêu đề mình ghi. Không biết các bác có upload file qua ajax được không. Nhưng mình search gg thì có tút hẳn hoi mà mình request->all() và console ở ajax thì file image và banner không có dữ liệu. Mình không biết là mình sai ở đâu hay ajax ko hỗ trợ file nữa. Mong các bác cho ý kiến

3 ANSWERS


Answered Dec 11th, 2018 9:15 AM
Accepted
+2

Bạn phải sử dụng FormData (https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects) để upload file

Ngoài ra bạn có thể sử dụng Iframe (http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html) Mình hay dùng cách 1 hơn. Chúc bạn may mắn 😄

Share
Dec 11th, 2018 10:41 AM

Cảm ơn bác. Chắc em không may mắn rồi 😀 . Xem lại rồi thử các kiểu console ra vấn trống. Nhưng mà em hấy cấn cấn khó hiểu quá 😂

0
| Reply
Share
Answered Dec 12th, 2018 3:37 AM
+4

Òa, hôm nọ mình cũng gặp lỗi này, fix mãi không được, cuối cùng phải nhờ support, giờ thì được rồi và đây là một số lưu ý khi dùng ajax để upload file.

  1. html form cần để enctype="multipart/form-data"
  2. Dùng FormData() để gửi dữ liệu lên
var form_data = new FormData();
attachment_data= $("#chat").find("input")[0].files[0];
form_data.append("attachment", attachment_data);
  1. Ajax cần dùng contentType: false, processData: false,
    $.ajax({
      type: "POST",
      data: form_data,
      url: "/admin/chats",
      contentType: false,
      processData: false,
      headers: { "X-CSRF-Token": $("meta[name='csrf-token']").attr("content") },
      success: function (data) {
        # Your code here
      },
      error: function (data) {
        # Your code here
      }
    });

Note: Trong quá trình làm thì bạn nên debug từng bước một, để chắc chắn từng bước đã làm đúng, ví dụ như:

Debug ở client: Screenshot from 2018-12-12 10-26-22.png

Rồi check network:

Screenshot from 2018-12-12 10-31-05.png

Chú ý phần: Screenshot from 2018-12-12 10-36-00.png

Rồi debug trên server xem nhận được file chưa ?

...::Parameters {"attachment"=>#<ActionDispatch::Http::UploadedFile:0x00007fbdc519e2d8 @tempfile=#<Tempfile:/tmp/RackMultipart20181212-1-ff18dv.png>, @original_filename="Screenshot from 2018-06-05 08-33-49.png", @content_type="image/png", @headers="Content-Disposition: form-data; name=\"attachment\"; filename=\"Screenshot from 2018-06-05 08-33-49.png\"\r\nContent-Type: image/png\r\n">,
Share
Dec 12th, 2018 6:44 AM

Cảm ơn bạn. Nhưng mình vẫn không hiểu???. Mình console luôn cái FormData mà không có chút dữ liệu nào. Vô lý thật 😏 Screen Shot 2018-12-12 at 1.43.31 PM.png Screen Shot 2018-12-12 at 1.40.22 PM.png

0
| Reply
Share
Hoàn Kì @HoanKi
Dec 12th, 2018 6:48 AM

@congvan Mình nhìn thấy File name: "Screen Shot 2018 ..." đó rồi còn gì bạn

+1
| Reply
Share
May 20th, 2020 9:09 AM

anh cho em hỏi chút nếu em edit thì em click fom hiện thông tin rồi à, nút submit để update ảnh thì trong ajax sử lý như nào nếu có trường dữ liệu name và imges

0
| Reply
Share
Answered Dec 12th, 2018 2:34 AM
0

Bạn thử kiểm tra trong biến $_FILES chưa?

Share