本文解决的问题:
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>
<