• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML5 Ajax文件上传进度条如何显示

    原本打算使用jquery插件进行异步文件上传,比如uploadfy但是需要额外的支持,也有人用iframe模仿异步上传机制,感觉都比较别扭。因为项目不考虑低版本浏览器,所以决定用html5实现。下面只是一个简单的demo,具体样式需要自己去做。
    后台基于strut2进行文件处理,具体因项目而定。只是要注意设置文件大小的限制。  constant name="struts.multipart.maxSize" value="52428800"/>这个配置根据具体情况设定,超过此值会报404.
    首先是上传页面,比较简单,附带了文件上者这个参数。

    upload.jsp

    %@page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> 
    %
    String path = request.getContextPath(); 
    %>
    !DOCTYPE html>
    html>
    head>
     title>使用XMLHttpRequest上传文件/title>
     script type="text/javascript">
     var xhr = new XMLHttpRequest();
     
     //监听选择文件信息
     function fileSelected() {
      //HTML5文件API操作
      var file = document.getElementById('fileName').files[0];
      if (file) {
       var fileSize = 0;
       if (file.size > 1024 * 1024)
       fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
       else
       fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
    
       document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
       document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
       document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
      }
      }
     
     //上传文件
     function uploadFile() {
      var fd = new FormData();
      //关联表单数据,可以是自定义参数
      fd.append("name", document.getElementById('name').value);
      fd.append("fileName", document.getElementById('fileName').files[0]);
    
      //监听事件
      xhr.upload.addEventListener("progress", uploadProgress, false);
      xhr.addEventListener("load", uploadComplete, false);
      xhr.addEventListener("error", uploadFailed, false);
      xhr.addEventListener("abort", uploadCanceled, false);
      //发送文件和表单自定义参数
      xhr.open("POST", "%=path%>/user/uploadifyTest_doUpload");
      xhr.send(fd);
      }
     //取消上传
     function cancleUploadFile(){
     xhr.abort();
     }
     
     //上传进度
     function uploadProgress(evt) {
      if (evt.lengthComputable) {
       var percentComplete = Math.round(evt.loaded * 100 / evt.total);
       document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
      }
      else {
       document.getElementById('progressNumber').innerHTML = 'unable to compute';
      }
     }
    
     //上传成功响应
     function uploadComplete(evt) {
      //服务断接收完文件返回的结果
      alert(evt.target.responseText);
     }
     
     //上传失败
     function uploadFailed(evt) {
      alert("上传失败");
     }
     //取消上传
     function uploadCanceled(evt) {
      alert("您取消了本次上传.");
     }
     /script>
    /head>
    body>
    form id="form1" enctype="multipart/form-data" method="post" action="upload.php">
    div class="row">
      label for="fileToUpload">选择文件/label>
    input type="file" name="fileName" id="fileName" onchange="fileSelected();"/>
     /div>
    div id="fileName">/div>
    div id="fileSize">/div>
    div id="fileType">/div>
    div class="row">
    上传者:input type="text" name="name" id="name"/>
    input type="button" onclick="uploadFile()" value="上传" />
    input type="button" onclick="cancleUploadFile()" value="取消" />
     /div>
    div id="progressNumber">/div>
    /form>
    
    /body>
    /html>
    
    

    fd.append("name", document.getElementById('name').value);
    fd.append("fileName", document.getElementById('fileName').files[0]);
    这两句是把数据绑定到表单。因为html5支持多文件上传,所以
    document.getElementById('fileName').files
    返回的是数组。这里只有一个文件所以取下标0的元素。

    xhr.upload.addEventListener("progress", uploadProgress, false);

    xhr.addEventListener("load", uploadComplete, false);

    xhr.addEventListener("error", uploadFailed, false);

    xhr.addEventListener("abort", uploadCanceled, false);
    这里绑定进度、上传、错误、中断的事件,提供一些交互。文件进度显示就是在progress回调中进行显示的。
    然后贴上后台代码和action配置,UploadifyTestAction.java

    package com.bjhit.eranges.actions.test;
    
    import java.io.File;
    
    import com.opensymphony.xwork2.ActionSupport;
    
    public class UploadifyTestAction extends ActionSupport {
     private static final long serialVersionUID = 837481714629791752L;
     private File fileName;
     private String name;
     private String responseInfo;
    
     public String doUpload() throws Exception {
     System.out.println(name);
     File myFile = fileName;
     System.out.println(myFile.getName());
     responseInfo = "上传成功!";
     return "doUpload";
     }
    
     public String getName() {
     return name;
     }
    
     public void setName(String name) {
     this.name = name;
     }
    
     public File getFileName() {
     return fileName;
     }
    
     public void setFileName(File fileName) {
     this.fileName = fileName;
     }
    
     public String getResponseInfo() {
     return responseInfo;
     }
    
     public void setResponseInfo(String responseInfo) {
     this.responseInfo = responseInfo;
     }
    }
    
    

    action配置

    !-- 文件上传例子 -->
    action name="uploadifyTest_*" class="com.bjhit.eranges.actions.test.UploadifyTestAction" method="{1}">
     result name="doUpload" type="json">
     param name="includeProperties">responseInfo/param>
     param name="excludeNullProperties">true/param>
     /result>
    /action>
    

    这样基本的上传功能就实现了。

    感谢大家的阅读,希望本文所述对大家学习Ajax方式文件上传进度条实现方法有所帮助。

    您可能感兴趣的文章:
    • 基于ajax实现文件上传并显示进度条
    • 基于HTML5 Ajax文件上传进度条如何实现(jquery版本)
    • js HTML5 Ajax实现文件上传进度条功能
    • 基于HTML5 Ajax实现文件上传并显示进度条
    • php ajax实现文件上传进度条
    • 基于Ajax技术实现文件上传带进度条
    上一篇:原生ajax和iframe框架实现图片文件上传的两种方式
    下一篇:Ajax实现简单下拉选项效果【推荐】
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML5 Ajax文件上传进度条如何显示 HTML5,Ajax,文件,上传,进度,