标签 fileReader 下的文章

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>