利用HTML5上传文件并显示在前端预览，以图片为例

https://blog.csdn.net/zhaoxiang66/article/details/79097250

由于项目中有上传文件的功能，所以这次单独拿出来研究研究，我上网查了查，以前都是用iframe，但是自从HTML5出世之后，就可以利用H5的一些特性来上传文件了，啥也不说了，我上代码了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5实现上传</title>
    <style type="text/css">
        #result{
            width: 200px;
            height:112px;
            border:1px solid #eee;
        }
        #result img{
            width: 200px;
        }
        input{
            width: 70px;
            margin-top: 10px;
        }
        @-moz-document url-prefix() { input { width:65px; } }/*单独对火狐进行设置*/
    </style>
</head>
<body>
    <div id = "result"></div>
    <input id="pic" type="file" name = 'pic' accept = "image/*" onchange = "selectFile()"/>
    <!-- <button onclick = "handIn()">提交</button> -->
    <script type="text/javascript">
        //var files = document.getElementById('pic').files;
        var form = new FormData();//通过HTML表单创建FormData对象
        var url = '127.0.0.1:8080/'
        function selectFile(){
            var files = document.getElementById('pic').files;
            console.log(files[0]);
            if(files.length == 0){
                return;
            }
            var file = files[0];
            //把上传的图片显示出来
            var reader = new FileReader();
            // 将文件以Data URL形式进行读入页面
            console.log(reader);
            reader.readAsBinaryString(file);
            reader.onload = function(f){
                var result = document.getElementById("result");
                var src = "data:" + file.type + ";base64," + window.btoa(this.result);
                result.innerHTML = '<img src ="'+src+'"/>';
            }
            console.log('file',file);
            ///////////////////
            form.append('file',file);
            console.log(form.get('file'));
        }
        //var xhr = new XMLHttpRequest();
        // function handIn(){
        //  console.log(form.get('file'));
        //  xhr.open("post", url, true);
        //  xhr.addEventListener("readystatechange", function() {  
        //      var result = xhr;  
        //      if (result.status != 200) { //error  
        //          console.log('上传失败', result.status, result.statusText, result.response);  
        //      }   
        //      else if (result.readyState == 4) { //finished  
        //          console.log('上传成功', result);  
        //      }  
        //  });   
        // }
    </script>
</body>
</html>

 

 

结果如下 
这里写图片描述

这里写图片描述

下面被我注释的是通过AJAX上传文件，把文件传到后台的代码，由于没有后台接口供我测试，url也不对，所以只能写成这样了 
下面附上input中的“type = file” 中accept属性的一些配置，上传什么文件配置什么设置都在下边

posted @ 2018-09-11 15:47  yangchunlong  阅读(2053)  评论(1)    收藏  举报