文件上传

<!DOCTYPE HTML>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>

<html>
<head>
<meta charset="utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
<title>添加页面</title>
<script type="text/javascript" src="${ctx}/plug-in/jquery-plugs/form/jquery.form.js"></script>

<script type="text/javascript" src="${ctx}/plug-in/uploadify/jquery.uploadify-3.1.min.js"></script>
<link rel="Stylesheet" href="${ctx}/plug-in/uploadify/css/uploadify.css" />

<script type="text/javascript">
$(function(){
//文件上传开始
$("#click_upload").uploadify({
'auto' : true,
'method' : "post",
'height' : 40,
'swf' : 'plug-in/uploadify/uploadify.swf', // flash
'uploader' : 'file.do?savefileInfo', // 数据处理url
'width' : 120,
'fileObjName' : 'file',//文件对象名称,用于后台获取文件对象时使用,详见下面的java代码
'fileTypeExts' : '*.gif; *.jpg; *.png; *.bmp; *.jpeg', // 定义允许上传的文件后缀
'fileSizeLimit' : '20MB', // 上传文件大小限制。
'buttonText' : '点击上传',
'uploadLimit' : 1,
'successTimeout' : 100,
'requeueErrors' : false,
'removeTimeout' : 3,
'removeCompleted' : true,
'queueSizeLimit' :1,
'queueID' : 'clickuploader_queue',
'progressData' : 'percentage',
'overrideEvents' : [ 'onDialogClose','onSelectError'],
'onSelectError':uploadify_onSelectError,
'onInit' : function (){//在这里获取到文件的路径然后，展示出来，用于编辑的时候

},
'onUploadSuccess' : function(file, data, response){ // 每一个文件上传成功时触发该事件
var array = data.split(",");
var path=array[0];
var imghtml="";
imghtml = imghtml+'<span>'
+'<img style="margin-left:9em; wight:100px;height:100px;border: 30px solid #FFFFFF;position:relative;" src="'+ path +'">'
+'<img style="margin-left: -35px;margin-top: 20px;position:absolute;" onclick="delImg(this,\''+path+'\')" src="plug-in/accordion/images/no.png" >'
+'</span>';
$("#imgs").append(imghtml);
var img = $("#picurl").val();
if(img != ''){
img = $("#picurl").val()+','+path;
}else{
img = path;
}
$("#picurl").val(img);

},
'onQueueComplete' : function(queueData) { // 队列中的所有文件被处理完成时触发该事件
//$('#uploader_msg').html('已成功上传'+queueData.uploadsSuccessful +'个文件！');
}
});
//文件上传结束

layui.use(['form'], function(){
var form = layui.form();
//监听提交
form.on('submit(demo1)', function(data){
$('#formId').ajaxSubmit(function(data) {
if(data.success == true){
parent.hint(data.msg,1,1);
} else {
parent.hint(data.msg,2,0);
}
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
});
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});

//自定义验证规则
form.verify({
title: function(value){
if (value.length>255) {
return '轮播图名称不能超过60字符。';
}
}
})
});
});

//图片删除
function picurl(){
$("#picurlSpan").hide();
$("#picurl").val("");
}

//重写文件选择错误提示方法
var uploadify_onSelectError = function(file, errorCode, errorMsg) {
var msgText = "上传失败\n";
switch (errorCode) {
case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
//this.queueData.errorMsg = "每次最多上传 " + this.settings.queueSizeLimit + "个文件";
msgText += "每次最多上传 " + this.settings.queueSizeLimit + "个文件";
break;
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
msgText += "文件大小超过限制( " + this.settings.fileSizeLimit + " )";
break;
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
msgText += "文件大小为0";
break;
case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
msgText += "文件格式不正确，仅限 " + this.settings.fileTypeExts;
break;
default:
msgText += "错误代码：" + errorCode + "\n" + errorMsg;
}
alert(msgText);
};
//删除文件
function delImg(obj,imgPath){
$(obj).parent().remove();
var img = $("#picurl").val();
img = img.replace(imgPath,"");
$("#picurl").val(img);
}

