zoukankan      html  css  js  c++  java
  • jquery uploadify多文件上传

    项目中使用

    1、下载相关jar 包:commons-fileupload-1.2.2.jar,commons-io-2.1.jar,commons-logging-1.1.1.jar

    2、jsp页面

    1、首先jsp页面引入的文件

       <link href="js/uploadify.css" rel="stylesheet" type="text/css" />  
      <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>  
    <script type="text/javascript" src="scripts/swfobject.js"></script>  
    <script type="text/javascript" src="js/jquery.uploadify.min.js"></script>  
    <!--ready事件-->  
    <script type="text/javascript">  
     $(document).ready(function() {
        $('#file_upload').uploadify( {  
          //  'debug':'true',  
            'swf'            : '<%=path%>/js/uploadify.swf',  
            'uploader'       : '<%=path%>/Upload',//后台处理的请求  
            'cancelImg'      : '<%=path%>js/uploadify-cancel.png',
            'method':'post',  
            'folder' : '/UploadFile',//上传后,所保存文件的路径  
            'queueID' : 'fileQueue',//上传显示进度条的那个div  
            'buttonText' : '请选择文件',  
            'onUploadComplete': function(file){
                alert(file.id)
                alert('The file'+file.name+'finished processing!')},//每个文件上传成功后的函数  
            progressData : 'percentage',  //设置上传进度显示方式,percentage显示上传百分比,speed显示上传速度
           // progressData : 'speed',  
            'auto' : true,  
            'multi' : true,  
            'removeCompleted':false,//是否自动将已完成任务从队列中删除,如果设置为false则会一直保留此任务显示
            //'onSelect':function(file){  
            //alert("文件"+file.name+"被选择了!");  
            //}  
            //'onQueueComplete' : function(queueData) {  
            //  alert(queueData.filesQueued + 'files were successfully!')  
            //},//当队列中的所有文件上传成功后,弹出共有多少个文件上传成功  
            'onDisable' : function() {  
                alert('uploadify is disable');  
            },//在调用disable方法时候触发  
            //'onCancel':function(){alert('你取消了文件上传')}  
            //'onUploadStart' : function(file) {//在调用上传前触发  
            //alert('The file ' + file.name + ' is being uploaded.')}  
            'onError' : function(errorType,errObj) {  
                alert('The error was: ' + errObj.info)  
            }  

        });  
       }); 

       <body>  
            <!--   <div id="fileQueue"></div>  
                <input type="file" name="uploadify" id="uploadify" />  
                <p>  
                    <a href="javascript:$('#uploadify').uploadify('upload')">开始上传</a>   
                    <a href="javascript:$('#uploadify').uplaodify('cancel','*')">取消上传</a>  
                </p>   -->
                <div id="fileQueue"></div>  
            <input id="file_upload" name="file_upload" type="file" multiple="true">  
            <p>  
                <!-- 加上“*”表示当第一个文件上传成功后,立即上传以后队列中的文件,否则需要自己手动 -->  
                <a href="javascript:$('#file_upload').uploadify('upload','*')">上传</a>|  
                <a  
                    href="javascript:$('#file_upload').uploadify('cancel',$('.uploadifive-queue-item').first().data('file'))">取消上传</a>  
                <a href="javascript:$('#file_upload').uploadify('cancel','*')">清空所有的上传文件</a>  
                <a href="javascript:$('#file_upload').uploadify('stop','*')">暂停</a>  
                <!-- 如果填入true则表示禁用上传按钮 -->  
                <a href="javascript:$('#file_upload').uploadify('disable','true')">禁用</a>  
                <a href="javascript:$('#file_upload').uploadify('debug')">调试</a>  
            </p>  
                
        </body> 

    3、servlet

    package com.yun4j;

    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.Servlet;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;

    import org.apache.commons.fileupload.disk.DiskFileItem;
    import org.apache.commons.fileupload.disk.DiskFileItemFactory;
    import org.apache.commons.fileupload.servlet.ServletFileUpload;
    import org.apache.commons.fileupload.util.Streams;

    /**
     * Servlet implementation class Upload
     */
    public class Upload extends HttpServlet implements Servlet {
          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+"; name:"+name);    
                File file = new File(savePath);    
                if (!file.isDirectory()) {    
                    file.mkdirs();    
                }    
            
                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()) {    
                        Object obit = it.next();  
                        if(obit instanceof DiskFileItem){  
                            System.out.println("xxxxxxxxxxxxx");  
                            DiskFileItem item = (DiskFileItem) obit;    
                                
                            // 如果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 (org.apache.commons.fileupload.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);    
            }    
    }
    4、web.xml

      <servlet>
        <description></description>
        <display-name>Upload</display-name>
        <servlet-name>Upload</servlet-name>
        <servlet-class>com.yun4j.Upload</servlet-class>
      </servlet>
      <servlet-mapping>
        <servlet-name>Upload</servlet-name>
        <url-pattern>/Upload</url-pattern>
      </servlet-mapping>

  • 相关阅读:
    金额与数字转化常用实用几个JS方法
    Jdb命令 The Java Debugger
    GLOBAL TEMPORARY TABLE
    安装与配置Nginx
    MySQL二进制安装与密码破解
    基于FPM构建企业RPM包
    安装Tomcat
    nginx配置优化
    DHCP原理及配置(三个小实验)
    DNS主、从服务器的配置
  • 原文地址:https://www.cnblogs.com/chizizhixin/p/5390199.html
Copyright © 2011-2022 走看看