업로드하기 전에 이미지를 업로드하도록 선택하십시오. 업로드하기 전에 작동하지 않습니다.

하드 드라이브에서 이미지를 선택하여 서버에 전송 (업로드)하기 전에 이미지를 표시하려고합니다. 내가 this 웹 사이트에 작은 코드를 발견했는데, 붙여 넣기 복사했지만 작동하지 않습니다 (데모 페이지에 있음). 이미지를 선택할 수 있으며 그 이름은 파일 선택 버튼의 오른쪽에 표시되지만 이미지도 크기도 표시되지 않습니다. 나는 머리카락을 꺼내고있다.업로드하기 전에 이미지를 업로드하도록 선택하십시오. 업로드하기 전에 작동하지 않습니다.

전체 코드 :

<!DOCTYPE html> <!-- Using margin:auto will not work in IE8, unless a !DOCTYPE is declared. --> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#"> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

    <link href="design3.css" rel="stylesheet" type="text/css"/> 

    <script src="jquery-1.8.3.min.js"></script> 

<script language="JavaScript"> 

// Handle file while select a new file 
$('#file').change(function() { 
    $('#img_size').val((this.files[0].size)/1000000); 
    handleFiles(this.files); 
}); 


// handle files 
function handleFiles(files) { 
    for (var i = 0; i < files.length; i++) { 
     var file = files[i]; 
     var imageType = /image.*/; 
     if (!file.type.match(imageType)) { 
      continue; 
     } 
     var img = document.getElementById('fake_img'); 
     /* img.src = file; 
     img.onload = function() { 
     }; */ 
     var reader = new FileReader(); 
     reader.onload = (function (aImg) { 
      return function (e) { 
       aImg.src = e.target.result; 
      }; 
     })(img); 
     reader.readAsDataURL(file); 
    } 
} 



function drawAd() 
{ 
    window.open('http://www.google.com'); 
} 

</script> 

</head> 
<body> 

    <input type="file" id="file"/> 
    <input type="text" id="img_size" /> 
    <img src="" id="fake_img" /> 

    <button type="button" onclick="drawAd()">Refresh</button> 


</body> 
</html>

는 IE와 크롬에서 테스트.

출처

2012-12-30 erdomester

브라우저 콘솔에서 오류를 확인 했습니까? – Pointy

또한 jQuery를 가져 오시겠습니까? 그 코드는 무엇입니까? – Pointy

jQuery를 처음 사용합니다. 나는 head block에 이것을 가지고있다 : 그리고이 .js 파일은 나의 웹 페이지와 같은 디렉토리에있다. – erdomester

코드의 나머지 부분 (서식의 HTML)을 보지 않고서는 알 수 없지만 일 가능성이 있습니다. 브라우저에서 HTML을보고 파싱하기 전에 코드가 실행 중입니다.

$(function() { 
    // your code here 
});

을하고 도움이되는지 참조 :

는 jQuery를 "준비"핸들러로 코드를 감 쌉니다. 이 줄은

$('#file').change(function() {

은 파일 입력의 "change"이벤트에 대한 이벤트 처리기를 설정합니다. 실행시 브라우저가 "파일"을 "id"로 사용하는 요소가 없다면 오류가 발생하지 않지만 아무 것도 발생하지 않습니다. 브라우저가 전체 문서 (jQuery "준비"래퍼가하는 것)를 볼 때까지 해당 코드를 지연시킴으로써 "파일"입력을 찾을 수 있도록합니다.

출처

2012-12-30 17:45:31 Pointy

개폐 부분이 해결책 인 것처럼 보입니다. 정말 고맙습니다! Btw, 오류 콘솔에서 무엇을 찾아야합니까? 문제가 발생하면 로그해야합니까? – erdomester

업로드하기 전에 이미지를 업로드하도록 선택하십시오. 업로드하기 전에 작동하지 않습니다.

답변

관련 문제