上传图片文件进行预览，我在chrome浏览器上都可以实现，不过一用手机访问页面就不行，var dataURL = e.target.result,//手机e.target.result取不到，var imgURL = URL.createObjectURL(file);//手机window.URL取不到，程序执行不下去。。。网上的别的方法我尝试了一下，都不行，请问哪位大神知道，能帮我解决一下，谢谢!!
代码：
<!DOCTYPE HTML>
<html lang="en-US"><head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.7.1.min.js"></script>
</head>
<body>
<form action="server.cgi" method="post" enctype="multipart/form-data">
<input type="file" accept="image/*" capture>
<canvas></canvas>
<input type="submit" value="Upload">
</form>
<script type="text/javascript">
var input = document.querySelector('input[type=file]'); // see Example 4
input.onchange = function () {
var file = input.files[0];
//upload(file);
drawOnCanvas(file); // see Example 6
//displayAsImage(file); // see Example 7
};
function upload(file) {
var form = new FormData(),
xhr = new XMLHttpRequest();
form.append('image', file);
xhr.open('post', 'server.php', true);
xhr.send(form);
}
//以canvas的形式显示
function drawOnCanvas(file) {
var reader = new FileReader();
reader.onload = function (e) {
var dataURL = e.target.result,
c = document.querySelector('canvas'), // see Example 4
ctx = c.getContext('2d'),
img = new Image();
img.onload = function() {
c.width = img.width;
c.height = img.height;
ctx.drawImage(img, 0, 0);
};
img.src = dataURL;
};
reader.readAsDataURL(file);
}
//以img的形式显示
function displayAsImage(file) {
var imgURL = URL.createObjectURL(file),
img = document.createElement('img');
img.onload = function() {
URL.revokeObjectURL(imgURL);
};
img.src = imgURL;
document.body.appendChild(img);
}
</script>
</body>
</html>
578
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
