html页面上传图片并进行展示

html页面：

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

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

js代码：

//缩略图文件上传
$('#fileupload').fileupload({
dataType: 'json',
add: function(e, data) {
var acceptFileTypes = /(\.|\/)(gif|jpe?g|png)$/i;
if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
alert('请上传图片格式的文件！')
} else {
data.submit();
}
},
done: function (e, data) {
$('#thumbnail_atta_id').val(data.result.id);
$('#thumbnail').attr('src', data.result.url).show();
}
});
//查看缩略图
$('#showThumbnail').click(function(){
var src = $('#thumbnail').attr('src');
var id=$('#thumbnail_atta_id').val();
if (!src) {
$.get('/atta/show/${news.thumbnail_atta_id!}', function(res) {
var url=localurl+res[0].url;
//var url = "www.baidu.com/img/bd_logo1.png";
alert(url);
$('#thumbnail').attr('src', url).show();
}, 'json')
}
})

</script>

java代码：

Controller类：

/**
* 上传并返回附件ID及URL
*/

public void upload() {
UploadFile file = getFile();
String fileName = file.getFileName();
String fileSuffix = getSuffix(fileName);
String module = getPara(0);
String category = getPara(1);

String id = AttachmentService.me.uploadFile(file, module, category);
Map<String, Object> json = new HashMap<String, Object>();
json.put("id", id);
json.put("url", "/upload/" + category + "/" + module + "/" + id + fileSuffix);
json.put("name", fileName);

renderJson(json);
}

/**
* 返回给定ID的附件的访问URL
*/
public void show() {
String ids = getPara();
if (null == ids) {
ids = getPara("ids");
}
String[] idArr = ids.split(",");

StringBuffer sql = new StringBuffer();
sql.append(" select * from attachment where id in ( ");
for (int index = 0; index < idArr.length; index++) {
sql.append(" ? ");
if (index != idArr.length - 1) {
sql.append(" , ");
}
}
sql.append(" ) ");

List<Map<String, Object>> json = new ArrayList<Map<String,Object>>();
List<Attachment> list = Attachment.me.find(sql.toString(), (Object[])idArr);

//转换成JsonArray
String url = null;
for (Attachment atta : list) {
url = getAttaURL(atta);
Map<String, Object> item = new HashMap<String, Object>();
item.put("id", atta.getStr("id"));
item.put("url", url);
item.put("name", atta.getStr("name"));
json.add(item);
}
renderJson(json);
}

private String getAttaURL(Attachment atta) {
StringBuffer path = new StringBuffer();
path.append(File.separator + "upload" + File.separator);
path.append(atta.getStr("category"));
path.append(File.separator);
path.append(atta.getStr("module"));
path.append(File.separator);
path.append(atta.getStr("id"));
path.append(getSuffix(atta.getStr("name")));
return path.toString();
}

private String getSuffix(String name) {
return name.replaceAll(".*(\\..*)", "$1");
}

service类：

/**
* 上传文件
* @param file uploadFile
* @param module 模块，如news/cases/doctor/
* @param category 分类，如缩略图thumbnail/头像avatar/幻灯片ppt
* @return 附件主键
* @throws IOException
*/
public String uploadFile(UploadFile file, String module, String category) {
String attachmentId = CommonUtils.getUUID();
File f = file.getFile();

new Attachment().set("id", attachmentId)
.set("name", file.getOriginalFileName())
.set("size", f.length())
.set("content_type", file.getContentType())
.set("module", module)
.set("category", category)
.set("upload_time", new Date())
.save();
try {
//重命名
String dirPath = file.getSaveDirectory();
File renamedFile = new File(dirPath + attachmentId + file.getOriginalFileName().replaceAll(".*(\\..*)", "$1"));
FileUtils.moveFile(f, renamedFile);
//PPT需要转换成图片，拷贝一份到转换目录(/upload/trans/ppt)
if (category.equals("ppt")) {
FileUtils.copyFileToDirectory(renamedFile, new File(dirPath + "trans/ppt/"), true);
}
//拷贝到对应的目录下
FileUtils.moveToDirectory(renamedFile, new File(dirPath + category + File.separator + module), true);
} catch(Exception e) {
e.printStackTrace();
}
return attachmentId;
}

html页面上传图片并进行展示相关推荐

H5页面上传图片控件
做H5项目的时候应该经常会遇到上传图片的问题的,在这里介绍一种目前项目里面用到的一个H5页面上传图片的控件,代码如下: html代码: <!doctype html> <#inclu ...
JAVA实现页面上传图片或文件
说明:我本来不打算写一篇博客的,因为关于页面上传图片/文件这种博客太多了.但是我发现那些博客几乎一样,这不是关键,关键是代码有错,并且错都是一样的,这有点过分了,所以写下这篇博客,让更多人,少去找bu ...
jsp如何显示ftp服务器的图片,Jsp页面上传图片和缩略图查看
关于Jsp页面上传图片和缩略图查看主要分为两部分: 第一,图片的上传,图片保存在ftp服务器里(也可以是对应的项目文件夹下需要相对应的修改) 第二,上传后,我们通过点击页面的缩略图查看原图关于图片 ...
layui实现上传图片鼠标悬浮展示删除及预览图标
layui实现上传图片鼠标悬浮展示删除及预览图标 ** 进行layui实现图片上传功能时,发现无法实现悬浮展示删除及预览图标功能,查询很多资料后,自己整合一套自己的方法,特此记录. 整体思路就是使用鼠 ...
页面ifream固定分辨率展示并适配所有分辨率方法
实现方式: 以ifream要完整展示1920*1080大屏为例: 将ifream本身进行相对于1920*1080的等比例放大,然后再使用transform对ifream进行相对于1920*1080的等 ...
zblog修改上传服务器,zblog主题配置页面上传图片功能
上传图片功能效果如图: main.php 编写上传表单提交图片到save.php,同时发起get和post请求,通过get传递一个type值,以便save.php通过该值判断行为做出不同处理.通过p ...
app内嵌H5页面上传图片，调用app的方法和注册回调
html <span class="file-inp" @click.stop="changeImageA ...
淘系页面详情API调用展示
以下是行业内了解到的一些情况,本帖只展示部分代码,需要更多api调试请移步 { "item": { "num_iid": "6 ...
php微信端获取头像不显示不出来,解决微信转发到朋友圈没有获取页面头像以图标展示。...
http://203.195.235.76/jssdk/#menu-webview 微信JS-SDK demo https://mp.weixin.qq.com/debug/cgi-bin/sand ...

html页面上传图片并进行展示

html页面上传图片并进行展示相关推荐

最新文章

热门文章