将图像从<input文件>加载到<img>中
我试图加载用户通过一个元素select的图像。
我添加一个onchange事件处理程序到input元素像这样：
<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构造函数在用户select文件后读取文件。
例
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
- Chrome 7
- Firefox 3.6
- Opera 12.02
如果File API不受支持，则不能（在大多数安全意识的浏览器中）从文件input框中获取文件的完整path，也不能访问数据。 唯一可行的解决scheme是将表单提交给隐藏的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]传递，构造一个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); }
安迪E是正确的，没有基于HTML的方式来做到这一点*; 但如果你愿意使用Flash，你可以做到这一点。 以下在安装Flash的系统上可靠运行。 如果你的应用程序需要在iPhone上工作，那么当然你需要一个基于HTML的解决scheme。
*（ Update 4/22/2013： HTML现在支持HTML5，请参阅其他答案。）
Flash上传也有其他的好处 – 闪光让你能够显示一个进度条作为一个大文件的上传进展。 （我非常确定这是Gmail的做法，通过在幕后使用Flash，虽然我可能是错误的。）
下面是一个示例Flex 4应用程序，允许用户select一个文件，然后显示它：
<?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 (eg, 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>
$('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">
这可以通过HTML 5轻松完成，请参阅以下链接： http : //www.html5rocks.com/en/tutorials/file/dndfiles/
