JavaScriptjQuery在java中将记录上传到数据库时的进度条

Question

我有数千条记录存储在excel表格中，我需要将这些记录上传到数据库中，目前我使用Spring controller类进行上传，在我的类中，我使用simpleBufferedOutputStream和FileReader类，所以我的要求是，在将数据上传到数据库时，我需要显示一个包含百分比的Jquery进度条

Link here.

我的示例代码

 String rootPath = request.getSession().getServletContext().getRealPath("/");
    File dir = new File(rootPath + File.separator + "uploadedfile");
    if (!dir.exists()) {
        dir.mkdirs();
    }

    File serverFile = new File(dir.getAbsolutePath() + File.separator + form.getEmpFile().getOriginalFilename());

    try {
        try (InputStream is = form.getEmpFile().getInputStream();
                BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(serverFile))) {
            int i;
            //write file to server
            while ((i = is.read()) != -1) {
                stream.write(i);
            }
            stream.flush();
        }
    }
    catch (IOException e) {
        model.addAttribute("msg", "failed to process file because : " + e.getMessage());
    }
    String[] nextLine;
    try (FileReader fileReader = new FileReader(serverFile); CSVReader reader = new CSVReader(fileReader, ';', '\'', 1);) {
        while ((nextLine = reader.readNext()) != null) {
            for (int i = 0; i < nextLine.length; i++) {
                nextLine[i] = nextLine[i].trim();
                if (!nextLine[i].equals("")) {
                    String[] data = nextLine[i].split(",");

Answer 1

也许这会有帮助：

1-控制器端：

 public class ExtractController { 
   ******** 
  // I created a global variable here
   int percentage = 0; 
   Workbook workbook;

 @RequestMapping(value ="/uploadExcel", method = RequestMethod.POST)
 public @ResponseBody String uploadExcel(Model model, @RequestParam("excelfile") MultipartFile excelfile,
        HttpServletResponse response) {
 **********
     try {
        int i = 0;
 ********* 
          while (i <= worksheet.getLastRowNum()) {
            percentage = Math.round(((i * 100) /  worksheet.getLastRowNum()));
   Row row = worksheet.getRow(i++);
  }
    *********
     }catch (Exception e) {
        e.printStackTrace();
    }
 return "extract";
}

 @RequestMapping(value = "/getpercent", method = RequestMethod.GET)
  public @ResponseBody String getPerc(@RequestParam("param") String param) {
************

 // you  return the value of the global variable when the action is called
    return percrentage;

   }
 }

1-JavaScript端：

 $.ajax({
                 url : 'uploadExcel',
                type : 'POST',
                data : new FormData(this),
                beforeSend : function() {
                                                  $('#valid').attr("disabled", true);
                                                    // I call my loop function 
                                                    loop();
                                                },
                success : function(data) {
                                                       $('#valid').attr("disabled", false);
                                                }
                                            });


function loop() {               
                    $.ajax({

                        url : 'getpercent',

                        type : 'GET',

                        success : function(response) { 
                             count = response;
                                // this function updates my progress bar with  the new value 
                                change(count);
                                *********
                        }

                    });
                    var time = 2000;

                if(count < 100){
                    setTimeout(loop, time);
                }


                }
                ;