jQuery File Upload-jQuery上传插件

所属分类:输入-上传

 1115455  488  查看评论 (122)
jQuery File Upload-jQuery上传插件 ie兼容6

下载文件更新时间:2016-08-19(修改官网调用地址不能访问问题)

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

jQuery File Upload有多个文件选择,拖放上传控件拖放支持,进度条,验证和预览图像,音频和视频 。

支持跨域,分块和可恢复的文件上传和客户端图像大小调整。适用于任何服务器端平台(PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) ,支持标准的HTML表单文件上传。

产品特点

多文件上传:

允许选择多个文件一次,并将其上传同时进行。

  • 拖放支持:

  • 可以从您的桌面或文件管理器中拖放他们在您的浏览器窗口中上传文件。

  • 上传进度条:

  • 显示一个进度条显示为单独的文件和所有上传组合上传进度。

  • 可取消上传:

  • 单个文件上传可以取消来停止上传进度。

  • 可恢复上传:

  • 中止的上传可以与浏览器支持的Blob API进行恢复。

  • 分块上传:

  • 大文件可以上传较小的块与浏览器支持的Blob的API 。

  • 客户端图像大小调整:

  • 图像可以自动调整大小的客户端与浏览器支持所需的JS API的。

  • 预览图像,音频和视频:

  • 图像,音频和视频文件的预览可以与浏览器支持所需的API上传前显示。

  • 没有浏览器插件(例如使用Adobe的Flash )要求:

  • 该实现是基于开放的标准,如HTML5和JavaScript的,不需要额外的浏览器插件。

  • 优美的后备旧版的浏览器:

  • 如果支持的话,使用内置页框作为后备旧版浏览器通过的XMLHttpRequest上传文件。

  • HTML文件上传表单回退:

  • 通过使用标准的HTML文件上传表单的控件元素允许渐进增强。

  • 跨站点的文件上传:

  • 支持上传文件到不同的域与跨站点的XMLHttpRequest或iframe重定向。

  • 多个插件实例:

  • 允许使用在同一个网页上的多个插件实例。

  • 可定制和可扩展的:

  • 提供了一个API来设置各个选项,并定义回调方法的各种载事件。

  • 多重和文件内容流上传:

  • 文件可以被上传为标准的“多部分/窗体的数据”或文件内容流( HTTP PUT文件上传) 。

  • 兼容任何服务器端应用平台:

  • 适用于任何服务器端平台(PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) ,支持标准的HTML表单文件上传。

用法

下载压缩包,解压到网站就可用(与demo)一样(PHP环境)。

最小化安装向导(适用于需要自己定义界面元素的童鞋):

需要一个input元素:<input id="fileupload" type="file" name="file[]" multiple>

需要加载的js文件有:

  • jquey-1.8.3.min.js

  • jquery-ui-widget.js

  • jquery.iframe-transport.js

  • jquery.fileupload.js

代码例子(摘自官方):

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>
</body> 
</html>

最小安装如何显示上传进度条:

插件支持显示每个文件的上传进度(progress)显示和所有文件的总体上传进度(progressall)显示:

$('#fileupload').fileupload({
    /* ... */
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    }
});

需要一个<div>容器用来显示进:

<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>

需要给进度条不同颜色显示才行,可以通过CSS来设置:

.bar {
    height: 18px;
    background: green;
}

将要上传的文件名显示在一个元素节点上:

你可以经常要将上传的文件显示到特定的元素上,这个可以通过add回调函数来实现:

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

如何通过点击按钮来开始上传:

在上例基础上,可以通过按钮点击事件来触发上传(上例是自动上传):

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<button/>').text('Upload')
                .appendTo(document.body)
                .click(function () {
                    $(this).replaceWith($('<p/>').text('Uploading...'));
                    data.submit();
                });
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});
相关插件-上传

图片上传插件zyupload java版实例代码

本插件经本人多次修改完善,功能齐全,支持多图片上传、拖拽上传、剪辑、编辑,上传预览,编辑获取默认值等功能,并且每一个功能对应一个demo,简单易懂,方便学习修改
  上传
 64859  409

上传图片-可裁剪

上传图片可裁剪
  上传
 62683  86

多图片上传预览(纯前端)

多图片上传预览,已测试ie 360 火狐 谷歌浏览器
  上传
 173115  276

jQuery h5拖拽多文件上传

可用input控件选择文件,也可以拖拽文件,可以一次上传多个文件,测试需要后台配合,支持失败重传,支持过滤文件类型,文件大小,及同一文件重复上传。
  上传
 28273  134

讨论这个项目(122)回答他人问题或分享插件使用方法奖励jQ币

    Spongebobo 0
    2018/1/24 14:27:15

    可以上传各种文件类型的文件吗?例如 .pcd 文件

    回复
    在真转在真转 0
    2018/1/20 23:03:18

    想知道这个下完之后要怎么用,哪个大神给指导下

    回复
    sunshine. 0
    2018/1/18 14:56:02
    音频可以上传吗 回复
    克斯密达 0
    2018/1/15 18:03:37

    mac系统下上传图片会把图片服务器传回的图片路径看成图片的名字,如果我把图片上传到upload/product/xxx.jpg ;到我这图片的名字就成了upload/product/xxx.jpg 而且在根目录下

    回复
    ldl1993 0
    2017/12/28 10:57:52

    你好请问如何实现上传的暂停和继续上传功能呢?

    回复
      0
    2017/12/27 15:24:26
    骑着蜗牛去旅行 0
    2017/12/16 12:51:34

    楼主怎么限制上传图片的大小,上传图片大小超过3M,给出提示信息超出3M(不要发请求给后台,前台直接弹框)。

        骑着蜗牛去旅行0
        2017/12/16 12:57:11
        求解答,给报酬的哦
    回复
    独木桥自横 0
    2017/12/14 16:48:16

    哪位大神给个完整java的例子吧  菜鸟看不懂啊 谢谢啊 qq787619698

    回复
    Bboy 0
    2017/12/4 18:10:26

    ie 7  8点击没反应   求大神指导

    回复
    远征军 0
    2017/11/27 15:25:12

    大家好~这是实例,上传如果发现报错,可能找不到保存的路径,需要你去建个文件用来保存

      $('#fileupload').fileupload({
          dataType: 'json',
          // 文件上传完成后,执行的回调函数
          done: function (e, data) {
            console.log(data.result)
            console.log(data.result.picAddr)
            // 将图片赋给展示出来 fileuploadPic img
            $('.fileuploadPic img').attr('src',data.result.picAddr);
            // 将图片信息赋给 隐藏的 input 框
            $('#brandLogo').val(data.result.picAddr)
          }
        });
        钓鱼网站0
        2018/1/5 20:50:45

        是用java写的吗

    回复
取消回复