html如何实现页面上传图片并且能进行展示的示例代码分享
程序员文章站
2022-05-18 17:02:37
...
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="/atta/upload/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 = /(\.|\/)(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如何实现页面上传图片并且能进行展示的示例代码分享的详细内容,更多请关注其它相关文章!