</script>
<style>
.layui-textarea {
width:280px;
display: inline-block;
border: solid 1px #1c94fe;
border-radius: 4px;
resize:none;
}
.layui-unselect.layui-form-select {
float: left;
width: 287px;
}
.layui-form-select .layui-input {
border: solid 1px #1290fe;
border-radius: 5px;
height: 34px;
}
</style>
</head>

<body style="background: #fff">
<form action = "${ctx}/carouselController.do?addAndUpdate" method = "POST" id = "formId" class="layui-form sr-form">
<div class="input-group clearfix">
<label for="" class="input-label">
轮播图名称：
</label>
<input type="text" class="input-txt" name = "title" lay-verify="required|title"/>
<em class="red-asterisk">
*
</em>
</div>
<div class="input-group clearfix">
<label for="" class="input-label">
轮播图类型：
</label>

<select name="type" id="type" lay-filter="type">
<c:forEach items = "${carouselTypeList}" var = "type" varStatus = "status">
<option value="${type.typecode}">${type.typename}</option>
</c:forEach>
</select>
<em class="select-red-asterisk">
*
</em>
</div>
<div class="input-group clearfix">
<label for="" class="input-label">
图片：
</label>
<div class="input-group clearfix" >
<input type="hidden" class="input-txt" id="picurl" name="picurl" value="" />
<input type="file" class="input-txt" name="click_upload" id="click_upload" />
<div id="clickuploader_queue"></div>
<div id="imgs">
</div>
</div>
<%-- <input type="hidden" id = "picurl" name = "picurl" lay-verify="required|picurl">
<div style="margin-left:142px;">
<t:webUploader name="picurl" extensions="bmp,jpg,png,tiff,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,WMF,webp" fileNumLimit="1" url="systemLayoutController.do?saveOrUpdatePicture" type="image" auto="true">
</t:webUploader>
<em class="select-red-asterisk">
*
</em>
</div> --%>

</div>
<div class="input-group clearfix">
<label for="" class="input-label">
状态：
</label>
<select name="state" id="state" lay-filter="state">
<c:forEach items = "${carouselStateList}" var = "state" varStatus = "status">
<option value="${state.typecode}">${state.typename}</option>
</c:forEach>
</select>
<em class="select-red-asterisk">
*
</em>
</div>
<button id = "confirm" class="layui-btn" lay-submit="" lay-filter="demo1" style = "display:none">
保存
</button>
</form>
</body>
</html>

后台控制器

/**
* 上传附件并保存到数据库file.do?savefileInfo
* @return
*/
@RequestMapping(params = "savefileInfo",produces = "text/html;charset=utf-8" )
@ResponseBody
public String savefileInfo(@RequestParam(required=false) MultipartFile file, HttpServletRequest request,
HttpServletResponse response) {
Map<String, Object> map;
String str="";
AjaxJson j = new AjaxJson();
String path = request.getRealPath("userfiles");
j=fileService.savefileInfo(file,path);
str=(String) j.getAttributes().get("path")+","+(String) j.getAttributes().get("name")+","+(String) j.getAttributes().get("type");
return str;
}

service

//保存时候返回多个参数
AjaxJson savefileInfo(MultipartFile file, String path);

serviceImpl

