tinyMCE 의 그림 사용자 정의 업로드
2419 단어 프런트
tinyMCE 에는 두 가지 방식 이 있 습 니 다.
1,images 직접 사용upload_url 속성,이 속성 은 그림 을 업로드 할 때 지정 한 url 에 자동 으로 접근 하여 주 소 를 되 돌려 줍 니 다:
images_upload_url: '/image/upload',
배경 은{"location":"}을 되 돌려 야 합 니 다.그림 url 을 가리 키 고 있 습 니 다.
2、images 사용upload_handler 및 filepicker_콜백,전 자 는 편집 상자 에 그림 을 끌 어 다 놓 는 데 사용 되 며,후 자 는 파일 선택 기 에서 그림 을 선택 하여 업로드 합 니 다.
images_upload_handler: function(blobInfo, success, failure) { var form = new FormData(); form.append('files', blobInfo.blob(), blobInfo.filename()); $.ajax({ url: "/image/upload", type: "post", data: form, processData: false, contentType: false, success: function(data) { success(data.location); }, error: function(e) { alert("사진 업로드 실패"); } }); },
file_picker_callback: function(callback, value, meta) {
var input = document.createElement('input'); input.setAttribute('type', 'file'); input.onchange = function() { var file = this.files[0]; var form = new FormData(); form.append("files", file); $.ajax({ url: "/image/upload", type: "post", data: form, processData: false, contentType: false, success: function(data) { callback(data.location); }, error: function(e) { alert("사진 업로드 실패"); } }); };
input.click();
}
form.append('files', blobInfo.blob(), blobInfo.filename());그리고 form.append("files",file);대응 하 는 설명 은:
formData.append(name, value);
formData.append(name, value, filename);
filename 이 필요 하지 않 으 면 앞의 두 개 만 전달 할 수 있 습 니 다.