使用 jQuery FileUpload 插件实现异步上传

Posted huazai1996

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用 jQuery FileUpload 插件实现异步上传相关的知识,希望对你有一定的参考价值。

首先,先做两个提前准备工作 

1.下载插件

2.向项目导入需要的css样式和js样式

下面,开始实现 使用 jQuery FileUpload 插件实现异步上传

 

<!- jsp 页面  以添加一个学生为例子 -!>

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<base href="<%=basePath %>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<!- 引入bootstrap样式  和 jQuery FileUpload插件的css样式 -!>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>

<link rel="stylesheet" type="text/css" href="css/jquery.fileupload.css">


</head>
<body>
<h3>添加就业学员</h3>
<div class="container">
  <form action="student/add" style="position: relative;" method="post" enctype="multipart/form-data">
    <div>
      <label for="sName">姓名</label>
      <input style="width:300px;" type="test" name="sName" class="form-control" id="sName" placeholder="Plest witer your Name">
    </div>
    <div>
      <label for="age">年龄</label>
      <input style="width:300px;" type="test" name="age" class="form-control" id="age" placeholder="Plest witer your age">
    </div>
    <div>
      <label for="sSet">性别</label>
      <input type="radio" name="sSet" value="男" checked="checked" />男
      <input type="radio" name="sSet" value="女" />女
    </div>
    <div>
      <select name="county" style="height:38px; width:300px; margin-top: 25px;">
        <option value="-1">县区</option>
        <option value="磁县">磁县</option>
        <option value="临漳">临漳</option>
        <option value="永年县">永年县</option>
        <option value="魏县">魏县</option>
        <option value="大名县">大名县</option>
      </select>
    </div>
    <div>
      <label for="address">详情地址</label>
      <input style="width:300px;" type="test" name="address" class="form-control" id="address" placeholder="Plest witer your address">
    </div>
    <div>
      <select name="classes" style="height:38px; width:300px;margin-top: 25px;">
        <option value="-1">班级</option>
        <option value="T12">T12</option>
        <option value="T13">T13</option>
      </select>
    </div>
    <div>
      <label for="graduate">毕业时间</label>
      <input style="width:300px;" type="test" name="graduate" class="form-control" id="graduate" placeholder="Plest witer your address">
    </div>
    <div >
      <label for="workTime">工作时间</label>
      <input style="width:300px;" type="test" name="workTime" class="form-control" id="workTime" placeholder="Plest witer your address">
    </div>
    <div>
      <label for="pay">福利待遇</label>
      <input style="width:300px;" type="test" name="pay" class="form-control" id="pay" placeholder="Plest witer your address">
    </div>
    <div id="photo" style="position: absolute;right:600px;top:10px;width:150px;text-align: center;">
      <div class="imges" style="position: relative; ">
        <img src="img/NV02.jpg" class="img-responsive">
          <div id="progress" class="progress" style="position: absolute;left:0px;top:0px;height:100%;width:100%;opacity:.5;">
            <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
          </div>
        </div>
      </div>

      <!- 引用插件的样式  修饰上传头像的样式 -!>
      <span class="btn btn-success fileinput-button">
      <i class="glyphicon glyphicon-plus"></i>
      <span>上传头像...</span>
        <input id="fileupload" type="file" name="image" >
      </span>
    </div>

      <!- 用于表单提交 name属性 的隐藏域 -!>
      <input type="hidden" name="img" id="img_hidden">
   </form>
</div>

   <!-引入 jQuery FileUpload插件的js样式   注意,jquery.fileupload.js 依赖于jquery.iframe-transport.js和jquery.ui.widget.js  所以三个js逗得引入-!>
   <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
   <script type="text/javascript" src="js/jquery.iframe-transport.js"></script>
   <script type="text/javascript" src="js/jquery.fileupload.js"></script>
   <script type="text/javascript">
      $(function(){

        <!- 上传调用 fileupload 方法  url:文件的上传路径名称  dataType:上传格式 done:可以理解为上传时需要做什么 progressall:上传时进度条的变化   -!>

        <!- 我这里文件指 ‘学生头像’  -!>

        $("#fileupload").fileupload({

          <!- “student/upload” 指的是  控制器方法( 方法在下面可见 )  返回文件路径 -!>
          url:"student/upload",
          dataType:"json",
          done : function(e,data){

            <!- 经测试,data反回的result属性里面的url 就是文件路径名称,所以用变量获取一下 -!>
            var url = data.result.url;

            <!-设置上传之后  将上传文件替换默认文件  -!>
            $("#photo img").attr("src","img/"+url);

            <!-将文件路径赋给隐藏域,用于表单提交-!>
            $("#img_hidden").val(url);

            <!- 上传之后进度条长度为0% -!>
            $(‘#progress .progress-bar‘).css("width","0%").html("");
          },
          progressall: function (e, data) {

            <!- 固定算法算出进度条 变化的百分比  后面参数10, 表10进制 -!>
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $(‘#progress .progress-bar‘).css(

            <!- 为进度条宽度赋值  将值赋给百分比 -!>
                ‘width‘,
              progress + ‘%‘
              ).html(progress + ‘%‘);
            }
          });
      })

</script>

 

</body>
</html>

<!- 控制器方法 student/uploa -!>

<!- 注解成一个控制器 -!>
@Controller
@RequestMapping("/student")

public class StudentController {

  <!-- 用注解方式,value指定从页面的提交地址,method指定是用表单的方式提交过来的 -->

  @RequestMapping(value="/upload",method=RequestMethod.POST)

  <!- 注解  @ResponseBody作用是带传递数据,不跳页面   因为返回键值,所以放回值 用Map-!>
  @ResponseBody

  <!--里面的参数  MultipartFile photo指文件上传的参数,与页面file类型的input的name值必须一致,HttpServletRequest request获取请求参数,File不提供request提交 -->
  public Map<String, Object> upload(MultipartFile image,HttpServletRequest request) throws Exception{
    Map<String, Object> map = new HashMap<>();

      <!- 判断,如果上传的文件内容不为空   执行以下操作 -!>
      if (!image.isEmpty()) {

        <!-  保存文件到指定的路径   这里获取的是服务器的绝对路径 -!>
        String path = request.getServletContext().getRealPath("/img");

        <!-把文件放到项目的指定地方 -!>
        File dest = new File(path + File.separator + image.getOriginalFilename());

        image.transferTo(dest);

        <!- 将植传递会页面  键为url  值为文件名称 -!>
        map.put("url", image.getOriginalFilename());
      }
    return map;
  }

}

<!- 另外在扩展一个知识点   提交表单的之后   Ajax支持序列化提交表单 -!>

//拿我这个例子来说明  我要添加一个学生   subFrom 可以是你添加学生的提交按钮调用的一个函数
  function subFrom(){

    <!- #form  指提交表单form定义的id  。serialize指的是调用序列化方法-!>
    var result = $("#form").serialize();

    <!- 发送异步请求  传递参数就是序列化方法定义的变量 result -!>
    $.post("student/add",result,function(){

      
    })
  }

 

 

  以上是我的一点总结,希望可以帮助到大家 !

























































































































以上是关于使用 jQuery FileUpload 插件实现异步上传的主要内容,如果未能解决你的问题,请参考以下文章

jQuery FileUpload 插件[转]

插件的使用-fileupload

Jquery-fileupload 插件 - 上传文件但说“文件上传失败”

jQuery Blueimp FileUpload 上的 DELETE 方法不允许使用 Codeigniter/PHP(405 错误)?

在jquery文件上传插件的fileuploadsend事件中检索jqXHR?

FileUpload