JQuery上传插件Uploadify并传参数

最新推荐文章于 2023-04-11 17:22:06 发布

IT圈

最新推荐文章于 2023-04-11 17:22:06 发布

阅读量945

点赞数

分类专栏： php jquery 文章标签： Uploadify

php 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

jquery

3 篇文章 0 订阅

订阅专栏

也可以去看看官网上面的 dome 下载包...API 等

下面是我开发过程遇到的一些问题总结：

1、上传失败 IO ERROR ------测试是否是 servlet 等配置或者关注flash的版本

2、前台传参中文乱码 -----------这个要根据应用服务器不同可能不同吧...反正只要我们的界面、界面传参以及后台接收的编码设置一致应该就没上面问题..反正这个问题好解决的...

3、批量上传的时候，只有第一个附件上传的时候可以接收到前台传来的name参数，而后面的参数都为null-------设置'simUploadLimit' : 1, // 一次同步上传的文件数目为 1，问题解决...当初这个问题可是难了我好久！fuck

嘿嘿....下面我贴出代码

jsp:

    Html代码   
    
  
 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>  
 <%  
     String path = request.getContextPath();   
 %>  
   
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
 <html>  
     <head>   
         <title>QQ:609865047  ---  妞见妞爱</title>  
         <meta http-equiv="pragma" content="no-cache">  
         <meta http-equiv="cache-control" content="no-cache">  
         <meta http-equiv="expires" content="0">  
     </head>  
   
     <body>   
         <link href="js/uploadify.css" rel="stylesheet" type="text/css" />  
         <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>  
         <script type="text/javascript" src="js/swfobject.js"></script>  
         <script type="text/javascript" src="js/jquery.uploadify.v2.1.0.min.js"></script>  
         <script type="text/javascript">  
          $(document).ready(function() {  
           $("#uploadify").uploadify({  
            'uploader'       : 'js/uploadify.swf',  
            'script'         : 'scripts/uploadify',//servlet的路径或者.jsp 这是访问servlet 'scripts/uploadif'   
            'method'         :'GET',  //如果要传参数，就必须改为GET  
            'cancelImg'      : 'js/cancel.png',  
            'folder'         : 'uploads', //要上传到的服务器路径，  
            'queueID'        : 'fileQueue',  
            'auto'           : false, //选定文件后是否自动上传，默认false  
            'multi'          : true, //是否允许同时上传多文件，默认false  
            'simUploadLimit' : 1, //一次同步上传的文件数目    
            'sizeLimit'      : 19871202, //设置单个文件大小限制，单位为byte    
            'queueSizeLimit' : 5, //限制在一次队列中的次数（可选定几个文件）。默认值= 999，而一次可传几个文件有 simUploadLimit属性决定。  
            'fileDesc'       : '支持格式:jpg或gif', //如果配置了以下的'fileExt'属性，那么这个属性是必须的    
            'fileExt'        : '*.jpg;*.gif',//允许的格式  
            'scriptData'     :{'name':$('#name').val()}, // 多个参数用逗号隔开 'name':$('#name').val(),'num':$('#num').val(),'ttl':$('#ttl').val()  
            　onComplete: function (event, queueID, fileObj, response, data) {  
             var value = response ;  
            　   alert("文件:" + fileObj.name + "上传成功");  
            　},    
            　onError: function(event, queueID, fileObj) {    
            　 alert("文件:" + fileObj.name + "上传失败");    
            　},    
            　onCancel: function(event, queueID, fileObj){    
            　 alert("取消了" + fileObj.name);    
            　　　}   
           });  
          });  
            
            
          function uploasFile(){   
               //校验  
               var name=document.getElementById("name").value;   
               if(name.replace(/\s/g,'') == ''){  
                     alert("名称不能为空！");  
                     return false;  
               }    
               //设置 scriptData 的参数  
               $('#uploadify').uploadifySettings('scriptData',{'name':$('#name').val()});  
               //上传  
               jQuery('#uploadify').uploadifyUpload()               
          }  
             
            
  </script>  
          名称:<input type="text" id="name" name="name" value="妞见妞爱" >  
         <div id="fileQueue"></div>   
         <input type="file" name="uploadify" id="uploadify" />  
         <p>  
             <a href="javascript:uploasFile()">开始上传</a>&nbsp;  
             <a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>  
         </p>  
     </body>  
 </html>  

