전단 js 편집 가능 한 div 에 그림 붙 여 넣 기 (다른 탭 도 가능)
따라서 contenteditable = 'true' 속성 으로 div (다른 용기 도 가능) 를 편집 하여 입력 상 자 를 모 의 하여 입력 상자 에 그림 을 붙 이 는 효 과 를 실현 하고 데 이 터 를 백 엔 드 에 제출 할 때 form 으로 제출 할 수 있 습 니 다.
비동기 로 제출 할 수도 있 습 니 다. form 을 제출 할 때 div 의 데 이 터 를 모두 form 폼 의 숨겨 진 도 메 인 에 넣 으 면 됩 니 다. 비동기 로 제출 하면 div 의 데 이 터 를 data 로 전송 하면 됩 니 다.
js 편집 가능 한 div 에 그림 붙 여 넣 기
붙 여 넣 은 그림 의 출처 는 QQ, 위 챗, 스파이크 등 메 신 저 에서 만 나 올 수 있 는 그림 입 니 다.(예 를 들 어 채 팅 기록 에 있 는 그림, 입력 상자 에 있 는 캡 처, 데스크 톱 에 있 는 그림 을 입력 상자 로 복사 합 니 다)
직접 실행 할 수 있 는 코드:
<style>
body,html{
text-align: center;
}
#editDiv{
width:1000px;
display: inline-block;
height: 800px;
background:#fff;
border-radius:10px;
line-height: 20px;
padding:10px;
font-size: 14px;
color:#666;
resize: none;
outline: none;
overflow-y: scroll;
}
#editDiv{
border:1px solid #333;
border-color:rgba(169,169,169,1);
text-align: left;
}
</style>
<div id="editDiv" contenteditable="true">
</div>
<script src="js/jquery.min.js"/>
<script>
document.querySelector('#editDiv').addEventListener('paste',function(e){
var cbd = e.clipboardData;
var ua = window.navigator.userAgent;
// Safari return
if ( !(e.clipboardData && e.clipboardData.items) ) {
return ;
}
// Mac Chrome49 Finder Bug Hack
if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
return;
}
for(var i = 0; i < cbd.items.length; i++) {
var item = cbd.items[i];
if(item.kind == "file"){
var blob = item.getAsFile();
if (blob.size === 0) {
return;
}
// blob
/*----------------------- start-----------------------*/
/*var data = new FormData();
data.append('discoverPics', blob);
$.ajax({
url: '/discover/addDiscoverPicjson.htm',
type: 'POST',
cache: false,
data: data,
processData: false,
contentType: false,
success:function(res){
var obj = JSON.parse(res);
var wrap = $('#editDiv');
var file = obj.data.toString();
var img = document.createElement("img");
img.src = file;
wrap.appendChild(img);
},error:function(){
}
})*/
/*----------------------- end-----------------------*/
/*----------------------- start-----------------------*/
var reader = new FileReader();
var imgs = new Image();
imgs.file = blob;
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(imgs);
reader.readAsDataURL(blob);
document.querySelector('#editDiv').appendChild(imgs);
/*----------------------- end-----------------------*/
}
}
}, false);
</script>
</code></pre>
<br/>
<br/>
</div>
</div>
</div>
</div> 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
전단 자동화 워 크 플 로 의 hooks예 를 들 어 우 리 는 git commt 전에 eslint 코드 검사, npm install 전에 프로젝트 의존 도 를 검사 하고 싶 습 니 다.전형 적 인 상황 에서 각종 도 구 는 특정한 동작 이 발생 할 때 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
