이미지 업로드 플러그인 ImgUploadJS: HTML5 파일 API를 사용하여 스크린샷 붙여넣기 업로드 및 드래그 앤 드롭 업로드 _html5 튜토리얼 기술 구현

1. 배경 및 효과

현재 인터넷에 가장 많이 업로드되는 파일은 이미지 파일이지만 기존 웹 이미지의 스크린샷을 업로드하려면 스크린샷 저장 -> ; 저장한 다음 업로드->경로 선택->업로드->삽입을 클릭합니다.
이미지 파일을 업로드하려면 경로를 선택한 다음 ->업로드->삽입이 필요합니다. 단계가 복잡하며, 스크린샷 붙여넣기 업로드와 드래그 앤 드롭 업로드를 지원하는 경우 인터넷 환경이 가장 좋습니다. 크게 개선되세요.
현재 Zhihu와 Github 모두 최신 브라우저에 대해 이 두 가지 기능을 지원하고 있습니다. 저는 할 일이 없을 때 구현하는 방법을 배웠습니다. 오늘은 이 1kb 플러그인이 구현하는 기능과 사용 방법 및 원리에 대해 이야기하겠습니다. .
먼저 삽입 효과를 살펴보세요.
스크린샷을 찍은 후 직접 붙여넣고 업로드하세요.

드래그 앤 드롭하여 업로드

http 네트워크

2. 사용예
직접전화:

XML/HTML 코드클립보드에 콘텐츠 복사

1. <div id="상자" 스타일="너비: 800px; 높이: 400px; 테두리: 1px 실선;" contenteditable="true">div>
2. <스크립트 유형="text/ javascript" src="UploadImage.js">스크립트> 
3. new UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//업로드 완료 후 콜백
4. var img = 새 이미지()
5. img.src = xhr.responseText;
this.appendChild(img)
})

AMD/CMD

XML/HTML 코드

클립보드에 콘텐츠 복사

1. <div id="상자"  스타일="너비: 800px; 높이: 400px; 테두리: 1px 단색;"  contenteditable="true">div>    
2. <스크립트 유형="text/ javascript" src="require.js">스크립트>    
3. <스크립트>    
4. require(['UploadImage'], 함수 (UploadImage) {    
5. new UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//上传完成后的回调    
6. var img = 새 이미지();    
7. img.src = xhr.responseText;    
8. this.appendChild(img);    
9. });    
10. })    
11. 스크립트>   

三.浏览器支持
当前版本只支持以下，浏览器，后期可能会支持更多浏览器。
•IE1 1
•크롬
•FireFox
•Safari(未测式，理论应该支持)
四.原理及源码
1.粘贴上传
处目标容器(id) 붙여넣기 작업, 读取e.clipboardData中的数据, 如果是图文进行以下处理:
사용 H5 File API(FileReader)获取文件的 base64代码, 并构建FormData异步上传.
2.拖拽上传
处理目标容器(id)의 drop事件，读取e.dataTransfer.files（H5 File API: FileList）中的数据，如果是图文并构建FormData异步上传。
以下是初版本代码，比较简单。不再赘述。
부份核心代码

XML/HTML 코드复复内容到剪贴板

1. 이미지 업로드(id, url, key) 기능
2. {
3. this.element = 문서.getElementById(id)
4. this.url = url; //백엔드 이미지 처리 경로
5. this.imgKey = key || "PasteAreaImgKey" //백엔드에 언급된 이름
6. }
7. UploadImage.prototype.paste = 함수(콜백, formData)
8. {
9. var 저것 = 이것;
this.element.addEventListener('paste', function (e) {//대상 컨테이너(id)의 붙여넣기 이벤트 처리
if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image')
11. > -1) {
var
12. 저것 = 이것,
13. 리더 = 새 FileReader()
14. file = e.clipboardData.items[0].getAsFile();//e.clipboardData의 데이터 읽기: Blob 객체
15. reader.onload = function (e) { //리더 읽기가 완료된 후 xhr이 업로드됩니다.
var
16. xhr = new XMLHttpRequest(),
17. fd = formData || (new FormData());; xhr.open('POST', thatthat.url, true)
xhr.onload
19. = 함수 () { callback.call(that, xhr)
20. }
21. fd.append(that.imgKey, this.result); // this.result는 이미지의 base64를 가져옵니다
22. xhr.send(fd)
23. }
24. reader.readAsDataURL(file);//base64 인코딩 가져오기
25. }
26. }, 거짓)
27. }