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;
    }

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

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

java版-JQuery上传插件Uploadify使用实例

运行效果: 包结构图:   后台JAVA逻辑: Java代码   package com.bijian.study;      import ...
  • huangshengzhi
  • huangshengzhi
  • 2014年04月24日 13:56
  • 2133

jQuery-File-Upload 使用笔记(一) 基础插件配置

公司项目有需要用到文件的异步上传功能,最终决定使用jQuery-File-Upload这个插件来完成功能。   插件下载地址: https://github.com/blueimp/jQuery...
  • coder_on_way
  • coder_on_way
  • 2015年11月30日 22:28
  • 4851

图片懒加载插件lazyload的使用示例

test * {margin: 0; padding: 0;} body,html {width: 100%; height: 100%;} .conta...
  • u011500781
  • u011500781
  • 2016年03月27日 22:26
  • 2543

JQuery-File-Upload插件备忘

JQuery-File-Upload插件备忘
  • lianjunzongsiling
  • lianjunzongsiling
  • 2017年09月08日 21:20
  • 148

jQuery-File-Upload 文件上传插件

jQuery文件上传插件 演示 演示文件上传 引用 原文 描述 文件上传小部件与多个文件选择,拖放支持,进度条,验证和预览图像,音频和视频的jQuery。 支持跨域,分块和可...
  • shanghongshen
  • shanghongshen
  • 2017年03月08日 09:46
  • 1280

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
  • 1771

微信小程序图表插件(wx-charts)

微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个。  ...
  • yelin042
  • yelin042
  • 2017年06月07日 15:35
  • 2521

Java学习开始之旅(eclipse的SVN插件和乌龟SVN的下载使用)

TortoiseSVN (乌龟SVN)是 Subversion 版本控制系统的一个免费开源客户端,可以超越时间的管理文件和目录。文件保存在中央版本库,除了能记住文件和目录的每次修改以外,版本库非常像普...
  • feiyangtianyao
  • feiyangtianyao
  • 2015年08月05日 16:13
  • 1661

jquery-file-upload

下面介绍 用插件实现图片异步上传的代码。  1   比要的js一个都不能少,他们之间是有依赖关系的。  jquery-1.8.2.min.js  jquery.ui.core.js  jquer...
  • zp_love666
  • zp_love666
  • 2017年07月25日 09:25
  • 317

android 桌面小部件实例

1、通过扩展系统类AppWidgetProvider来实现,
  • shuanghe
  • shuanghe
  • 2014年07月17日 16:11
  • 5327
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery-file-upload插件的使用(小实例)
举报原因:
原因补充:

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