js上传图片

最新推荐文章于 2025-07-16 15:51:03 发布

原创

最新推荐文章于 2025-07-16 15:51:03 发布 · 456 阅读

标签

#javascript #前端 #开发语言

收录于

本文将介绍如何使用JavaScript在前端实现图片上传功能，包括文件选择、预览、上传到服务器等步骤，同时涉及File API和Ajax等相关技术。

        <div class="my-box">
			<img src="img/01.png"/>
			 <input type="file" id="file" />
			<h4>欢迎您</h4>
			<button onclick="logOut()">退出登录</button>
		</div>
		
		<script type="text/javascript">
			//判断是否登录
			if(!localStorage.getItem("name")){
				window.location.href="login.html";
			}
			//退出
			function logOut(){
				localStorage.setItem("name","");
				window.location.reload();
			}
			//上传图像
			var file = document.getElementById('file');
            var image = document.querySelector("img");
            //判断是否有头像
            if(localStorage.getItem('src')){
            	image.setAttribute("src", localStorage.getItem('src'));
            }
            //改变头像
            file.onchange = function() {
                var fileData = this.files[0];//获取到一个FileList对象中的第一个文件( File 对象),是我们上传的文件
                var pettern = /^image/;
                console.info(fileData.size)
                //判断文件格式