本文介绍了如何使用JavaScript实现一个简单的图片上传并显示缩略图的功能，适用于PC端网站。通过HTML、CSS和JS代码展示了一个基本的用户界面，包括上传按钮、原始头像和缩略图显示。当用户选择图片后，使用FileReader API读取文件并显示为缩略图。同时，作者提到了遇到的长图片地址问题，并讨论了将数据库字段类型从varchar改为text的权宜之计，期待更优解决方案。
摘要由CSDN通过智能技术生成
参加的项目是一个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="change
参加的项目是一个PC端网站，需要做一个更换头像的功能，要求是显示原先头像，然后点击上传按钮，选择图片后，显示被选中的图片的缩略图。效果图如下（有点丑，只是为了实现效果，手动滑稽）： 代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;1234&lt;/title&gt; &lt;scri...
<div id="preview_wrapper">
<div id="preview_fake">
<img id="preview" onload="onPreviewLoad_(this,200,200)"/>
<input id="upload_img" type="file" onchange="onUploadImgChange(this,'preview','preview_fake','preview_size_fake')"/>
<img id="preview_size_fake"/>
</body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPl
<input name="coverImage" onClick="" onchange="setImagePreview(this);" type="file" style="text-align:center;float: left;" placeholder="只能选取 jpg、jif、bmp格式 " />
<div id="localImag" style...
Js
选择文件->Jquery
上传图片
->服务器接收图片流->存储图片->返回结果到
Js
端->
显示
缩略图
本文
上传图片
所用的
Js
库是ajaxfileupload,下载地址：http://files.cnblogs.com/files/yujie365/ajaxfileupload.
js
，Html布局采用bootstrap.
后端处理流...
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = fun...
//下面用于图片上传预览功能
function setImagePreview(avalue) {
var docObj = document.getElementById("doc");
var imgObjPreview = document.getElementById("preview");
2、文件读取
if(window.FileReader){ //检测浏览器是否支持 FileReader
var reader = new FileReader(); //实例化一个 FileReader 对象
reader.onloaded = fun
