web前端图片上传的几种方式，FromDate上传及时预览，html表单上传及时预览

一，html表单上传图片，配合js实现即时预览

利用html表单上传图片，使用from表单的 input标签file类型控件，配合js实现上传及时预览

上传图片前需要了解几点知识
1.上传图片，表单method必须是post传值，不能设置get传值
2.form表单必须设置enctype=“multipart/form-data”，（其实每个表单都有，你不设置他的默认值就是enctype=“application/x-www-form-urlencoded”）
3.每个input标签file类型的上传域表单，都有一个files（里面存储的一些上传图片的信息）
4.要利用文件读取对象，new FileList 对象地下的readAsDataURL 方法（此方法会读取指定的 Blob 或 File 对象）

		    <form action="地址填写后端接收地址" method="POST" enctype="multipart/form-data">
	
		        <p>上传图片名称</p>
	
		        <img src="#" alt="" id="img">
	
		        <input type="file" name="file" id="file">
	
		    </form>
	
		    <script>
	
		        let file = document.querySelector('#file');
	
		        let img = document.querySelector('#img');
	
		        file.addEventListener('change', function() {
	
		            console.log(this.files); // 显示 FileList {0: File, length: 1} 
	
		            //实现图片事实显示 
	
		            // 实现思路: 
	
		            // 1.监听文件域上传  使用onchange监听 
	
		            // 2.创建读取文件对象，利用new FileReader  创建 
	
		            // 3.读取文件 每个文件域都有一个files  
	
		            // 4.等图片读取完，在把 router.result 获取地址，赋值给图片 
	
		            var router = new FileReader(); //创建读取文件对象 
	
		            console.log(router); //FileReader {readyState: 0, result: null, error: null, onloadstart: null, onprogress: null, …} 
	
		            router.readAsDataURL(this.files[0]); //读取文件路劲 
	
		            router.onload = function() {
	
		                img.src = router.result;
	
		            }
	
		        });
	
		    </script>

二，通过发送ajax请求和FormData函数可以实现无刷新上传图片效果，配合jq实现即时预览

在这里我们通过jQuery的，已经封装好的ajax函数发送ajax请求，并使用FormData函数（FormData函数，是将form表单元素的name与value进行组合,并异步上传文件）

		   <!-- //引入jq文件 --> 
	
		    <script src="./3.4.1/jquery.min.js"></script>
	
		    <!-- 创建from表单 --> 
	
		    <form action="地址填写后端地址" method="POST">
	
		        <p>上传图片名称</p>
	
		        <img src="#" alt="" id="img">
	
		        <input type="file" name="file" id="file">
	
		    </form>
	
		    <!-- //写入jq代码 --> 
	
		    <script>
	
		        $('#file').on('change', function() {
	
		            let formData = new FormData();//创建 formData实例  
	
		            formData.append('file', this.files[0]); //给formData实例添加一个 表单项   
	
		            console.log(formData);
	
		            $.ajax({
	
		                type: 'post',
	
		                url: 'http://127.0.0.1/home/1',
	
		                data: formData,
	
		                processData: false,//告诉jQuery不用处理发送的数据 
	
		                contentType: false,//考试jQuery不用设置content-type请求头 
	
		                success: function(con) {
	
		                    // con[0].path   //就服务器返回的  图片路径（路径是相对服务器的） 
	
		                    $('#img').prop('src',con[0].path);
	
		                },
	
		                error: function(err) {
	
		                    console.log(err) //返回的错误信息 
	
		                }
	
		            });
	
		        });
	
		    </script>