桌面浏览器可以预览,在app里不能实现预览。
测试也是支持FileReader。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<div class="mui-content">
<input id="iii" name="uploadfile" type="file">
<img id="previewImage">
</div>
<script type="text/javascript">
document.getElementById('iii').onchange = function(evt) {
// 如果浏览器不支持FileReader,则不处理
//if (!window.FileReader) return;
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
// img 元素
document.getElementById('previewImage').src = e.target.result;
};
})(f);
reader.readAsDataURL(f);
}
}
</script>
</body>
</html>
0 个回复