Home > Web Front-end > HTML Tutorial > How to use HTML to upload images on the page and share the sample code for display

How to use HTML to upload images on the page and share the sample code for display

黄舟
Release: 2017-07-18 14:57:24
Original
9868 people have browsed it

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>
Copy after login

js代码:

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

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");
}
Copy after login

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;
}
Copy after login

The above is the detailed content of How to use HTML to upload images on the page and share the sample code for display. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template