<입력 파일>에서 <img>로 이미지로드

요소를 통해 사용자가 선택한 이미지를로드하려고합니다.

다음과 같이 입력 요소에 onchange 이벤트 핸들러를 추가했습니다.

<input type="file" name="picField" id="picField" size="24" onchange="preview_2(this);" alt=""/>

그리고 preview_2 함수는 다음과 같습니다.

var outImage ="imagenFondo";
function preview_2(what){
    globalPic = new Image();
    globalPic.onload = function() {
        document.getElementById(outImage).src = globalPic.src;
    }
    globalPic.src=what.value;
}

여기서 outImage에는 새 사진을로드 할 태그의 id 값이 있습니다.

그러나 온로드가 발생하지 않으며 html에 아무것도로드하지 않는 것으로 보입니다.

어떻게해야합니까?

File API를 지원하는 브라우저 에서 FileReader 생성자를 사용 하여 사용자가 선택한 파일을 읽을 수 있습니다.

예

document.getElementById('picField').onchange = function (evt) {
    var tgt = evt.target || window.event.srcElement,
        files = tgt.files;

    // FileReader support
    if (FileReader && files && files.length) {
        var fr = new FileReader();
        fr.onload = function () {
            document.getElementById(outImage).src = fr.result;
        }
        fr.readAsDataURL(files[0]);
    }

    // Not supported
    else {
        // fallback -- perhaps submit the input to an iframe and temporarily store
        // them on the server until the user's session ends.
    }
}

브라우저 지원

• IE 10
• Safari 6.0.2
• 크롬 7
• Firefox 3.6
• 오페라 12.02

파일 API가 지원되지 않는 경우 대부분의 보안에 민감한 브라우저에서 파일 입력 상자에서 파일의 전체 경로를 가져올 수 없으며 데이터에 액세스 할 수도 없습니다. 유일한 실행 가능한 솔루션은 양식을 숨겨진 iframe에 제출하고 파일을 서버에 미리 업로드하는 것입니다. 그런 다음 요청이 완료되면 이미지의 src를 업로드 된 파일의 위치로 설정할 수 있습니다.

iEamin이 대답에서 말했듯이 HTML 5는 이제 이것을 지원합니다. 그가 준 링크 인 http://www.html5rocks.com/en/tutorials/file/dndfiles/ 는 훌륭합니다. 다음은 해당 사이트의 샘플을 기반으로 한 최소 샘플이지만 더 자세한 예는 해당 사이트를 참조하십시오.

onchangeHTML에 이벤트 리스너를 추가합니다 .

<input type="file" onchange="onFileSelected(event)">

ID가있는 이미지 태그를 만듭니다 ( height=200이미지가 화면에 너무 크지 않도록 지정 합니다).

<img id="myimage" height="200">

다음은 onchange이벤트 리스너 의 JavaScript입니다 . File로 전달 된 객체를 가져 와서 내용을 읽기 위해 event.target.files[0]a FileReader를 구성 하고 결과 data:URL을 img태그 에 할당하는 새 이벤트 리스너를 설정합니다 .

function onFileSelected(event) {
  var selectedFile = event.target.files[0];
  var reader = new FileReader();

  var imgtag = document.getElementById("myimage");
  imgtag.title = selectedFile.name;

  reader.onload = function(event) {
    imgtag.src = event.target.result;
  };

  reader.readAsDataURL(selectedFile);
}

$('document').ready(function () {
    $("#imgload").change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#imgshow').attr('src', e.target.result);
            }
            reader.readAsDataURL(this.files[0]);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="imgload" >
<img src="#" id="imgshow" align="left">

그것은 jQuery에서 나를 위해 작동합니다.

ES2017 방식

// convert file to a base64 url
const readURL = file => {
    return new Promise((res, rej) => {
        const reader = new FileReader();
        reader.onload = e => res(e.target.result);
        reader.onerror = e => rej(e);
        reader.readAsDataURL(file);
    });
};

// for demo
const fileInput = document.createElement('input');
fileInput.type = 'file';
const img = document.createElement('img');
img.attributeStyleMap.set('max-width', '320px');
document.body.appendChild(fileInput);
document.body.appendChild(img);

const preview = async event => {
    const file = event.target.files[0];
    const url = await readURL(file);
    img.src = url;
};

fileInput.addEventListener('change', preview);

Andy E는이를 수행하는 HTML 기반 방법이 없다는 것이 옳습니다 *; 하지만 Flash를 사용하고 싶다면 할 수 있습니다. 다음은 Flash가 설치된 시스템에서 안정적으로 작동합니다. 앱이 iPhone에서 작동해야하는 경우 당연히 대체 HTML 기반 솔루션이 필요합니다.

* ( 2013 년 4 월 22 일 업데이트 : HTML은 이제 HTML5에서이를 지원합니다. 다른 답변을 참조하세요.)

플래시 업로드에는 다른 장점도 있습니다. 플래시는 대용량 파일의 업로드가 진행됨에 따라 진행률 표시 줄을 표시하는 기능을 제공합니다. (내가 틀렸을 수도 있지만, 뒤에서 Flash를 사용함으로써 Gmail이 그렇게하는 방식이라고 확신합니다.)

다음은 사용자가 파일을 선택하여 표시 할 수있는 Flex 4 앱 샘플입니다.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               creationComplete="init()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Button x="10" y="10" label="Choose file..." click="showFilePicker()" />
    <mx:Image id="myImage" x="9" y="44"/>
    <fx:Script>
        <![CDATA[
            private var fr:FileReference = new FileReference();

            // Called when the app starts.
            private function init():void
            {
                // Set up event handlers.
                fr.addEventListener(Event.SELECT, onSelect);
                fr.addEventListener(Event.COMPLETE, onComplete);
            }

            // Called when the user clicks "Choose file..."
            private function showFilePicker():void
            {
                fr.browse();
            }

            // Called when fr.browse() dispatches Event.SELECT to indicate
            // that the user has picked a file.
            private function onSelect(e:Event):void
            {
                fr.load(); // start reading the file
            }

            // Called when fr.load() dispatches Event.COMPLETE to indicate
            // that the file has finished loading.
            private function onComplete(e:Event):void
            {
                myImage.data = fr.data; // load the file's data into the Image
            }
        ]]>
    </fx:Script>
</s:Application>