html如何完成頁面上傳圖片并且能進(jìn)行展示的示例代碼分享
發(fā)表時間:2024-05-15 來源:明輝站整理相關(guān)軟件相關(guān)文章人氣:
[摘要]html頁面:本功能實(shí)現(xiàn)圖片上傳并顯示,點(diǎn)擊“查看”按鈕也顯示圖片<p class="form-group"><label class="col-md-2 control-label">縮略圖</label><p c...
html頁面:
本功能實(shí)現(xiàn)圖片上傳并顯示,點(diǎn)擊“查看”按鈕也顯示圖片
<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://img6-2.22122511.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 = /(\. \/)(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", "http://img6-2.22122511.com/upload/web_2/" + 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);
//轉(zhuǎn)換成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需要轉(zhuǎn)換成圖片,拷貝一份到轉(zhuǎn)換目錄(http://img6-2.22122511.com/upload/web_2/trans/ppt)
if (category.equals("ppt")) {
FileUtils.copyFileToDirectory(renamedFile, new File(dirPath + "trans/ppt/"), true);
}
//拷貝到對應(yīng)的目錄下
FileUtils.moveToDirectory(renamedFile, new File(dirPath + category + File.separator + module), true);
} catch(Exception e) {
e.printStackTrace();
}
return attachmentId;
}
以上就是html如何實(shí)現(xiàn)頁面上傳圖片并且能進(jìn)行展示的示例代碼分享的詳細(xì)內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章!
網(wǎng)站建設(shè)是一個廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。