================================

©Copyright 蕃薯耀 2020-01-10

https://www.cnblogs.com/fanshuyao/

一、官网地址：

https://github.com/blueimp/jQuery-File-Upload

二、使用文档（参数说明）

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

三、浏览器支持（官网说明）

  • Google Chrome
  • Apple Safari 4.0+
  • Mozilla Firefox 3.0+
  • Opera 11.0+
  • Microsoft Internet Explorer 6.0+

四、jQuery-File-Upload 入门使用

1、最简单的使用方法：

<!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.9.1/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>

如果不使用iframe，jquery.iframe-transport.js文件可以不引用。

2、自定义使用

不显示文件选择框，只显示上传按钮

<a id="btnUploadMdbFile" href="javascript:;" class="plui-linkbutton" >上传mdb文件</a> 

<div style="display: none;">

    <input id="inputUploadMdbFile" type="file" name="mdbFiles" />

</div>

控件初始化：

$(function(){

    $("#btnUploadMdbFile").click(function(){

        $("#inputUploadMdbFile").click();

    });

    //multiple 多选

    //input限制文件上传可以使用（IE9+）： accept="application/msaccess" accept="image/*"

    $("#inputUploadMdbFile").fileupload({

        url : "${pageContext.request.contextPath}/xxx/fileUploadAction.go?method=fileUpload",

        dataType: "json",

        //autoUpload: false,

        formData: {

            "dirPath" : "temp_dir/mdb/"

        },

        add: function(e, data){

            //var acceptFileTypes = /^(gif|jpe?g|png)$/i;

            var acceptFileTypes = /^mdb$/i;

            var files = data.originalFiles;

            if(files && files.length > 0){

                var isPass = true;

                for(var i=0; i<files.length; i++){

                    var name = files[i]["name"];

                    var lastIndex = name.lastIndexOf(".");

                    if(lastIndex < 0){

                        isPass = false;

                        break;

                    }else{

                        var fileType = name.substring(lastIndex + 1);

                        if(!acceptFileTypes.test(fileType)){

                            isPass = false;

                            break;

                        }

                    }

                }

                if(!isPass){

                    top.$.messager.alert("系统提示","只能上传*.mdb文件","info");

                    return;

                }

                data.submit();

            }

        },

        done: function(e, data){

            //alert($.toJSON(data.result));

            if(data.result && data.result.files && data.result.files.length > 0){

                var file = data.result.files[0];

                if(file.suffix == ".mdb"){

                    dealMdbFile(file.absolutePath);

                }else{

                    top.$.messager.alert("系统提示","只能上传*.mdb文件","info");

                }

            }

        }

    });

});

formData：可以传递自己的参数。

add: function(e, data){}：增加控制文件的类型限制，这个可以省略。

done: function(e, data){}：上传成功后结果返回处理。

更多参数设置见：

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

（如果你觉得文章对你有帮助，欢迎捐赠，^_^，谢谢！）

================================

©Copyright 蕃薯耀 2020-01-10

https://www.cnblogs.com/fanshuyao/

