本文提供了一种使用HTML/CSS/JavaScript实现在网页上即时显示通过表单上传的图片的方法，并利用JavaScript（JQuery）判断文件是否为图片以及调整图片高度等于宽度，以保持良好的页面布局和用户体验。
本文解决的问题：
1. 通过前端语言（HTML/CSS/JavaScript）直接在网页显示提交的图片，即显示<input type="file">提交的图片；
2. 判断提交的文件是否为图片文件；
3. 用JavaScript（JQuery）调整图片的高度等于它的宽度（更确切的说，可以指定它们满足这样的关系：height = percentage*width）。这是可选的，调整图片大小是出于以下两点考虑：
1）过长的图片可能会影响网页整体布局
2）你可能希望一打开网页，图片就能一览无余，而不需要将右侧的滚动条下拉才能看到图片全貌，过长的图片往往无法在一个页面单元展示完整。
源码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<title>Image preview example</title>
<
最低0.47元/天 解锁文章
扫一扫
4483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
