uploadify
uploadify是什么
Uploadify是来自国外的一款优秀jQuery插件，主要功能是批量上传文件
uploadify怎么和项目结合起来使用
- 首先我们需要下载相关插件
- 从哪里下载uploadify？
- 网址http://www.uploadify.com/
- 第一步
- 从哪里下载uploadify？
- 第二步下载完成将其解压，然后找到相关工具包，将其放到文件中
- 引入css和js文件
- 任务一，异步上传头像
- 前台
代码
function initHeadImage(){
$("#userimage").uploadify({
//swf文件位置
"swf":"<%=request.getContextPath()%>/js/uploadify/uploadify.swf",
//上传图片的路径
"uploader":"<%=request.getContextPath()%>/userinfo/uploadfile.fh",
//按钮上的文字
"buttonText":"选择文件",
//调整进度条时间
"removeTimeout":0.1,
//对应后台属性名类似于nama的属性值
"fileObjName":"uploadFiles",
"onUploadSuccess":function(file,data,response){
//回显图片
$("#userimagediv").html("<img src='<%=request.getContextPath()%>"+data+"' width='100px' height='100px' />");
//删除老照片
if ($("#headimagepath").val().length>0) {
//获取老照片路径
var v_oldpath=$("#headimagepath").val();
$.ajax({
"type":"post",
"data":{"oldpath":v_oldpath},
"url":"<%=request.getContextPath()%>/userinfo/deletefile.fh"
})
}
//回显路径
$("#headimagepath").val(data);
}
});
}
b.后台
- 上传头像
public void uploadfile(){
if (uploadFiles!=null) {
String uploadedFileName = FileUtil.copyFile(uploadFiles, uploadFilesFileName,getRealPath(Constants.USER_HEADIMG_PATH));
String filePath=Constants.USER_HEADIMG_PATH+uploadedFileName;
outstr(filePath);
}
}
b.删除老照片
public void deletefile(){
if (StringUtils.isNotBlank(oldpath)) {
File file=null;
if (flag==1) {
file = new File(oldpath);
}else{
file=new File(getRealPath(oldpath));
}
if (file.exists()) {
file.delete();
outstr("ok");
}
}
}
c.返回给前台
protected void outstr(String content){
PrintWriter writer=null;
try {
writer = getResponse().getWriter();
writer.write(content);
writer.flush();
} catch (IOException e) {
e.printStackTrace();
}finally{
if (writer !=null) {
writer.close();
writer=null;
}
}
}
c.数据库【略】
- 任务二一，异步上传附件
前台
$(function(){
initHeadImage();
initUserAttach();
});
var hasHeader =false;
function initUserAttach(){
$("#useratach").uploadify({
//swf文件位置
"swf":"<%=request.getContextPath()%>/js/uploadify/uploadify.swf",
//上传图片的路径
"uploader":"<%=request.getContextPath()%>/userinfo/uploadfiles.fh",
//调整进度条时间
"removeTimeout":0.1,
//按钮上的文字
"buttonText":"选择文件",
//对应后台属性名类似于nama的属性值
"fileObjName":"uploadFiles",
"onUploadSuccess":function(file,data,response){
//回显图片
var v_arr=data.split(";");
var v_fileName=v_arr[1];
var v_filePath=v_arr[0];
//重点事项
if (!hasHeader) {
$("#attachTable").append("<tr><td>附件名</td><td>操作</td></tr>");
hasHeader=true;
}
var v_name_info="<input type='text' name='user.userAttachNames' value='"+v_fileName+"'/>";
var v_path_info="<input type='text' name='user.userAttachPaths' value='"+v_filePath+"'/>";
var v_result =v_name_info+v_path_info;
$("#attachTable").append("<tr flag='attachrow'><td>"+v_fileName+v_result+"</td><td><input type='button' value='删除' onclick='deleteAttachFile(\""+v_filePath+"\",this)'></td></tr>");
}
});
}
function deleteAttachFile(path,obj){
$.ajax({
"type":"post",
"data":{"oldpath":path,"flag":1},
"url":"<%=request.getContextPath()%>/userinfo/deletefile.fh",
"success":function (data){
if (data == "ok") {
//删除页面元素
$(obj).parents("tr[flag='attachrow']").remove();
//没有内容删除表格
if ($("#attachTable").children().children().length==1) {
//清楚table内容
$("#attachTable").html("");
//重置flag
hasHeader= false;
}
}
}
})
}
后台
控制层
附件上传
public void uploadfiles(){
if (uploadFiles != null) {
String uploadedFileName = FileUtil.copyFile(uploadFiles, uploadFilesFileName, Constants.USER_ATTACH_PATH);
String filePath=Constants.USER_ATTACH_PATH+uploadedFileName;
outstr(filePath+";"+uploadFilesFileName);
}
}
删出文件
public void deletefile(){
if (StringUtils.isNotBlank(oldpath)) {
File file=null;
if (flag==1) {
file = new File(oldpath);
}else{
file=new File(getRealPath(oldpath));
}
if (file.exists()) {
file.delete();
outstr("ok");
}
}
}
业务逻辑层
if (StringUtils.isNotBlank(user.getUserAttachNames())) {
String [] userAttrNameArr=user.getUserAttachNames().split(",");
String [] userAttachPathArr=user.getUserAttachPaths().split(",");
for (int i = 0; i < userAttachPathArr.length; i++) {
UserAttach ua=new UserAttach();
//重新获取值
ua.setAttachName(userAttrNameArr[i]);
ua.setAttachPath(userAttachPathArr[i]);
//关联关系
ua.setUser(user);
user.getUserAttachs().add(ua);
}
}
uploadify在使用过程中的注意事项
- 后台向前台传递数据：
- 后台怎么传【response】
- 前台 怎么接【request.getparameter】
2.任何第三方的js插件都会提供的信息：
a.属性【配置项】options
b.事件【所有以on开头的都是事件】events
c.方法【一般都是动词】methods
3.后台如何获取单个name的参数的信息：
无论是获取？传参还是name传参，还是其他传参只要是传参就通过
1.request.getparamer（name的值）；
2.声明私有属性，并生产get，set方法
4.后台如何获取多个name值一样的参数的信息
无论是获取？传参还是name传参，还是其他传参只要是传参就通过
1.request.getparamervalues（name的值）；
2.声明私有属性，并生产get，set方法，建议声明为string类型
