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

用到的知识点：

（1）<input type="file">标签（点击阅读参考资料）
（2）利用addEventListener()事件监听<input type='file'>改变（点击阅读参考资料）
（3）利用HTML5FileReader()中的.readAsDataURL()方法将图片url转为Base64位码（点击阅读参考资料）
（4）FileReader.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>

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

用到的知识点：

拓展--多图片上传

用到的知识点:

顾昀峰

引用和评论

vscode 怎么打断点调试

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具