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

©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. .NET CORE(C#) WPF 抽屉式菜单

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF 抽屉式菜单 阅读导航 本文背景 代码实现 本文参考 源码 ...

  2. 使用BeanUtils.populate将map集合封装为bean对象

    1.前言 最近在做一个javaweb项目练练手,涉及到把jsp页面中表单的内容存到数据库,和request.getParameterMap配合使用可以将jsp页面表单的数据转化为bean对象. 2.介 ...

  3. Are You Ready……Go?

    Are You Ready……Go? 2019-11-01 12:03:10 Problem 你……到底有没有想好要干什么? 又是期中考试,又是CSP,怎么抉择? 未来太渺茫? 我不知道我到底想要什么 ...

  4. centos yum 安装jdk1.7

    安装: yum -y install java-1.7.0-openjdk-devel.x86_64 环境变量: vi /etc/profile export JAVA_HOME=/usr/lib/j ...

  5. Android实战项目——家庭记账本(五)

    今天博客写的有点晚(好像算是昨天的了),有一点小bug刚刚改完.今天完成的任务有: 1.统计页的布局和功能 2.主页碎片的图表功能 实现效果如下:                      其中,统计 ...

  6. sql server通过临时存储过程实现使用参数添加文件组脚本复用

    create procedure #pr_CreateFileGroup @dbname nvarchar(max), @filegroupname nvarchar(max) as begin /* ...

  7. nginx 反向代理及 https 证书配置

    nginx 反向代理及 https 证书配置 author: yunqimg(ccxtcxx0) 1. 编译安装nginx 从官网下载 nginx源码, 并编译安装. ./configure --pr ...

  8. 【Flutter】环境搭建以及HelloWorld创建

    平台:WIndows10 Android Studio VScode同理,具体可以参考Flutter中文站 配置环境 1.下载SDK,进入官网选择最新的即可.我这里选择的是v1.9.1+hotfix. ...

  9. adworld python-trade | python反编译

    附件是.pyc格式的文件. Python程序中,原始程序代码存储在.py文件里,而Python会在执行.py文件的时候,会将.py形式的程序编译成中间式文件(byte-compiled)的.pyc文件 ...

  10. 数据结构(集合)学习之Map(一)

    集合 框架关系图: 补充:HashTable父类是Dictionary,不是AbstractMap. Map: Map(接口)和Collection都属于集合,但是Map不是Collection的子类 ...