Html 理解<；输入类型="；文件"&燃气轮机；
我正试图让我的头左右，并使用选定的图像在一个网站上 比如说，我有一个简单的网站，用户可以通过以下方式从系统中选择图像：Html 理解<；输入类型="；文件"&燃气轮机；,html,file-upload,preloader,Html,File Upload,Preloader,我正试图让我的头左右，并使用选定的图像在一个网站上 比如说，我有一个简单的网站，用户可以通过以下方式从系统中选择图像： <input type="file" id="userImage"> 问题： 1） 我现在可以使用userImage吗？比如在画布上绘制，或者我需要先上传到网站服务器吗 2） 如果我使用该图像，网站是否必须在每次使用时上载它，还是将其保留在内存中 3） 如何知道图像何时可以使用？（出于同样的原因，在画布上绘制之前，应在开始时预加载所有图像） 非常感谢您的帮助：）
<input type="file" id="userImage">
谢谢你的回答。因此，它看起来在html5中是可能的，但尚未得到普遍支持 1）无法打开或修改图像，因为客户端脚本是在浏览器沙箱中执行的。如果脚本可以访问文件系统或用户文件，这将是一个安全问题 2） 否，浏览器将文件逐块发送到远程服务器
3） 请参阅HTML4中的第1项：），这是不可能的，但在HTML5中，您应该能够使用访问本地文件。但是，我不确定不同的浏览器何时（以及如何）支持它。在我的本地firefox 14.0.1中，以下代码工作并生成所选文件的二进制数据：
var reader = new FileReader()
reader.readAsDataURL(document.getElementById('userImage').files[0])
alert(reader.result)
<html>
<body>
<script type="text/javascript">
function doIt() {
var reader = new FileReader();
reader.onload = (function(e) {
var img = new Image();
img.src = e.target.result;
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.drawImage(img,10,10);
}
);
reader.readAsDataURL(document.getElementById('userImage').files[0]);
}
</script>
<input type="file" id="userImage" />
<button onclick="doIt()">Render Image</button><br/>
<canvas id="canvas" style="border: 1px solid black; height: 400px; width: 400px;"/>
</body>
</html>
函数doIt（）{
var reader=new FileReader（）；
reader.onload=（函数（e）{
var img=新图像（）；
img.src=e.target.result；
var c=document.getElementById（“画布”）；
var ctx=c.getContext（“2d”）；
ctx.drawImage（img，10,10）；
}
);
reader.readAsDataURL（document.getElementById（'userImage'）.files[0]）；
}
渲染图像
也许你应该考虑阅读。< / P>谢谢你的回答。因此，这在html5中似乎是可能的，但尚未得到普遍支持。您可以在网站上找到有关支持FileReader API的最新信息，以供投票否决此答案的人使用：当时不支持从客户端访问文件
<html>
<body>
<script type="text/javascript">
function doIt() {
var reader = new FileReader();
reader.onload = (function(e) {
var img = new Image();
img.src = e.target.result;
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.drawImage(img,10,10);
}
);
reader.readAsDataURL(document.getElementById('userImage').files[0]);
}
</script>
<input type="file" id="userImage" />
<button onclick="doIt()">Render Image</button><br/>
<canvas id="canvas" style="border: 1px solid black; height: 400px; width: 400px;"/>
</body>
</html>