브라우저 창에 이미지 업로드 및 표시

이미지가 브라우저에 업로드되고 미리보기 이미지로 표시되는 코드를 구현했습니다. 그런 다음 캔버스 영역으로 드래그 할 수도 있습니다. 하지만 크롬에서 실행할 때 파일을 업로드하기 위해 창을 열지 않습니다. 먼저 이미지가 업로드 된 다음 미리보기 이미지가 생성됩니다. 하지만 크롬에서는 작동하지 않습니다.브라우저 창에 이미지 업로드 및 표시

여기 내 코드는,

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Drag Demo</title> 
<link href="copy.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div class="container"> 
<div style = "border:2px solid black;"> 
<canvas id = "canvas" style = "position:relative;width:300px;height:300px;top:0px;left:500px; border:2px solid black;" ondrop="dropIt(event);" ondragover="event.preventDefault();"> </canvas>  
</div> 
<div> 
    <input type="file" id="fileElem" accept="image/*" style="display:none" > 
    <div id="fileSelect" class="drop-area">Select some files</div> 
</div> 
    <div id="thumbnail"></div> 
</div> 


<script type="text/javascript"> 
function dragIt(event) { 
event.dataTransfer.setData("Text", event.target.id) 
}; 


function dropIt(event) { 
    var theData = event.dataTransfer.getData("Text"); 
    dt = document.getElementById(theData); 
    event.preventDefault(); 
    var c = document.getElementById("canvas"); 
    var ctx = c.getContext('2d'); 
    ctx.drawImage(dt, 100, 0,dt.width,dt.height);  
}; 


var count = 0; 
var fileSelect = document.getElementById("fileSelect"), 
fileElem = document.getElementById("fileElem"); 


fileElem.addEventListener("click",function(e){ 
    var files = this.files 
    handleFiles(files) 
},false) 


fileSelect.addEventListener("click", function (e) { 
    fileElem.click(); 
    e.preventDefault(); 
}, false); 


function handleFiles(files) { 
    for (var i = 0; i < files.length; i++) { 
    var file = files[i]; 
    var imageType = /image.*/; 

    if(!file.type.match(imageType)){ 
     console.log("Not an Image"); 
     continue; 
    } 
    var image = document.createElement("img"); 
    var thumbnail = document.getElementById("thumbnail"); 
    image.file = file; 
    thumbnail.appendChild(image) 
    var reader = new FileReader() 
    reader.onload = (function(aImg){ 
     return function(e){ 
     aImg.src = e.target.result; 
     }; 
    }(image)) 
    image.id = count; 
    count++; 
    image.draggable = true; 
    image.ondragstart = dragIt; 
    var ret = reader.readAsDataURL(file); 
    } 
} 

</script> 

</body> 
</html>

출처

2012-07-17 MJQ

위의 코드가 파이어 폭스에서 작동합니다!] – MJQ

저는 전화를 사용하고 있기 때문에 많은 도움을 줄 수는 없지만 코드를 디버그하려고합니다. 모든 줄 다음에 alert() 또는 console.log()를 사용하고 실행중인 부분을 확인하십시오. –

나는 이미 시도했다! fileElem.click()이 실행되면 이벤트로 이동하고 firefox에서는 파일을 선택하는 창이 열립니다. 그러나 크롬에서, 그것은 다음과 같이 계속된다. 그러나 창은 파일 선택을 위해 열리지 않는다! !!! – MJQ

-1

그냥 서버에서 코드를 실행하고 작동합니다!

출처

2012-09-10 15:06:13 MJQ

브라우저 창에 이미지 업로드 및 표시

답변

관련 문제