代码之家  ›  专栏  ›  技术社区  ›  Azat Usmanov

最后一个文件完成后的ajax多文件上载警报

  •  0
  • Azat Usmanov  · 技术社区  · 7 年前

    jsp

    <%@ page language="java" contentType="text/html; charset=cp1251"
            pageEncoding="cp1251"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=cp1251">
    <title>Загрузка файлов</title>
    <link rel=stylesheet type="text/css" href="/styles/style.css">
    <style>
        .td {
            valign: top
        }
    </style>
    <script type="text/javascript">
        function upload(){
           var x = document.getElementById("plan_upload");
           for (var i = 0; i < x.files.length; i++) {
              var file = x.files[i];
              var plan_type='${param.par_type}'
              var formdata = new FormData();
              formdata.append("plan_upload", file);
              var ajax = new XMLHttpRequest();
              ajax.cur_number=(i+1);
              ajax.total_number=x.files.length;
              ajax.addEventListener("error", errorHandlerPlanUpload, false);
              ajax.addEventListener("abort", abortHandlerPlanUpload, false);
              ajax.onreadystatechange = function  (){   
                    if (ajax.readyState==4 && ajax.status==200){
                        var total_number = ajax.total_number;
                        var cur_number= ajax.cur_number;
                        if(cur_number==total_number){
                            alert('Загрузка файлов успешно завершена!');// upload successfull
                            window.opener.location.reload()
                            window.close();
                        }               
                    }
               }  
              ajax.open("POST", "MultipleFileUpload?par_type="+plan_type);
              ajax.send(formdata);
            }
        }
    function updateList (){
       var input = document.getElementById('plan_upload');
       var output = document.getElementById('fileList');
       output.innerHTML = '<ul>';
       for (var i = 0; i < input.files.length; ++i) {
           output.innerHTML += '<li>' + input.files.item(i).name + '</li>';
       }
       output.innerHTML += '</ul>';
    }
    function errorHandlerPlanUpload(event){
       alert("Ошибка при загрузке файлов!"); //cancel
       window.opener.location.reload();
       window.close()
    }
    function abortHandlerPlanUpload(event){
       alert("Загрузка файлов была отменена!");//abort
       window.opener.location.reload();
       window.close();
    }
    </script>
    </head>
    <body style="background-color: white;">
      <form name="multiple_upload_form"   enctype="multipart/form-data" autocomplete="off" onsubmit="return false;" >
          <input  onchange="updateList()" accept=".xml,.osf,.zsf,.plax" id="plan_upload" name="plan_upload"  multiple type="file" required />
          <br/>Выбранные файлы:
        <div id="fileList"></div>
        <button id="testt" onclick="upload()" type="submit">Загрузить файлы</button>
       </form>
    </body>
    </html>
    

    package com.ieml.servlets.plan;
    
    import java.io.*;
    import java.sql.*;
    import java.util.*;
    
    import javax.servlet.*;
    import javax.servlet.http.*;
    
    import org.apache.commons.fileupload.*;
    
        import org.apache.commons.fileupload.disk.*;
        import org.apache.commons.fileupload.servlet.*;
    
        import com.ieml.Global;
        import com.ieml.util.*;
    
        public class MultipleFileUploadServlet extends javax.servlet.http.HttpServlet {
            private static final long serialVersionUID = 1L;
    
            protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                doPost(request, response);
            }   
    
            protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
            {
                //PrintWriter out = response.getWriter();
                String path = com.ieml.Global.getUploadDirectory();
                Integer type= ServletUtilities.getIntParameter(request, "par_type");
                if(path == null)
                {
                    ServletUtilities.forwardErrorPage(request, response, "Не указано место хранения файлов");           
                    return;         
                }
                if(type==null)
                {
    
                    ServletUtilities.forwardErrorPage(request, response, "Не указан тип плана");            
                    return;
    
                }
                else
                {
                    switch(type)
                    {
                    case 1:path+="/plans/incoming/"; break;
                    case 2:path+="/plansMag/incoming/";break;
                    case 3:path+="/plansSPO/incoming/";break;
                    default:break;
                    }
                }
    
                boolean isMultipart = ServletFileUpload.isMultipartContent(new ServletRequestContext(request));
    
                if (isMultipart) 
                {
                    try
                    {
                        FileItemFactory factory = new DiskFileItemFactory();
                        ServletFileUpload upload = new ServletFileUpload(factory);
                        upload.setHeaderEncoding("UTF-8");
                        List<?> items = upload.parseRequest(request);
                        Iterator<?> iter = items.iterator();
                        while(iter.hasNext())
                        {
                            FileItem item = (FileItem)iter.next();                
                            if (!item.isFormField()) 
                            {
                                String fileName = item.getName();
                                if(!fileName.endsWith(".xml") &&!fileName.endsWith(".XML") &&
                                        !fileName.endsWith(".osf") && !fileName.endsWith(".OSF") &&
                                        !fileName.endsWith(".zsf") && !fileName.endsWith(".ZSF")&&
                                        !fileName.endsWith(".plax") && !fileName.endsWith(".PLAX")
                                        )
                                {
                                    ServletUtilities.forwardErrorPage(request, response, "Поддерживаемые форматы  файлов: .xml, .osf, .zsf, .plax");
                                    return;         
                                }
    
                                try (Connection conn = Global.getConnection()){
    
                                    File f = new File(path,   fileName);
                                    if(f.exists())
                                    {
                                        boolean success=f.delete();
                                        if(!success)
                                        {
                                            try {
                                                System.err.println("Не могу удалить файл "+f.getCanonicalPath());
                                            } catch (IOException e) {
                                                // TODO Auto-generated catch block
                                                e.printStackTrace();
                                            }
                                        }
                                    }
    
                                    File uploadedFile = new File(path, fileName);
                                    try
                                    {
                                        item.write(uploadedFile);
                                    }
                                    catch(Exception e)
                                    {
                                        e.printStackTrace();
                                        log(e.getMessage());
                                        ServletUtilities.forwardErrorPage(request, response, "Не могу записать файл.");
                                    }
                                }                   
    
                                break;
                            }
                        }
    
    
                    }
                    catch(SQLException e){
                        e.printStackTrace();
                    }
                    catch(FileUploadException fue){
                        fue.printStackTrace();
                        log(fue.getMessage());
                        ServletUtilities.forwardErrorPage(request, response, "Не могу принять файл.");              
                    }
                }   
            }
        }
    

    由于我必须使用旧的apache commons文件上载,我决定进行几个ajax调用(每个文件一个),但只在最后一个文件完成上载后显示“上载成功”消息。 由于某些原因,浏览器有时会显示多个成功的 上传警报,而不仅仅是一个

    如果我选择了许多(15-20)文件进行上传,这种情况似乎会发生得更多。服务器端上载目录当前为本地文件夹。有什么建议可以解决我的onreadystatechange函数的问题吗?

    我在windows xp上使用chrome 49.0.2623.112 m和firefox 52.1.1

    UPD

    function upload(){
        var x = document.getElementById("plan_upload");
        var noOfFiles = x.files.length;
        var i=0;
        for (i = 0; i < noOfFiles; i++) 
        {
            var file = x.files[i];
            var plan_type='${param.par_type}'
            var formdata = new FormData();
            formdata.append("plan_upload", file);
            var ajax = new XMLHttpRequest();
            ajax.cur_number=(i+1);
            ajax.total_number=x.files.length;
            ajax.addEventListener("error", errorHandlerPlanUpload, false);
            ajax.addEventListener("abort", abortHandlerPlanUpload, false);
            ajax.onreadystatechange = function  ()
            {   
                if (ajax.readyState==4 && ajax.status==200)
                {
                    var total_number = ajax.total_number;
                    var cur_number= ajax.cur_number;
                    alert('i= '+i+' total files '+noOfFiles ) // i always equals  noOfFiles
                        if(i == noOfFiles-1){   //Check if last file
                            alert('Загрузка файлов успешно завершена!');// upload successfull
                            window.opener.location.reload()
                            window.close();
                        }
    
                    }               
                }
    
            ajax.open("POST", "MultipleFileUpload?par_type="+plan_type);
            ajax.send(formdata);
        }
    }
    
    2 回复  |  直到 7 年前
        1
  •  1
  •   Vinoth Krishnan    7 年前

    如果我正确理解了你的问题, 你不想对每个成功上传的文件显示警报。相反,您只想显示最后一个文件。

    如果我没有错,你必须检查警报语句的一个If条件,并检查它是否是最后一个但没有任何文件。

    function upload(){
        var x = document.getElementById("plan_upload");
        var noOfFiles = x.files.length;
        for (var i = 0; i < noOfFiles; i++) 
        {
            var file = x.files[i];
            var plan_type='${param.par_type}'
            var formdata = new FormData();
            formdata.append("plan_upload", file);
            var ajax = new XMLHttpRequest();
            ajax.cur_number=(i+1);
            ajax.total_number=x.files.length;
            ajax.addEventListener("error", errorHandlerPlanUpload, false);
            ajax.addEventListener("abort", abortHandlerPlanUpload, false);
            ajax.onreadystatechange = function  ()
            {   
                if (ajax.readyState==4 && ajax.status==200)
                {
                    var total_number = ajax.total_number;
                    var cur_number= ajax.cur_number;
                    if(cur_number==total_number)
                    {
                        if(i == noOfFiles-1){   //Check if last file
                            alert('Загрузка файлов успешно завершена!');// upload successfull
                        }
                        window.opener.location.reload()
                        window.close();
                    }               
                }
            }  
            ajax.open("POST", "MultipleFileUpload?par_type="+plan_type);
            ajax.send(formdata);
        }
    }
    

    working code

    干杯

        2
  •  0
  •   Azat Usmanov    7 年前

    我通过向XMLHttpRequest的open函数传递额外的伪参数,通过AJAX调用同步解决了这个问题

    function upload()
    {
              var x = document.getElementById("plan_upload");
              var numOfFiles= x.files.length;
              for (var i = 0; i < numOfFiles; i++) 
              {
                    var file = x.files[i];
                    var plan_type='${param.par_type}'
                    var formdata = new FormData();
                    formdata.append("plan_upload", file);
                    var ajax = new XMLHttpRequest();
                    ajax.addEventListener("error", errorHandlerPlanUpload, false);
                    ajax.addEventListener("abort", abortHandlerPlanUpload, false);
                    ajax.onreadystatechange = function  ()
                    {   
                        if (ajax.readyState==4 && ajax.status==200)
                        {
                            if(i== numOfFiles-1)
                            {
                                alert('Загрузка файлов успешно завершена!');
                                window.opener.location.reload()
                                window.close();
                            }               
                        }
                    }  
                    ajax.open("POST", "MultipleFileUpload?par_type="+plan_type,false);
                    ajax.send(formdata);
                }
    }