从 < input file > 将图像加载到 < img >

我试图通过一个元素加载用户选择的图像。

我向 input 元素添加了一个 onchange 事件处理程序，如下所示:

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

预览 _ 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 值，我希望在这里加载新图片。

但是，看起来 onload 从未发生，也没有将任何东西加载到 html 中。

我该怎么办？

251878 次浏览
小开
最佳答案

在支持 文件 API的浏览器中，一旦用户选择了文件，就可以使用 文件阅读器构造函数来读取文件。

例子

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.
}
}

浏览器支持

  • IE10
  • Safari 6.0.2
  • Chrome 7
  • Firefox 3.6
  • 歌剧12.02

在不支持 File API 的情况下，您不能(在大多数具有安全意识的浏览器中)从文件输入框获取文件的完整路径，也不能访问数据。唯一可行的解决方案是将表单提交给一个隐藏的 iframe，并将文件预先上传到服务器。然后，当请求完成时，您可以将图像的 src 设置为上载文件的位置。

小开

Andy E 是正确的，没有基于 HTML 的方法可以做到这一点 * ; 但是如果你愿意使用 Flash，你可以这样做。在安装了 Flash 的系统上，以下工作可靠。如果你的应用程序需要在 iPhone 上运行，那么当然你需要一个基于 HTML 的备用解决方案。

* (在 HTML5中，2013年4月22日更新: HTML 现在支持这一点。请参阅其他答案。)

Flash 上传还有其他优点—— Flash 可以让你在上传大文件的过程中显示进度条。(我很确定 Gmail 就是这么做的，在后台使用 Flash，尽管我可能错了。)

下面是一个示例 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>
小开

正如 iEamin 在他的回答中所说，HTML5现在支持这一点。他给出的链接 http://www.html5rocks.com/en/tutorials/file/dndfiles/非常好。下面是基于该站点的示例的最小示例，但请参阅该站点以获得更详细的示例。

在 HTML 中添加一个 onchange事件侦听器:

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

使用 id 创建一个图像标记(我指定了 height=200来确保屏幕上的图像不会太大) :

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

下面是 onchange事件侦听器的 JavaScript。它接受作为 event.target.files[0]传递的 File对象，构造一个 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 中对我很有用。

小开 

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>

小开

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);

小开

最简单的方法是创建一个对象 URL

<input onChanged={(event)=>{ URL.createObjectURL(event!.target!.files[0]) }} />

提交答案