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

时间:2013-01-11 16:03:01

标签: html5 api jquery-mobile mobile

我正在为web mobile使用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>

2 个答案:

答案 0 :(得分:2)

您需要使用文件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"/>

<强> JS

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。

答案 1 :(得分:1)

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

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