使用 HTML5 为移动设备捕获的图像答案

【问题标题】：captured images with HTML5 for mobile devices使用 HTML5 为移动设备捕获的图像
【发布时间】：2013-01-11 16:03:00
【问题描述】：

我正在为 web 移动使用 html 5 <input type="file" accept="image/*;capture=camera"/> 文件元素拍照它工作正常，但我如何处理 file.value 以将其发送到 Web 服务或数据库？这是移动设备的演示Demo link

这是我的代码，但不起作用我无法获取文件上传值

   <html>
<script>
function getPhoto()
{
alert('2');
var fu1 = document.getElementById("myfile").value;
alert("You selected " + fu1);
}
</script>
<body>
<form>
<input type="file" name="myfile" accept="image/*;capture=camera"/>
<input type="submit"/>
<input type="button" value="get Photo path" onclick="getPhoto()">
</form>
</body>
</html>

【问题讨论】：

嗨 robertc 我添加了我的代码
我猜应该是accept="image/*" capture="camera"？ dev.opera.com/articles/view/media-capture-in-mobile-browsers

标签： html api jquery-mobile mobile

【解决方案1】：

您需要使用文件 API：http://www.w3.org/TR/FileAPI/

这是来自 html5rocks.com 的一个不错的教程：http://www.html5rocks.com/en/tutorials/file/dndfiles/

尝试做这样的事情

HTML

<input type="file" id="myfile" name="myfile" accept="image/*;capture=camera"/>

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object, files[0] is your file
}

document.getElementById('file').addEventListener('change', handleFileSelect, false);

如果需要在JS中读取文件，则需要使用FileReader API。

【讨论】：

document.getElementByID('files') 还是 myfile？与它们一起，它给出了 chrome “Uncaught TypeError: Cannot call method 'addEventListener' of null”错误
哎呀抱歉打错了你应该添加 id="myfile" 和 document.getElementByID('myfile')
这个文件存储在哪里？我将它与 iPhone 结合使用，效果很好。我可以读取拍摄的图片并将其显示在 DOM 中，但我想知道该文件的路径在哪里？

【解决方案2】：

您错过了为您的输入标签提供 ID。你的输入标签会是这样的

<input type="file" name="myfile" id="myfile" accept="image/*;capture=camera"/>

【讨论】：