jQuery-File-Upload 使用，jQuery-File-Upload上传插件的更多相关文章

  1. Bootstrap文件上传插件File Input的使用

    基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...

  2. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  3. JQuery文件上传插件JQuery.upload.js的用法简介

    JQuery文件上传插件,这个插件很小,用法很简单,效果却很棒.注意:JQuery版本要求1.8及以上,大家执行如果没效果,则检查JQuery版本,如果是1.8及以上,则该插件源码中的.size()需 ...

  4. 可拖拽和带预览图的jQuery文件上传插件ssi-uploader

    插件描述:ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非 ...

  5. Jquery自定义图片上传插件

    1 概述 编写后台网站程序大多数用到文件上传,可是传统的文件上传控件不是外观不够优雅,就是性能不太好看,翻阅众多文件上传控件的文章,发现可以这样去定义一个文件上传控件,实现的文件上传的效果图如下: 2 ...

  6. 关于Plupload结合上传插件jquery.plupload.queue的使用

    之前使用过很多的上传组件,但对各种浏览器的兼容性太差,不得不放弃!! plupload 是款很强大的上传组件,不得不推荐.plupload 前端根据浏览器不同选择使用Html5. Gears, Sil ...

  7. jQuery上传插件Uploadify使用帮助

    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP, ...

  8. JQuery上传插件uploadify优化

    旧版的uploadify是基于flash上传的,但是总有那么些问题,让我们用的不是很舒服.今天主要分享下在项目中用uploadify遇到的一些问题,以及优化处理 官方下载 官方文档 官方演示 下面是官 ...

  9. 基于jQuery很牛X的批量上传插件

    上传功能应该是每个网站必备的工具之一,因此出现了出现了很多各式各样的上传插件! 本文基于个人经验和使用从插件的:交互体验,易用性,文档,美观度出发,为大家推荐三款很NX的批量上传插件! 下面三款插件的 ...

  10. jsp+servlet+jquery 用jquery uploadify最新版本实现多文件上传

    //这是script代码 <link rel="stylesheet" type="text/css" href="uploadify/uplo ...

随机推荐

  1. 从零开始一个个人博客 by asp.net core and angular（三)

    这是第三篇了,第一篇只是介绍,第二篇介绍了api项目的运行和启动,如果api项目没什么问题了,调试都正常了,那基本上就没什么事了,由于这一篇是讲前端项目的,所以需要运行angular项目了,由于前端项 ...

  2. Kong Gateway - 11 基于网关服务的ACL访问控制列表 黑名单

    Kong Gateway - 11 基于网关服务的ACL访问控制列表 黑名单 同一服务名称 book 不允许即创建白名单访问控制列表又创建黑名单访问控制列表 启用服务的白名单&黑名单配置文件时 ...

  3. 使用iframe实现导航栏在上面，下面的窗体刷新

    1.做一个导航栏,并设置跳转链接的<a>标签的name属性或id 此处演示name标签 <!-- 导航条 --> <nav id="navAjax" ...

  4. Oracle查询如何才能行转列？-sunziren

    原创文章,转载务必注明出处. 今天工作的时候,碰到一个问题,涉及oracle行转列,用了半小时解决,因此在这里写个博客记录一下解决办法. 原数据库表的数据是: 想要达到的效果是: 经过思考,这是一个o ...

  5. bzoj3162独钓寒江雪

    题意 \(n\)阶树,求本质不同的独立集个数 做法 重新编号后重心是不变的,如果有两个重心,可以加个虚点 用树哈希判子树有多少个相同的子树,设某种有\(k\)个,如果原本方案数为\(x\)个 则方案数 ...

  6. 当页面提交时，执行相关JS函数检查输入是否合法

    当页面提交时,执行相关JS函数检查输入是否合法 关键代码 <form action="tj.php" method="post" onSubmit=&qu ...

  7. Android实战项目——家庭记账本（二）

    今天主要是对昨天做的添加账单信息的功能做了完善,实现了数据库的相关操作,如图是对已添加的账单信息的总结显示. 目前实现了通过日期进行汇总的功能,如上图中的各项item就是通过对所有账单信息进行按日期汇 ...

  8. P1478 陶陶摘苹果（升级版）（sort()，时间优化，priority_queue）

    题目描述 又是一年秋季时,陶陶家的苹果树结了 n 个果子.陶陶又跑去摘苹果,这次他有一个 a 公分的椅子.当他手够不着时,他会站到椅子上再试试. 这次与 NOIp2005 普及组第一题不同的是:陶陶之 ...

  9. nunjucks模板设计一个页面

    使用nunjucks代替原来的ejs,因为这个更强大,是node中主流的模板引擎 nunjucks官网 配置使用 nunjucks 模板引擎 nunjucks 模板引擎没有对模板文件名的后缀名做特定限 ...

  10. Yarn报错：Exception message: /bin/bash: line 0: fg: no job control

    Exception message: /bin/bash: line 0: fg: no job control 这个错误是 本地idea跨平台远程调试hadoop集群出现的,在使用windows调用 ...