$(function(){ //$('#uploadify').uploadifySettings('folder','JS'); //动态修改参数 $("#uploadify").uploadify({ //初始化函数 width: 20, uploader: '<%=basePath%>resources/lib/uploadify/uploadify.swf', //flash文件位置,注意路径 // 'swf' : '<%=basePath%>resources/lib/uploadify/uploadify.swf', script: '<%=basePath%>IntentionController.do?method=upload', //后台处理的请求(sevlet) buttonImg: '<%=basePath%>resources/lib/uploadify/cancel.png', //上传按钮的背景图片 auto: true, //选定文件后是否自动上传,默认false cancelImg: '<%=basePath%>resources/lib/uploadify/cancel.png', //取消按钮图片 //'folder' : '<%=basePath%>resources/lib/uploadify/pic',//您想将文件保存到的路径,将auto设置为true里才有用,不然跳到类里去处理,那就那里说了算 queueID: 'fileQueue', //与下面的上传文件列表id对应 queueSizeLimit: 8, //上传文件的数量 scriptData: { 'userID': '' }, //向后台传的数据 fileDesc: '', //上传文件类型说明 fileExt: 'jpg,png,gif,jpeg', //控制可上传文件的扩展名,启用本项时需同时声明fileDesc method: 'post', //如果向后台传输数据,必须是get // sizeLimit:10000,//文件上传的大小限制,单位是字节 multi: true, simUploadLimit: 8, //同时上传文件的数量,设置了这个参数后, //那么你会因设置multi:true和queueSizeLimit:8而可以多选8个文件, //但如果一旦你将simUploadLimit也设置了,那么只会上传这个参数指定的文件个数,其它就上传不了 buttonText: 'BROWSE', //浏览按钮上的文字 onComplete: function(event, queueID, fileObj, serverData, data) { //当上传完成后的回调函数,ajax方式哦~~ //alert("上传成功"); addImg(serverData); // alert(serverData); //addImg(serverData); /* $('#p_w_picpath').attr("src",serverData);//serverData是sevlet中out.print图片的路径 $('#p_w_picpath').show();*/ }, onSelect: function(e, queueId, fileObj) { /*alert("唯一标识:" + queueId + "\r\n" + "文件名:" + fileObj.name + "\r\n" + "文件大小:" + fileObj.size + "\r\n" + "创建时间:" + fileObj.creationDate + "\r\n" + "最后修改时间:" + fileObj.modificationDate + "\r\n" + "文件类型:" + fileObj.type );*/ }, onError: function(event, queueID, fileObj) { alert("文件:" + fileObj.name + " 上传失败"); } }); });
function addImg(imgUrl){ var path=[]; path=imgUrl.split("#"); var list=$("#imgList"); var img=$("<img>"); img.attr("src",path[0]); img.attr("id",path[1]); img.attr("height","150px"); img.attr("width","150px"); img.click(function(){ alert("设为首页募捐显示照片吗?"); }); img.css("cursor","pointer"); list.append(img); // proDownImage(path[0],img); }
JAVA文件是这样的:
public String upload(HttpServletRequest request,HttpServletResponse response) throws Exception { String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/"; String returnPath=basePath+"intentionPicture/"; String savePath =request.getSession().getServletContext().getRealPath("/")+"intentionPicture\\"; File f1 = new File(savePath); //System.out.println(savePath); if (!f1.exists()) { f1.mkdirs(); } DiskFileItemFactory fac = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(fac); upload.setHeaderEncoding("utf-8"); List fileList = null; try { fileList = upload.parseRequest(request); } catch (FileUploadException ex) { } Iterator<FileItem> it = fileList.iterator(); String name = ""; String extName = ""; while (it.hasNext()) { FileItem item = it.next(); if (!item.isFormField()) { name = item.getName(); long size = item.getSize(); String type = item.getContentType(); //System.out.println(size + " " + type); if (name == null || name.trim().equals("")) { continue; } // 扩展名格式: if (name.lastIndexOf(".") >= 0) { extName = name.substring(name.lastIndexOf(".")); } File file = null; do { // 生成文件名: name = UUID.randomUUID().toString(); file = new File(savePath + name + extName); //System.out.println(savePath + name + extName); } while (file.exists()); File saveFile = new File(savePath + name + extName); try { item.write(saveFile); } catch (Exception e) { e.printStackTrace(); } } } return returnPath+name + extName+"#"+savePath+name+extName; }
JSP文件是这样的:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>My JSP 'aaa.jsp' starting page</title> <link href="../../resources/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> <link href="../../resources/ldcss/ldform.css" rel="stylesheet" type="text/css" /> <link href="../../resources/ldcss/global.css" rel="stylesheet" type="text/css" /> <link href="<%=basePath%>resources/lib/uploadify/uploadify.css" rel="stylesheet" type="text/css" /> <script src="<%=basePath%>resources/ldjs/global.js" type="text/javascript"></script> <script src="<%=basePath%>resources/lib/jquery/jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript" src="<%=basePath%>resources/lib/uploadify/swfobject.js"></script> <script type="text/javascript" src="<%=basePath%>resources/lib/uploadify/jquery.uploadify.v2.1.0.min.js"></script> </head> <body> <div id="fileQueue"></div> <input type="file" name="uploadify" id="uploadify" /> <p> <a href="javascript:jQuery('#uploadify').uploadifyUpload()">开始上传</a> <a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a> </p> <div id="imgList"></div> </body> </html>
转载于:https://blog.51cto.com/chengxuyuan/1852330