html怎么完成页面上传图片并且能进行展示的示例代码分享

本功能实现图片上传并显示，点击“查看”按钮也显示图片

<p class="form-group">
<label class="col-md-2 control-label">缩略图</label>
<p class="col-md-2">
<input type="hidden" name="news.thumbnail_atta_id" value="${news.thumbnail_atta_id!}" id="thumbnail_atta_id"/>
<p class="col-md-2">
@ if (!isEmpty(news.thumbnail_atta_id)) {
<p class="row" style="margin-bottom:5px;">
<button type="button" class="btn btn-primary" id="showThumbnail">查看</button>
</p>
@ }
<p class="row">
<span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>上传...</span>
    <input id="fileupload" type="file" data-url="/attahttp://img3.dunguai.com/upload/web_2/news-thumbnail" multiple>
</span>
</p>
</p>
<p>
<img src="" id="thumbnail" width="150" height="100" style="display:none;"/>
</p>
</p>
</p>

js代码：

<script type="text/JavaScript">
//缩略图文件上传
$('#fileupload').fileupload({
dataType: 'json',
add: function(e, data) {
var acceptFileTypes = /(\.

关键词：html如何完成页面上传图片并且能进行展示的示例代码分享