fileReader实现图片上传预览
fileReader对象：它被用来将一个文件读取为二进制字符串，并通过 xhr 发送到后端形成交互。作为 File API 的一部分，FileReader 专门用于读取文件，根据 W3C 的定义，FileReader 接口 “提供一些读取文件的方法与一个包含读取结果的事件模型”。
代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!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> |
请尊重我们的辛苦付出，未经允许，请不要转载 本站 的文章，鄙视各种无耻的采集行为！