了解< input type ="档案"> [英] Understanding <input type="file">
问题描述
比方说，我有一个简单的网站，让用户从他们的系统中选择一个图像：
< input type =fileid =userImage>
然后在JavaScript中，我可以这样做来获取文件：
var userImage = document.getElementById（'＃userImage'）。files [0];
问题： 非常感谢您的帮助： 后续 感谢您的回答。所以它看起来像在html5中可能，但尚未普遍支持。在HTML4中，这是不可能的，但是在HTML5中，你应该能够使用来访问本地文件。 http://www.w3.org/TR/FileAPI/ =noreferrer> W3 File API 。但是，我不确定何时（以及如何）将由不同的浏览器支持。在我的本地firefox 14.0.1中，下面的代码工作并产生所选文件的二进制数据： 以下页面将本地图像绘制到画布上： 也许你应该考虑阅读I am trying to get my head around and using the selected image in a website. Let's say I have a simple website that lets the user select an image from their system using: Then in the JavaScript I can do this to get the file: Questions: 1) Can I now use userImage? Such as drawing it on a canvas, or do I need to uploaded it to the websites server first? 2) If I use the image, does the website have to upload it every-time I use it, or does it stay in memory? 3) How do I know when the image is ready to use? (for the same reasons all images should be preloaded at the start before drawn on canvas) Thanks so much for your help :) Follow-up Thanks for your answers. So it looks like it is possible in html5 but not yet universally supported. In HTML4 this would not be possible, but in HTML5 you should be able to access local files using the W3 File API. However, I'm not sure when (and how) it will be supported by the different browsers. In my local firefox 14.0.1, the following code works and yields the binary data of the selected file: The following page paints a local image onto a canvas: Maybe you should consider reading 2. 这篇关于了解< input type ="档案">的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
1）我现在可以使用userImage吗？比如画在画布上，还是需要先上传到网站服务器上？
2）如果我用的是图片，网站是否要上传它每次我使用它，还是留在内存中？
3）我怎么知道图像准备好使用？ （出于同样的原因，所有的图像应该在开始之前预先加载在画布上）
var reader = new FileReader（）
reader.readAsDataURL（document.getElementById（'userImage'）。files [0]）
alert（reader.result）
$ b
< ; HTML>
< body>
< script type =text / javascript>
函数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>信信息范范范范范范内读读程亦范范范读范范内读范范
< button onclick =doIt（）>渲染图像< / button>< br />
< canvas id =canvasstyle =border：1px solid black; height：400px; width：400px;/>
< / body>
< / html>
<input type="file" id="userImage">
var userImage = document.getElementById('#userImage').files[0];
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>
