uploadify

uploadify是什么

Uploadify是来自国外的一款优秀jQuery插件，主要功能是批量上传文件

 

uploadify怎么和项目结合起来使用

• 首先我们需要下载相关插件
  • 从哪里下载uploadify？
    • 网址http://www.uploadify.com/
    • 第一步
    • ​
      
• 第二步下载完成将其解压，然后找到相关工具包，将其放到文件中

​​

​

1. 引入css和js文件

​​

 

​​

1. 任务一，异步上传头像
   1. 前台

代码

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.后台

• 1. 上传头像

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.数据库【略】

1. 任务二一，异步上传附件

前台

$(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在使用过程中的注意事项

 

1. 后台向前台传递数据：
   1. 后台怎么传【response】
   2. 前台 怎么接【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类型