//保存文件时候返回名称、
@Transactional(readOnly = false)
public AjaxJson savefileInfo(MultipartFile file, String path) {
AjaxJson j = new AjaxJson();
FileEntity f = new FileEntity();
try {
String fileName = UUID.randomUUID().toString();
String filePath = path + "/file/" + DataUtils.getDate("yyyyMMdd");
if (file.getOriginalFilename().lastIndexOf(".") >= 0){
int num = file.getOriginalFilename().lastIndexOf(".");
String originalFilename = file.getOriginalFilename().substring(0,num);
String extName = file.getOriginalFilename().substring(num);
f.setFileName(originalFilename);
f.setFilePath("userfiles/file/" + DataUtils.getDate("yyyyMMdd") + "/" + fileName + extName);
f.setFileType(extName.substring(1));
fileMapper.insert(f);
FileUpload.copyFile(file.getInputStream(), filePath, fileName + extName).replaceAll("-", "");
} else {
String originalFilename = file.getOriginalFilename();
String extName = file.getContentType().split("/")[1];
f.setFileName(originalFilename);
f.setFilePath("userfiles/file/" + DataUtils.getDate("yyyyMMdd") + "/" + fileName +"."+ extName);
f.setFileType(extName);
fileMapper.insert(f);
FileUpload.copyFile(file.getInputStream(), filePath, fileName +"."+ extName).replaceAll("-", "");
}
Map<String,Object> map = new HashMap<>();
map.put("path",f.getFilePath());
map.put("name",f.getFileName());
map.put("type",f.getFileType());
j.setAttributes(map);

} catch (IOException e) {
e.printStackTrace();
return j ;

}
return j ;
}

entity

package com.xxxx.xxxx.file.entity;

import javax.persistence.Column;
import javax.persistence.Table;

import com.jpxx.jpwgh.core.entity.BaseEntity;

/**
* 附件管理
* @author Lihaohua
* 2016.06.27
*/
@Table(name="tb_file")
public class FileEntity extends BaseEntity {

/**
* 文件名称
*/
@Column(name = "file_name")
private String fileName;

/**
* 文件位置
*/
@Column(name = "file_path")
private String filePath;

/**
* 文件类型（图片、音频、视频）
*/
@Column(name = "file_type")
private String fileType;

/**
* 备注信息
*/
private String remarks;

public String getFileName() {
return fileName;
}

public void setFileName(String fileName) {
this.fileName = fileName;
}

public String getFilePath() {
return filePath;
}

public void setFilePath(String filePath) {
this.filePath = filePath;
}

public String getFileType() {
return fileType;
}

public void setFileType(String fileType) {
this.fileType = fileType;
}

public String getRemarks() {
return remarks;
}

public void setRemarks(String remarks) {
this.remarks = remarks;
}

}

/**
* 写文件到当前目录的upload目录中
*
* @param in
* @param fileName
* @throws IOException
*/
public static String copyFile(InputStream in, String dir, String realName)
throws IOException {
File file = new File(dir, realName);
if (!file.exists()) {
if (!file.getParentFile().exists()) {
file.getParentFile().mkdirs();
}
file.createNewFile();
}
//FileUtils.copyInputStreamToFile(in,file);
try
{
FileOutputStream output = openOutputStream(file);
try {
IOUtils.copy(in, output);
output.close();
} finally {
//
}
}finally {
IOUtils.closeQuietly(in);
}
return realName;
}

package org.jeecgframework.core.common.model.json;

import java.util.Map;

import com.alibaba.fastjson.JSONObject;

/**
* $.ajax后需要接受的JSON
*
* @author
*
*/
public class AjaxJson {

private boolean success = true;// 是否成功
private String msg = "操作成功";// 提示信息
private Object obj = null;// 其他信息
private Map<String, Object> attributes;// 其他参数
public Map<String, Object> getAttributes() {
return attributes;
}

public void setAttributes(Map<String, Object> attributes) {
this.attributes = attributes;
}

public String getMsg() {
return msg;
}

public void setMsg(String msg) {
this.msg = msg;
}

public Object getObj() {
return obj;
}

public void setObj(Object obj) {
this.obj = obj;
}

public boolean isSuccess() {
return success;
}

public void setSuccess(boolean success) {
this.success = success;
}
public String getJsonStr(){
JSONObject obj = new JSONObject();
obj.put("success", this.isSuccess());
obj.put("msg", this.getMsg());
obj.put("obj", this.obj);
obj.put("attributes", this.attributes);
return obj.toJSONString();
}
}

posted @ 2018-05-31 10:53 不爱开玩笑阅读(298) 评论(0) 收藏举报

刷新页面返回顶部

尊贵的十五的月亮

文件上传

公告