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

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://img3.dunguai.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);

//转换成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需要转换成图片，拷贝一份到转换目录(http://img3.dunguai.com/upload/web_2/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如何实现页面上传图片并且能进行展示的示例代码分享的详细内容，更多请关注php中文网其它相关文章！

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