jQuery-file-upload插件的使用（小实例）

最新推荐文章于 2024-08-16 08:21:08 发布

三年模拟五年毕业

最新推荐文章于 2024-08-16 08:21:08 发布

阅读量1w

点赞数 5

分类专栏： js相关文章标签： jquery upload file 插件实例

本文链接：https://blog.csdn.net/itworktt/article/details/52384206

版权

js相关专栏收录该内容

2 篇文章 0 订阅

订阅专栏

关于文件上传的插件网上有太多了。但是呢，做的特别好的，特别漂亮的上传插件对于IE低版本的兼容性不好，甚至有的不支持。这里我先说说jquery-file-upload这款插件，兼容性好。至于其他的上传插件，例如uploadify、swfupload、dropzone等，后期我会抽出时间，将我在项目中使用心得都写出来。共同学习，有不足之处欢迎指正。

示例图：
这里写图片描述

1.首先是下载资源
（github上面写的demo太乱，新手即使下载下来，也不知道如何跑的起来，这就是我写这篇博文的原因。希望写一个很简单的实例，让新手快速的掌握。但是我们所需的资源也可以从demo上下载，取我们需要的即可）
我自己整理的资源地址：
http://download.csdn.net/detail/itworktt/9617821
git下载地址：
https://github.com/blueimp/jQuery-File-Upload/
需要用到的下载资源清单：
js：
jquery-3.0.0.min.js：最好是最新版本
jquery.ui.widget.js
jquery.iframe-transport.js
jquery.fileupload.js
css：
jquery.fileupload.css
jquery.fileupload-ui.css

2.编写实例
前台页面jsp：

<%--
  Created by IntelliJ IDEA.
  User: zz
  Date: 2016/8/31
  Time: 9:02
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jquery file upload</title>
  <script src="${pageContext.request.contextPath}/resources/testJqueryUpload/js/jquery-3.0.0.min.js"></script>
  <script src="${pageContext.request.contextPath}/resources/testJqueryUpload/js/jquery.ui.widget.js"></script>
  <script src="${pageContext.request.contextPath}/resources/testJqueryUpload/js/jquery.iframe-transport.js"></script>
  <script src="${pageContext.request.contextPath}/resources/testJqueryUpload/js/jquery.fileupload.js"></script>

  <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/testJqueryUpload/css/jquery.fileupload.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/testJqueryUpload/css/jquery.fileupload-ui.css">
  <style>
    .btn-success{display:inline-block; padding:0 0px;height:36px;background:#e7f1ff 6px center no-repeat;border-radius:5px;border:1px solid #89aede; line-height:35px;color:#3b83e1; font-weight:bold; cursor:pointer;text-align:center; min-width:100px; }
    .btn-success:hover{ background-color:#dbeafe;}

    .btn_blue{background-color: #E7F1FF;}
    .btn_blue:hover{ background-color: #89aede;}
    #center { padding-top: 100px }
  </style>
</head>
<body>
<div id="center" align="center">
        <%--<input id="fileId" type="file" name="file" data-url="${pageContext.request.contextPath}/uploadfile" multiple>--%>
        <%--<p></p>--%>
            <span class="btn btn-success fileinput-button">
                <span>选择文件</span>
                <input id="fileId" type="file"  name="file" multiple>
            </span>
        <div  id="files" class="btn_blue" style="width: 400px;height: 200px;"></div>
</div>
</body>


<script>
  (function(){
    $('#fileId').fileupload({
      url: '${pageContext.request.contextPath}/uploadfile',
      done: function (e, data) {
        alert('I love my girl friend-JOAN');
        $('#files').append(data.result.name+'<br>');
      },
      fail: function () {
        alert('出错');
      }
    });
  })();
</script>

</html>

3.后台接收
我这里用的是springmvc，写了一个controller。

 @RequestMapping("/uploadfile")
    @ResponseBody
    public Map jqueryUploadFile(MultipartFile file){
        System.out.println(file.getOriginalFilename());
        Map map=new HashMap();
        map.put("name",file.getOriginalFilename());
        return map;
    }