A와 이미지를로드

A와 이미지를로드 에서

---

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

다음과 같이 입력 요소에 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]구성 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에서 저에게 효과적입니다.

---

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

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

Flash uploading also has other advantages -- Flash gives you the ability to show a progress bar as the upload of a large file progresses. (I'm pretty sure that's how Gmail does it, by using Flash behind the scenes, although I may be wrong about that.)

Here is a sample Flex 4 app that allows the user to pick a file, and then displays it:

<?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>

---

var outImage ="imagenFondo";
function preview_2(obj)
{
	if (FileReader)
	{
		var reader = new FileReader();
		reader.readAsDataURL(obj.files[0]);
		reader.onload = function (e) {
		var image=new Image();
		image.src=e.target.result;
		image.onload = function () {
			document.getElementById(outImage).src=image.src;
		};
		}
	}
	else
	{
		    // Not supported
	}
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>preview photo</title>
</head>

<body>
<form>
	<input type="file" onChange="preview_2(this);"><br>
	<img id="imagenFondo" style="height: 300px;width: 300px;">
</form>
</body>
</html>

참고URL : https://stackoverflow.com/questions/3814231/loading-an-image-to-a-img-from-input-file