Ajax를 사용하여 파일 일괄 업로드 및 다운로드를 구현하는 방법-JS 튜토리얼-php.cn

Ajax를 사용하여 파일 일괄 업로드 및 다운로드를 구현하는 방법

php中世界最好的语言

풀어 주다： 2018-03-30 16:59:45

원래의

2914명이 탐색했습니다.

이번에는 Ajax로 파일 일괄 업로드 및 다운로드를 구현하는 방법을 보여드리겠습니다. Ajax로 파일 일괄 업로드 및 다운로드를 구현할 때 주의 사항은 무엇입니까?

오늘은 파일을 업로드하고 다운로드했습니다. 간단히 요약하면 기본적인 웹 프로젝트 구축과 SpringMVC 프레임워크 구성에 대해서는 여기서 자세히 작성하지 않겠습니다.

업로드 형식:

<form id="uploadfiles" enctype="multipart/form-data">
    <input type="file" multiple="multiple" id="file_upload" name="file_upload" /> 
    <input type="button" value="上传" onclick="upload()" />
</form>

로그인 후 복사

Ajax 업로드:

<script type="text/javascript">
/*
 * 上传文件
 */
function upload(){
  var formData = new FormData($( "#uploadfiles" )[0]);
   $.ajax({
      type: "post",
      url: "./path/upload",
      dataType: "json",
      data: formData,
      /**  
       *必须false才会自动加上正确的Content-Type  
       */ 
      contentType : false, 
      /**  
       * 必须false才会避开jQuery对 formdata 的默认处理  
       * XMLHttpRequest会对 formdata 进行正确的处理  
       */ 
      processData : false,
      success: function(data){//从后端返回数据进行处理
       if(data){
         alert("上传成功！");
       }else{
         alert("上传失败！");
       }
      },
      error: function(err) {//提交出错
        $("#msg").html(JSON.stringify(err));//打出响应信息
        alert("服务器无响应");
       }
     });
}
</script>

로그인 후 복사

spring.xml 구성 플러스:

<!-- 配置文件上传 -->
  <bean id="multipartResolver"
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- 默认编码 -->
    <property name="defaultEncoding" value="utf-8" />
    <!-- 文件大小最大值 -->
    <property name="maxUploadSize" value="10485760000" />
    <!-- 内存中的最大值 -->
    <property name="maxInMemorySize" value="40960" />
  </bean>
controller：
/*
   * 上传多个文件
   */
  @RequestMapping(value = "/upload", produces = "application/json;charset=UTF-8")
  public @ResponseBody
  boolean uploadFiles(@RequestParam("file_upload") MultipartFile [] files) {
    boolean result = false;
    String realPath;
    for(int i=0;i<files.length;i++){
      if (!files[i].isEmpty()) { 
          String uniqueName=files[i].getOriginalFilename();//得到文件名
          realPath="E:"+File.separator+uniqueName;//文件上传的路径这里为E盘
          files[i].transferTo(new File(realPath));  // 转存文件
          result = true;      
        } catch (Exception e) { 
          e.printStackTrace(); 
        } 
      }
    }
    return result;
  }

로그인 후 복사

다운로드한 JSP 페이지 코드는 다양한 요구 사항에 따라 직접 설계했습니다.

/*
   * 下载多个文件
   */
  @RequestMapping(value = "/download")
  public void downloadFiles(HttpServletResponse response) {
    String str= request.getParameter("rows");//下载文件信息，包括文件名、存储路径等
    JSONArray path=(JSONArray) JSONArray.parse(request.getParameter("rows"));
    Path paths[]=new Path[path.size()];
    paths = JSONArray.parseArray(str, Path.class).toArray(paths);
    String uri = "d:"+ File.separator + "mldn.zip";//临时文件存储路径
    File zipFile = new File(uri) ;  // 定义压缩文件名称 
    ZipOutputStream zipOut = null;// 声明压缩流对象 
    InputStream input = null;
    //将要压缩的文件加入到压缩输出流中
    try {
      zipOut = new ZipOutputStream(new FileOutputStream(zipFile));
    } catch (FileNotFoundException e) {
      e.printStackTrace();
    }
    for(int i = 0;i<paths.length;i++){
      File file = new File(paths[i].getUri()+File.separator+paths[i].getFilename());
      try {
        input = new FileInputStream(file) ;// 定义文件的输入流 
        zipOut.putNextEntry(new ZipEntry(file.getName())) ; // 设置ZipEntry对象 
      } catch (Exception e) {
        e.printStackTrace();
      } 
    }
    //将文件写入到压缩文件中
    int temp = 0 ; 
    try {
      while((temp=input.read())!=-1){ // 读取内容 
        zipOut.write(temp) ;  // 写到压缩文件中 
      }
    } catch (IOException e) {
      e.printStackTrace();
    }finally{ 
      try {
        input.close() ;
        zipOut.close() ; 
      } catch (IOException e) {
        e.printStackTrace();
      } 
    }
    try {
      // 以流的形式下载文件。
      BufferedInputStream fis = new BufferedInputStream(new FileInputStream(zipFile));
      byte[] buffer = new byte[fis.available()];
      fis.read(buffer);
      fis.close();
      // 清空response
      response.reset();
      OutputStream toClient = new BufferedOutputStream(response.getOutputStream());
      response.setContentType("application/x-msdownload;"); 
      response.setHeader("Content-Disposition", "attachment;filename=" + zipFile.getName());
      toClient.write(buffer);
      toClient.flush();
      toClient.close();
      zipFile.delete();    //将生成的服务器端文件删除
    } 
    catch (IOException ex) {
      ex.printStackTrace();
    }  
  }

로그인 후 복사

여러 파일을 하나의 압축 패키지로 다운로드한 후 생성된 임시 압축 파일을 삭제하세요.

Ajax를 사용하여 다운로드 페이지에서 요청을 제출하는 경우 참고하세요: ajax 함수의 반환 유형은 xml, text, json, html 및 기타 유형만 있고 "스트림" 유형은 없습니다. ajax 다운로드를 구현하고 싶지만 해당 ajax 기능을 사용할 수 없습니다. 파일 다운로드. 하지만 js를 사용하여 양식을 생성하고, 이 양식을 사용하여 매개변수를 제출하고, "스트림" 유형 데이터를 반환할 수 있습니다.

예:

function download(){
    var form=$("<form>");//定义一个form表单
    form.attr("style","display:none");
    form.attr("target","");
    form.attr("method","post");
    form.attr("action","./path/download");//请求url
    var input1=$("<input>");
    input1.attr("type","hidden");
    input1.attr("name","rows");//设置属性的名字
    input1.attr("value",“test”);//设置属性的值
    $("body").append(form);//将表单放置在web中
    form.append(input1);
    form.submit();//表单提交       
              }

로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!