자바 스크립트 디스플레이 이미지 기능 : 단순화 기능 도움말

나는 학교에서 지난 학기에했던 프로젝트에서 이것을 근거로하고 있습니다. 그것은 본질적으로 내가 원하는대로했지만 배열을 위해 그것을했다. 제가 지금하고있는 일을 위해서, 저는 하나의 이미지 만 필요로합니다. 배열이 아니 어서 루프와 같은 것들을 제거 할 수 있습니다. 지금까지 어디에 있어요자바 스크립트 디스플레이 이미지 기능 : 단순화 기능 도움말

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function loadImage() 
{ 
    myImages = new Array(); 
    var myFiles = document.getElementById("files"); 

    for (var i=0; i < myFiles.files.length; i++) 
    { 
     myImages[i] = myFiles.files[i].name; 
    } 

    var theImages = document.getElementById("images"); 
    theImages.innerHTML = ""; // Clearout the image area. 

    for (var i=0; i < myFiles.files.length; i++) 
    { 
    "<img id='pic" + i + i + ";'" + " src='" + myImages[i] + 
    "'" + " width = '400' " + " /> "; 
} 
} 
</script> 
</head> 
<body> 
<div> 
<input id="files" type="file" name="files[]" accept="image/*" onchange="loadImage();" multiple /> 
</div> 
<div id="images" style="position:relative; "> 
Images will go here... 
</div> 
</body> 
</html>

이있다 : I 버튼을 클릭하면

이

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function loadImage() 
{ 
     var myFiles = document.getElementById("files"); 

     document.getElementById("images").innerHTML = "<img src='" + myFiles.files.src +"'>"; 
} 
</script> 
</head> 
<body> 
<div> 
<input id="files" type="file" name="files" accept="image/*" onchange="loadImage();"> 
</div> 
<div id="images"> 
Images will go here... 
</div> 
</body> 
</html>

그래서 멀리있는, 내 파일을 검색 할 수 있지만 브라우저에서 얻을 수있는 모든 깨진 이미지 상. 그것은 단지 의견에 대답하고 내가 대답으로 그들을 선택하지 수 있기 때문에

출처

2014-06-13 user3687308

myFiles.files [0] .src, 정말 그렇게하고 싶다면 ... – Gio

은 새로운 Array() 대신 배열 리터럴 []을 사용합니다. 더 빠르고 깨끗합니다. – Raptus

@Gio 첫 번째 청크는 본질적으로 하나의 파일 만 선택하면 내가 원하는 것입니다. 찾아보고 선택하면 브라우저에 표시됩니다. 하나의 파일 만로드하는 가장 쉬운 방법을 배우려고합니다. 바라건대 배열이나 루프가 없기를 바랍니다. – user3687308

<html> 
<head> 
<script> 
function loadImage() 
{ 
    var myFiles = document.getElementById("files"); 

    document.getElementById("images").innerHTML = "<img src='" + myFiles.files[0].name +"'>"; 
} 
</script> 
</head> 
<body> 
<div> 
<input id="files" type="file" name="files" accept="image/*" onchange="loadImage();"> 
</div> 
<div id="images"> 
Images will go here... 
</div> 
</body> 
</html>

난 내 자신의 질문에 대답하고있다. 저를 도와 주신 Raptus와 Gio에게 감사드립니다.

출처

2014-06-18 22:34:03 user3687308

자바 스크립트 디스플레이 이미지 기능 : 단순화 기능 도움말

답변

관련 문제