fileReader实现图片上传预览
怎样在input file中添加图片不提交的情况下,预览图片,当然现在很多插件可以实现,但如果在手机端页面使用呢,插件就没几个兼容性可以实现了
疑问:
- 页面不能跳转,就不能submit,包括js中也不可以
- ajax中不能把文件serialize()如何传值
fileReader
- 它被用来将一个文件读取为二进制字符串,并通过 xhr 发送到后端形成交互。作为 File API 的一部分,FileReader 专门用于读取文件,根据 W3C 的定义,FileReader 接口 "提供一些读取文件的方法与一个包含读取结果的事件模型"。
- 测试代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<form id="test" action="action.php" method="post" enctype="multipart/form-data">
<p>
<label>请选择一个图像文件:</label>
<input type="file" id="demo_input" />
</p>
<div id="demo_result">
<!-- 这里用来显示读取结果 -->
</div>
</form>
<script type="text/javascript">
var input = document.getElementById('demo_input');
var result = document.getElementById('demo_result');
if ( typeof FileReader === 'undefined' ){
result.innerHTML = "<p class='warn'>抱歉,你的浏览器不支持 FileReader</p>";
input.setAttribute( 'disabled','disabled' );
} else {
input.addEventListener( 'change',readFile,false );
}
function readFile(){
var file = this.files[0];
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
result.innerHTML = '<img src="'+this.result+'" alt=""/>'
}
}
</script>
</body>
</html>