Uploadify.java

    Java代码   
    
  
 package com;  
   
 import java.io.BufferedInputStream;  
 import java.io.BufferedOutputStream;  
 import java.io.File;  
 import java.io.FileOutputStream;  
 import java.io.IOException;  
 import java.text.SimpleDateFormat;  
 import java.util.Date;  
 import java.util.Iterator;  
 import java.util.List;  
   
 import javax.servlet.ServletException;  
 import javax.servlet.http.HttpServlet;  
 import javax.servlet.http.HttpServletRequest;  
 import javax.servlet.http.HttpServletResponse;  
   
 import org.apache.commons.fileupload.FileItem;  
 import org.apache.commons.fileupload.FileUploadException;  
 import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
 import org.apache.commons.fileupload.servlet.ServletFileUpload;  
 import org.apache.commons.fileupload.util.Streams;  
    
   
 public class Uploadify extends HttpServlet {  
        
     private static final long serialVersionUID = 1L;  
   
     /** 
      * 实现多文件的同时上传 
      */   
     public void doGet(HttpServletRequest request,  
             HttpServletResponse response) throws ServletException, IOException {  
           
         //设置接收的编码格式  
         request.setCharacterEncoding("UTF-8");  
         Date date = new Date();//获取当前时间  
         SimpleDateFormat sdfFileName = new SimpleDateFormat("yyyyMMddHHmmss");  
         SimpleDateFormat sdfFolder = new SimpleDateFormat("yyMM");  
         String newfileName = sdfFileName.format(date);//文件名称  
         String fileRealPath = "";//文件存放真实地址  
           
         String fileRealResistPath = "";//文件存放真实相对路径  
           
         //名称  界面编码 必须 和request 保存一致..否则乱码  
         String name = request.getParameter("name");  
               
            
         String firstFileName="";  
         // 获得容器中上传文件夹所在的物理路径  
         String savePath = this.getServletConfig().getServletContext().getRealPath("/") + "uploads\\" + newfileName +"\\";  
         System.out.println("路径" + savePath);  
         File file = new File(savePath);  
         if (!file.isDirectory()) {  
             file.mkdir();  
         }  
   
         try {  
             DiskFileItemFactory fac = new DiskFileItemFactory();  
             ServletFileUpload upload = new ServletFileUpload(fac);  
             upload.setHeaderEncoding("UTF-8");  
             // 获取多个上传文件  
             List fileList = fileList = upload.parseRequest(request);  
             // 遍历上传文件写入磁盘  
             Iterator it = fileList.iterator();  
             while (it.hasNext()) {  
                 FileItem item = (FileItem) it.next();  
                   
                 // 如果item是文件上传表单域     
                 // 获得文件名及路径     
                 String fileName = item.getName();  
                 if (fileName != null) {  
                     firstFileName=item.getName().substring(item.getName().lastIndexOf("\\")+1);  
                     String formatName = firstFileName.substring(firstFileName.lastIndexOf("."));//获取文件后缀名  
                     fileRealPath = savePath + newfileName+ formatName;//文件存放真实地址  
                       
                     BufferedInputStream in = new BufferedInputStream(item.getInputStream());// 获得文件输入流  
                     BufferedOutputStream outStream = new BufferedOutputStream(new FileOutputStream(new File(fileRealPath)));// 获得文件输出流  
                     Streams.copy(in, outStream, true);// 开始把文件写到你指定的上传文件夹  
                     //上传成功，则插入数据库  
                     if (new File(fileRealPath).exists()) {  
                         //虚拟路径赋值  
                         fileRealResistPath=sdfFolder.format(date)+"/"+fileRealPath.substring(fileRealPath.lastIndexOf("\\")+1);  
                         //保存到数据库  
                         System.out.println("保存到数据库:");  
                         System.out.println("name:"+name);  
                         System.out.println("虚拟路径:"+fileRealResistPath);  
                     }  
                        
                 }   
             }   
         } catch (FileUploadException ex) {  
             ex.printStackTrace();  
             System.out.println("没有上传文件");  
             return;  
        }   
        response.getWriter().write("1");  
           
     }  
    
     public void doPost(HttpServletRequest req, HttpServletResponse resp)  
             throws ServletException, IOException {  
         doGet(req, resp);  
     }  
 }  

web.xml

    Xml代码   
    
  
 <servlet>  
  <servlet-name>Uploadify</servlet-name>  
  <servlet-class>com.Uploadify</servlet-class>  
 </servlet>  
 <servlet-mapping>  
  <servlet-name>Uploadify</servlet-name>  
  <url-pattern>/scripts/uploadify</url-pattern>  
 </servlet-mapping>  

原文www.iteye.com/blog/1550508

IT圈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery上传插件Uploadify并传参数

也可以去看看官网上面的 dome 下载包...API 等下面是我开发过程遇到的一些问题总结： 1、上传失败 IO ERROR ------测试是否是 servlet 等配置或者关注flash的版本 2、前台传参中文乱码 -----------这个要根据应用服务器不同可能不同吧...反正只要我们的界面、界面传参以及后台接收的编码设置一致应该就没上面问题
复制链接

扫一扫