Yêu cầu thg 10 25, 2017 7:19 SA 902 0 1
  • 902 0 1
0

(Angularjs) Upload ảnh

Chia sẻ
  • 902 0 1

Chào cả nhà. Hiện tại mình đang làm phần upload ảnh. Mình muốn khi click vào 1 button thì nó link trực tiếp đường dẫn ảnh đã được cấu hình cho ck-finder để vào thư viện ảnh trên server. Nhưng mình chưa biết cấu hình sao. Mong cả nhà giúp đỡ. Thanks all!

Avatar Tran Duc Thang @thangtd90
thg 10 26, 2017 1:03 SA

Câu hỏi của bạn mơ hồ và khó hiểu quá 😂

Bạn có thể giải thích rõ link trực tiếp đường dẫn ảnh đã được cấu hình cho ck-finder là sao, vào thư viện ảnh trên server là như thế nào không 🤔

Bạn chia sẻ đoạn code hiện tại của mình, và nói rõ mình muốn thực hiện điều gì, lên thì tốt 😄

Avatar Hà Nhung @hathinhung92
thg 10 26, 2017 1:24 SA

@thangtd90 Bình thường hi quản trị nội dung sẽ tích hợp ckfinder vào trong ckeditor. Nhưng mình muốn tích hợp ckfinder vào button FileUpload, để khi click vào button FileUpload nó sẽ mở ra popup chọn tệp của ckfinder thôi.

1 CÂU TRẢ LỜI


Đã trả lời thg 10 30, 2017 3:06 SA
Đã được chấp nhận
0

Theo như mình đọc document và test từ trang https://docs.ckeditor.com/ckfinder/ckfinder3/#!/guide/dev_installation hay https://docs.ckeditor.com/ckfinder/demo/ckfinder3/samples/modals.html , thì có vẻ bạn có thể làm như thế này để chạy CKFinder từ button.

var button1 = document.getElementById( 'ckfinder-popup-1' );
var button2 = document.getElementById( 'ckfinder-popup-2' );

button1.onclick = function() {
	selectFileWithCKFinder( 'ckfinder-input-1' );
};
button2.onclick = function() {
	selectFileWithCKFinder( 'ckfinder-input-2' );
};

function selectFileWithCKFinder( elementId ) {
	CKFinder.modal( {
		chooseFiles: true,
		width: 800,
		height: 600,
		onInit: function( finder ) {
			finder.on( 'files:choose', function( evt ) {
				var file = evt.data.files.first();
				var output = document.getElementById( elementId );
				output.value = file.getUrl();
			} );

			finder.on( 'file:choose:resizedImage', function( evt ) {
				var output = document.getElementById( elementId );
				output.value = evt.data.resizedUrl;
			} );
		}
	} );
}

Khi đó, click vào nút Browse Server thì Popup Window của CKFinder sẽ mở ra, cho phép bạn chọn file, bạn thử xem có được không 🤔

Hay ở trang này cũng có hướng dẫn tương tự tại https://docs.ckeditor.com/ckfinder/ckfinder3/#!/guide/dev_integration

Đấy là code ở phía js, ngoài ra, để chạy được CKFinder trong project của mình, bạn cần code ở phần backend nữa. Cụ thể, nếu bạn dùng PHP thì cần phải enable CKFinder PHP Connector, bạn có thể download source code về và làm theo hướng dẫn ở đây: https://docs.ckeditor.com/ckfinder/ckfinder3-php/quickstart.html

Chia sẻ
Avatar Hà Nhung @hathinhung92
thg 11 1, 2017 7:07 SA

Cảm ơn bạn. Mình đã làm được rồi. Hihi

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí