1、引入uploadify的css和js文件
<%
String path = request.getContextPath();
%>
<link rel="stylesheet" href="<%=path%>/uploadify/uploadify.css" type="text/css"></link>
<script type="text/javascript" src="<%=path%>/uploadify/jquery.uploadify-3.1.min.js"></script>
2、配置相关参数和函数
注意:$('#importLispDialog').window('close'); 要在 onUploadComplete 事件中执行,不能在onUploadSuccess里面执行。否则上传完成的文件不会消失。
字段非空的验证要在提交前验证,不能在onUploadStart里验证,否则即使为空,返回false,上传操作仍然会执行
<script type="text/javascript" charset="UTF-8">
var name;
var content;
$(function() {
$("#file_upload").uploadify({
'height' : 27,
'width' : 80,
'buttonText' : '添加附件',
'swf' : '<%=path%>/uploadify/uploadify.swf',
'uploader' : '<%=path%>/uploadController.do?upload',
'auto' : false,
'fileTypeExts' : '*.*',
'formData' : {'userName':'','content':''},
'onUploadStart' : function(file) {
$("#file_upload").uploadify("settings", "formData", {'userName':name,'content':content});
},
'onUploadSuccess':function(){
$.messager.show({
msg : '导入成功!',
title : '提示'
});
},
'onUploadComplete':function(){
$('#importLispDialog').window('close');
}
});
});
function startUpload(){
//校验
name=$('#userName').val();
content=$('#content').val();
if(name.replace(/\s/g,'') == ''){
alert("姓名不能为空!");
return false;
}else{
$('#file_upload').uploadify('upload','*');
}
}
</script>
3、添加file框和超链接
<input type="file" name="uploadify" id="file_upload" />
<hr>
<a class="easyui-linkbutton" onclick="startUpload();" href="javascript:void(0);">开始上传</a>
<a href="javascript:$('#file_upload').uploadify('cancel', '*')" class="easyui-linkbutton">取消所有上传</a>
4、后台取值,基于SpringMVC
注意创建文件夹要用 file.mkdirs();不能用 file.mkdir();否则在linux下运行失败
@RequestMapping(params = "upload")
public String upload(HttpServletRequest request, HttpServletResponse response){
String responseStr="";
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
//获取前台传值
String[] userNames = multipartRequest.getParameterValues("userName");
String[] contents = multipartRequest.getParameterValues("content");
String userName="";
String content="";
if(userNames!=null){
userName=userNames[0];
}
if(contents!=null){
content=contents[0];
}
Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
//String ctxPath = request.getSession().getServletContext().getRealPath("/")+ "\\" + "images\\";
String ctxPath=request.getSession().getServletContext().getRealPath("/")+configPath;
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMM");
String ymd = sdf.format(new Date());
ctxPath += ymd + "/";
//创建文件夹
File file = new File(ctxPath);
if (!file.exists()) {
file.mkdirs();
}
String fileName = null;
for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {
// 上传文件名
// System.out.println("key: " + entity.getKey());
MultipartFile mf = entity.getValue();
fileName = mf.getOriginalFilename();
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
File uploadFile = new File(ctxPath + newFileName);
try {
FileCopyUtils.copy(mf.getBytes(), uploadFile);
responseStr="上传成功";
} catch (IOException e) {
responseStr="上传失败";
e.printStackTrace();
}
}
return null;
}
5、Spring配置文件
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding">
<value>UTF-8</value>
</property>
<property name="maxUploadSize">
<value>32505856</value><!-- 上传文件大小限制为31M,31*1024*1024 -->
</property>
<property name="maxInMemorySize">
<value>4096</value>
</property>
</bean>
分享到:
相关推荐
Uploadify上传插件 jar包及使用实例
springMVC+uploadify上传图片。
uploadify上传插件使用示例java_web
使用uploadify控件批量上传文件实例,特效很不错!
JQuery uploadify 实现文件批量上传完整例子,所有js,和uploadify插件js 都放在这个例子中
文件上传组件 Uploadify-3.1-Demo实例详解
这是我用myeclipse8.5实现的uploadify多文件上传的例子。不用做任何修改,导入到myeclipse中即可使用。更改了上传按钮的高度和宽度,使上传按钮能够正常显示。这是最新的
uploadify3.1小示例 包含uploadify3.1的所有文件和示例
很好用的多文件上传js插件,一次可以实现上传多个文件并且可以对上传文件的大小、类型、包括很多的属性和事件控制
uploadify 插件 java 示例 servlet
JQuery上传插件Uploadify使用示例
Uploadify v2.1.0使用说明
使用uploadify 上传图片异步刷新
用ASP.NET实现uploadify多图上传插件的小实例
JQuery上传插件Uploadify使用详解
这是我用myeclipse8.5实现的uploadify多文件上传的例子。不用做任何修改,导入到myeclipse中即可使用。
MVC4下对话框中使用Uploadify上传多个文件
修正uploadify 上传控件 在IE10下 无法选择文件(点选择无反应问题)
jquery xheditor是jquery中较好的编辑器插件,而jquery.uploadify也是jquery实现文件上传很优秀的插件,本项目实例解决了两个插件文件上传的问题,对于应用学习两个插件,实现文件上传,具有很好的参考价值,同时本例子是...