javascript - java中将记录上传到数据库时的Jquery进度条

Question

我有数千条记录存储在Excel表中，我需要将这些记录上传到数据库中，目前我正在使用Spring Controller 类进行上传，在我的类中我使用简单的BufferedOutputStream和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- Controller 端:

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


                }
                ;