利用input file模拟一个图片上传

用到的知识点:

(1)<input type="file">标签 (点击阅读参考资料
(2)利用addEventListener()事件监听<input type='file'>改变(点击阅读参考资料
(3)利用HTML5FileReader()中的.readAsDataURL()方法将图片url转为Base64位码(点击阅读参考资料
(4)File​Reader​.onload()方法(点击参考资料

ES5:
源码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>input file图片上传</title>
    </head>
    <body>
        <input type="file" accept="image/*"  id="file" value=""/> 
        <div id="uploadImg" style="width: 500px; height: 500px;">
        </div>
    </body>
    <script>
        
        var oUploadImg = document.querySelector("#uploadImg") //获取uploaImg节点,
                oFile = document.querySelector("#file"); //获取input file节点
                console.log(oUploadImg);
                console.log(oFile);
                console.log(oFile.files); 
                oFile.addEventListener('change',function(){
//                    console.log(oUploadImg);
//                    console.log(oFile);
                    console.log(this); //this指针指向input
                    console.log(this.files);
                    var file = this.files[0];
                    console.log(file.type);
                    console.log(file.type.indexOf("image"));//输出0的时候成立,-1的时候不成立
                    if(file.type.indexOf("image")==0){
                        var reader = new FileReader(); //创建FileReader对象实例reader
                        reader.readAsDataURL(file); //将图片url转换为base64码
                        reader.onload = function(e){
                            var newUrl = this.result;
                            console.log(newUrl);
                            oUploadImg.style.backgroundImage = 'url('+newUrl+')';
                        }
                        console.log(reader.result);
                        console.log(reader);
                        console.log(reader);
                    };
                    
                })
    </script>
</html>

拓展--多图片上传

用到的知识点:

(1)formData()表单提交方法(点击阅读材料

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>input file图片上传</title>
    </head>
    <body>
        <input type="file" accept="image/*"  id="file" value="" multiple/> 
        <div id="uploadImg" style="width: 500px; height: 500px;">
        </div>
    </body>
    <script>
        
        var oUploadImg = document.querySelector("#uploadImg") //获取uploaImg节点,
                oFile = document.querySelector("#file"); //获取input file节点
                console.log(oUploadImg);
                console.log(oFile);
                console.log(oFile.files); 
            oFile.addEventListener('change',function(){
//                    console.log(oUploadImg);
//                    console.log(oFile);
                    console.log(this); //this指针指向input
                    console.log(this.files);
                    //创立FormData对象
                    var formData = new FormData(); //实例化一个formData对象
                    formData.append =("file",this.files); //this.files对象转换为字符串
                    console.log(formData);
                    console.log(formData);
                })
    
    </script>
</html>
            
阅读 445

推荐阅读
前端专栏
用户专栏

前端学习专栏

2 人关注
13 篇文章
专栏主页