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類型