html如何实现页面上传图片并且能进行展示的示例代码分享

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

 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及URLpublic 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的附件的访问URLpublic 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);//转换成JsonArrayString 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 fileuploadFile* @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如何实现页面上传图片并且能进行展示的示例代码分享的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。