jQuery-file-upload插件的使用(小实例)

原创 2016年08月31日 13:49:11

关于文件上传的插件网上有太多了。但是呢,做的特别好的,特别漂亮的上传插件对于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;
    }

源码差不多就这样了。如果以上代码拷贝之后跑不起来的童鞋,可以下方留言。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jquery File Upload 插件应用之解析返回json对象

后端用spring mvc+module: Controller: @AuthPassport @RequestMapping("/EAF301L1/upload/{appno}/{rev}")...
  • rocklee
  • rocklee
  • 2016年10月08日 18:01
  • 2514

js上传文件 java后台接收文件

1、前端向后台传送文件的过程其实就是,前端将文件流传给后台,后台接收文件流,然后将其写到后台服务器上。处理文件时,后台程序只需要读取服务器上的文件即可。 2、需要引入两个jar包:commons-fi...

jquery file ajax upload插件的实例

  • 2007年11月15日 00:40
  • 37KB
  • 下载

jQuery-File-Upload插件

  • 2017年07月05日 16:01
  • 105KB
  • 下载

Yii2 framework学习笔记(八) -- 整合blueimp的jquery-file-upload插件

jquery-file-upload(http://blueimp.github.io/jQuery-File-Upload/)是一个优秀的文件ajax上传插件,支持多选,预览,并发上传等。 jq...
  • iyak85
  • iyak85
  • 2016年02月26日 17:47
  • 1588

jQuery File Upload-jQuery上传插件

插件描述:jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。 ...

Jquery file upload Mvc4.0实例

  • 2014年07月07日 15:24
  • 16.53MB
  • 下载

jQuery-File-Upload图片上传组件简要使用指南(挥泪共享)

这个jquery组件能够同时可以多个图片同时上传,预览~ http://blueimp.github.io/jQuery-File-Upload/ 其实有时候,我们遇到的问题并不是说找不到这样或那...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery-file-upload插件的使用(小实例)
举报原因:
原因补充:

(最多只允许输入30个字)