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

Question

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...

Accepted Answer

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 :D

Answer

Ò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.

html form cần để enctype="multipart/form-data"
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);

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">,

Answer

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

3 CÂU TRẢ LỜI