jQuery - Upload file sử dụng AJAX

Em đang code tính năng upload file ảnh sử dụng AJAX trong đó ở trang thông tin người dùng có một form cho phép người dùng có thể cập nhật ảnh avatar của mình như sau:

<form method="POST" action="/users/update_avatar" enctype="multipart/form-data">
    <div>
        <label for="avatar">Chọn file ảnh:</label>
        <input type="file" id="avatar" name="avatar"/>
    </div>
    <div>
        <button>Cập nhật avatar</button>
    </div>
</form>

Toàn bộ quá trình cập nhật avatar sẽ được thực hiện hoàn toàn bằng AJAX để giúp người dùng không phải tải lại trang. Em đang bị vướng ở khúc gán dữ liệu vào form. Đối với input thuộc kiểu
văn bản thì việc này đơn giản. Tuy nhiên ở form trên dữ liệu cần gán lại lấy từ file ảnh. Mọi người cho em hỏi có cách nào để thực hiện việc gán dữ liệu này thông qua jQuery hay không?

Guest

- 1970/01/01 Trả lời

Để làm được điều này bạn cần sử dụng formData để append data vào:

var formData = new FormData();
formData.append("username", "Foo"); (1)
formData.append("userfile", fileInputElement.files[0]); (2)
$.ajax({ url: '/server/action', method: 'post', data: formData, contentType: false, processData: false })(3)
~

(1): append 1 property key = "username", value = "Foo" vào form data (hoặc bất cứ thứ gì bạn muốn).

(2): append file vào form data với key = "userfile". Nếu bạn sử dụng jquery thì cần phải chuyển sang js object để lấy được file.

(3): gửi ajax post với data thu thập, 2 options contentType và processData là để jquery không xử lý dữ liệu trước khi gửi lên server.

jQuery - Upload file sử dụng AJAX

jQuery - Upload file sử dụng AJAX

Trending Discussions

javascript:void(0) là gì?

khác nhau giữa "event.preventDefault()" và "return false"

PHP: Chuyển tiếp người dùng sang trang khác

PHP - xóa phần tử khỏi mảng

Khác nhau giữa Pull và Pull Request trong Git?