该上传摘自b-jui官网! 具体效果可以查看:http://demo.b-jui.com/
该方法能一次选择多张图片,并能预览图片,取消上传,可以单独一张张上传,也可一次全部上传完成!
这里是一次全部上传,要单张上传得自己改代码!
引入的js,css改天加上下载路径,或去b-jui官网下载
1.页面
<link rel="stylesheet" type="text/css" href="/appdata_manage/public/BJUI/diyUpload/css/webuploader.css">
<link rel="stylesheet" type="text/css" href="/appdata_manage/public/BJUI/diyUpload/css/diyUpload.css">
<script src="/appdata_manage/public/BJUI/diyUpload/js/webuploader.html5only.min.js" type="text/javascript"></script>
<script src="/appdata_manage/public/BJUI/diyUpload/js/diyUpload.js" type="text/javascript"></script>
<script>
function doc_upload_success(file, data) {
var json = $.parseJSON(data);
$(this).bjuiajax('ajaxDone', json);
if (json[BJUI.keys.statusCode] == BJUI.statusCode.ok) {
$('#doc_pic').val(json.filename);
$(this).navtab('refresh','');//刷新图片展示
//关闭当前dialog
$(this).dialog('close', "operateFile");
/* $('#doc_span_pic').html('已上传图片:<img src="'+ json.filename +'" width="100%">') */
}
}
</script>
<div class="bjui-pageContent">
<div style="font-size:15px;margin-top:20px;" id="doc_pic_up" data-toggle="upload" data-uploader="/appdata_manage/AgentInfo/publicsaveFile?dnum=${(dnum)!}"
data-file-size-limit="1024000000"
data-file-type-exts="*.jpg;*.png;*.gif;*.mpg"
data-multi="true"
dragDrop="true"
multi="true"
data-on-upload-success="doc_upload_success"
data-icon="cloud-upload">资料上传: </div>
<input type="hidden" name="doc.pic" value="" id="doc_pic">
</div>
<div class="bjui-pageFooter">
<ul style="width:100%;">
<li><button type="button" class="btn-close">关闭</button></li>
<li style="float:right;"><div class="buttonActive"><div class="buttonContent"><button type="submit" id="upload" class="btn-blue" >一键上传</button></div></div></li>
</ul>
</div>
- 后台用的ssm框架
(1)controller
@RequestMapping("/publicsaveFile")
public @ResponseBody Map uploadPic(HttpServletRequest request,@RequestParam Map<String,String> map) throws Exception{
try {
mes=agentInfoService.uploadPic(request,map);
} catch (Exception e) {
logUtil.error("上传资料图片-------------异常:"+e);
}
return mes;
}
(2) serviceImpl
import java.io.File;
import java.util.ArrayList;
import java.io.FileOutputStream;
import java.io.IOException;
import java.math.BigDecimal;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.Random;
import java.util.ResourceBundle;
import java.util.UUID;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import static com.hfsj.controller.BaseController.*;
@Override
@Transactional
public Map uploadPic(HttpServletRequest request, Map<String, String> map) throws Exception {
String filesnum=getFilseRandom(map.get("dnum").toString());
FileOutputStream fos=null;
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String time = sdf.format(new Date());
Date date = sdf.parse(time);
String files_postfix="";
Integer files_size=0;
try {
//生成文件名
String filedir="contract";
String realpath=this.getRequest().getRealPath("uploadFile")+"/"+filedir+"/"+map.get("dnum").toString();
//如没有创建目录文件
File newfile=new File(realpath);
if(!newfile.exists()){
newfile.mkdirs();
}
String filename="";
//获取文件名
CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver(new BaseController().getSession().getServletContext());
commonsMultipartResolver.setDefaultEncoding("utf-8");
if (commonsMultipartResolver.isMultipart(request)) {
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
Iterator<String> iter = multipartRequest.getFileNames();
while (iter.hasNext()) {
MultipartFile file = multipartRequest.getFile((String) iter.next());
if (file != null) {
files_postfix=file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
files_size=(int) file.getSize();
filename=UUID.randomUUID().toString().replace("-", "")+files_postfix;
String path = realpath +"\\"+ filename;
path=path.replace("\\", "//");
File localFile = new File(path);
if(!localFile.exists()){
localFile.mkdirs();
}
//保存图片
file.transferTo(localFile);
}
}
}
//保存数据到数据库
String fullPath=getRequest().getScheme()+"://"+getRequest().getServerName()+":"+getRequest().getServerPort()+getRequest().getContextPath();
Filesinfo filesinfo=new Filesinfo();
filesinfo.setAdmin_id(Integer.parseInt(map.get("dnum").toString()));
filesinfo.setFiles_date(date);
filesinfo.setFiles_marker(""+map.get("dnum").toString()+",appdataAgentinfoContract,2");
filesinfo.setFiles_name(filename);
filesinfo.setFiles_postfix(files_postfix.replace(".", ""));
filesinfo.setFiles_size(files_size);
filesinfo.setFilesnum(filesnum);
filesinfo.setRelative_href(fullPath+"/uploadFile/"+filedir+"/"+map.get("dnum").toString()+"/"+filename);
filesinfo.setUtterly_href(realpath+"/"+filename);
if(!"".equals(filename)){
int flage=filesinfoDao.insert(filesinfo);
if(flage>0){
mes.put("statusCode", "200");
mes.put("message", "上传成功");
mes.put("tabid", "table");
mes.put("dialogid","uploadContractPic");
mes.put("closeCurrent","true");
}else{
mes.put("statusCode", "300");
mes.put("message", "上传失败");
}
}else{
mes.put("status", "00");
}
} catch (Exception e) {
e.printStackTrace();
mes.put("statusCode", "300");
mes.put("message", "系统异常失败");
throw e;
}finally{
//关闭流
if(null!=fos){
try {
fos.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return mes;
}