文件上传进度 axios 文件上传进度条jquery

 之前有做一个项目用到了图片与教材的上传，图片大小一般为几十KB，PDF一般为1~5M。小文件上传一般采用HTTP协议上传即可。

enctype="multipart/form-data"。但这种方式上传会刷新页面，用户体验不好。

 为了很好的用户体验，AJAX上传无疑是最好的，于是网上找了一个AJAX上传组件叫jquery-upload。

 需求：指定格式上传一个图片或PDF，要求上传有进度条，及上传成功后自动显示上传的图片。

 思路：1、前后台验证指定格式上传，只有规定格式才可上传，只需要验证file的value值是否为空即可。

             2、上传过程中通过jquery-upload插件获取文件大小，计算进度条等。

             3、文件上传默认存放在tomcat目录下，上传成功后将文件移动到指定文件夹下即可。

 

 前台JSP：

 需要引入：jquery-1.11.0.min.js和jquery-upload.min.js。下载地址

 jquery-upload不需要指定FORM标签，只要有input type=file即可。

<input type="file" name="file" id="file"/>
<input type="button" id="upload" class="l-button" value="Upload" />
<!-- 显示进度条 -->
<span id="progress" style="color:green;"></span>

 前台JS：

代码中所有liger相关方法与上传无关，可以不用关注。

$(function(){
	// 图片上传. 
            $("#upload").click(function() {
                if(!validUpload()) return; // 验证图片格式。
                $("#file").upload({
                    action: hy.url+"/upload/uploadTeacherIMG.action",
                    oncomplete: function(result) {
                        var mess = result.responseText;
                        // 上传成功处理.更换页面显示图片。
                        if(result.status == 200){
                            $("#teacherImg").attr("src",hy.url+"/FileTemp/"+mess.split(":")[1]);
                             $.ligerDialog.success("图片已上传成功,请完善教师其它信息.");
                         }else 
                             $.ligerDialog.error(mess); 
                    },onprogress: function(e) {
                        $("#progress").html("上传进度:"+(e.loaded / e.total *100 ).toFixed(2) + "%");
                    }
                });
            });
      });

       // 验证图片上传。
        function validUpload(){
            var img = $("#file").val();
            if(img == ""){
                $.ligerDialog.error("请上传图片.");
                return false;
            }
            var suffix = img.substring(img.length-4, img.length);
            if(suffix != ".png"){
                $.ligerDialog.error("只支持.png格式的图片。");
                return false;
            }
            return true;
        }

 

 后台JAVA代码（我使用的是springMVC，也可以使用FileUpload lib IO流操作也可以）：

/** 上传教师图片. */
    @RequestMapping("/uploadTeacherIMG")
    public void uploadTeacherIMG(HttpServletRequest request,HttpServletResponse response){
        String result = fileUpload(request, response, ".png", "TeacherSuffix",
                "TeacherTomcatPath");
        PrintWriter.print(response, result);
    }

/**
     * AJAX上传小文件.
     * @param requireSuffix
     *           必须是requireSuffix指定的格式才能上传.
     * @param fileSuffix
     *          将后缀名保存到session，方便后续操作。
     * @param tomcatPath
     *         将tomcat临时文件的绝对路径保存到session，方便后续操作。
     * @return
     */
    public String fileUpload(HttpServletRequest request,HttpServletResponse response,
            String requireSuffix,String fileSuffix,String tomcatPath){
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; 
        HttpSession session = request.getSession();
        CommonsMultipartFile file = (CommonsMultipartFile) multipartRequest.getFile("file");
        String fileName = file.getOriginalFilename();
        String tempPath = request.getSession().getServletContext().getRealPath("/")  
        + "\\" + "FileTemp\\";
        File dirPath = new File(tempPath);
        if (!dirPath.exists()) {
            dirPath.mkdir();
        }
        
        if(BaseUtils.isEmpty(fileName)){
            return "请上传文件.";
        }
        String suffix = fileName.substring(fileName.length()-4, fileName.length());
        if(!suffix.equals(requireSuffix)){
            return "请上传" + requireSuffix + "格式的文件.";
        }
        
        try {
            session.setAttribute(fileSuffix, suffix);
            fileName = PackageUtils.systemtimestring() + suffix;
            session.setAttribute(tomcatPath, tempPath + fileName);
            File uploadFile = new File(tempPath + fileName);
            FileCopyUtils.copy(file.getBytes(), uploadFile);
            return "success:"+fileName;
        } catch (Exception e) {
            return "图片上传失败,"+e.getMessage();
        }
    }

/** 将tomcat下的图片，移动到指定目录，最后再删除TOMCAT的临时文件。 */
public boolean moveFile(String path,String tomcatPath){
        try {
            // 检查是否有文件夹，若无则新建。
            File file = new File(path);
            if (!file.getParentFile().exists())
                file.getParentFile().mkdirs();
            File tempFile = new File(tomcatPath);
            File newFile = new File(path);
            FileCopyUtils.copy(tempFile, newFile);
            tempFile.delete();
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }

 jquery-upload是一个非常不错的AJAX上传插件，代码少，易维护、适用于小文件上传。

 在此之前，我曾经尝试用过多个上传插件，感觉jquery-upload插件还是最方便的。