利用input图片上传

迈不过友情╰ 2023-07-19 12:27 29阅读 0赞

利用HTML5FileReader()中的.readAsDataURL()方法将图片url转为Base64位码

<!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>

多图片上传

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>