Multiple upload file sử dụng Bootstrap fileinput
Fileinput
Sau khi download gói fileinput, giải nén và thêm vào project
Controller
Thêm mới 1 Controller sử dụng cho việc Upload. Action Index để hiện thị form upload, Action Upload dùng để upload file sẽ được nói sau.
View Index
Để gọi File input, sử dụng đoạn script sau
Chú ý
- FormMethod.Post việc upload file phải dùng phương thức Post.
- enctype = "multipart/form-data" là thuộc tính cho phép upload file
- multiple=multiple cho phép chọn nhiều file
Kết quả
HttpPostedFileBase
Mỗi file được upload sẽ có kiểu là HttpPostedFileBase, do đó mình sẽ sử dụng 1 danh sách để nhận file từ View
Quay lại với View và thêm model cho View đồng thời sửa lại input helper (để như cũ cũng chả sao, quan trọng là name phải giống như property của model)
UploadFile Action
Sử dụng để upload file lên Server. Mọi việc bây giờ trở nên đơn giản, chỉ cần duyệt qua những file được chọn và lưu lại
Nếu không muốn gặp rắc rối trong vấn đề trùng tên file, bạn có thể format lại tên file sử dụng một chuỗi random string, ví dụ như image-<random-string-here>.png hoặc bất cứ cách nào bạn có thể.
.png)
mình upload file image trên 4mb nó toàn báo lỗi maximum lengh exceeded mình đã config trong web.config nhưng lỗi cũ vẫn còn,mình thử tìm cách resize ở client bằng javascrip trước khi upload dù resize được nhưng khi click submit thì file gửi đi vẩn là file gốc chứ không phải file đã resize.giúp mình với
ReplyDelete^^ bạn có chắc chắn mình config đúng trong web.config không?
DeletehttpRuntime targetFramework="4.5" maxRequestLength="20480"
Delete