jquery uploadify的JS用法以及JAVA类的用法

最新推荐文章于 2017-05-27 11:43:00 发布

yyhm

最新推荐文章于 2017-05-27 11:43:00 发布

阅读量2.5k

点赞数

分类专栏： javascript jquery

javascript 同时被 2 个专栏收录

10 篇文章

订阅专栏

jquery

2 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript实现文件上传功能，并通过后台处理请求来上传文件。包括初始化函数、配置参数、上传文件类型、大小限制以及完成、选择、错误等事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[javascript]view plaincopy 
   
 $(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);  
             /* $('#image').attr("src",serverData);//serverData是sevlet中out.print图片的路径 
                                   $('#image').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 + " 上传失败");  
         }  
     });  
 });  

[javascript]view plaincopy 
   
 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文件是这样的：

[java]view plaincopy 
   
 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文件是这样的：

[html]view plaincopy 
   
 <!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>  