我正在尝试通过元素加载用户选择的图像。
我向输入元素添加了一个 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 值。
但是，似乎 onload 永远不会发生并且它不会将任何内容加载到 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.
}
}
在不支持 File API 的情况下，您无法（在大多数具有安全意识的浏览器中）从文件输入框中获取文件的完整路径，也无法访问数据。唯一可行的解决方案是将表单提交到隐藏的 iframe 并将文件预先上传到服务器。然后，当该请求完成时，您可以将图像的 src 设置为上传文件的位置。
正如 iEamin 在他的回答中所说，HTML 5 现在确实支持这一点。他提供的链接http://www.html5rocks.com/en/tutorials/file/dndfiles/非常好。这是基于该站点示例的最小示例，但请参阅该站点以获取更全面的示例。
将onchange事件侦听器添加到您的 HTML：
<input type="file" onchange="onFileSelected(event)">
制作一个带有 id 的图像标签（我指定height=200确保图像在屏幕上不会太大）：
<img id="myimage" height="200">
这是onchange事件侦听器的 JavaScript 。它接受File作为 传递的对象event.target.files[0]，构造 aFileReader以读取其内容，并设置一个新的事件侦听器以将结果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 中对我有用。
// 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 上传还有其他优点——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>