本文介绍了如何使用JavaScript实现一个简单的图片上传并显示缩略图的功能，适用于PC端网站。通过HTML、CSS和JS代码展示了一个基本的用户界面，包括上传按钮、原始头像和缩略图显示。当用户选择图片后，使用FileReader API读取文件并显示为缩略图。同时，作者提到了遇到的长图片地址问题，并讨论了将数据库字段类型从varchar改为text的权宜之计，期待更优解决方案。
参加的项目是一个PC端网站，需要做一个更换头像的功能，要求是显示原先头像，然后点击上传按钮，选择图片后，显示被选中的图片的缩略图。
效果图如下（有点丑，只是为了实现效果，手动滑稽）：
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>1234</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="myAvatar">
<span class="myAvatar">我的头像</span>
<img src="3.jpg" width="100px" height="100px" alt="我的头像">
</div>
<div id="changeAvatar">
<span class="changeAvatar">修改头像</span>
<label>
<input onchange="previewFile
最低0.47元/天 解锁文章
扫一扫
405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
