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

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

jsp ajax java javascript

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 年前

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

干杯

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);
            }
}