jquery-uploadfile的使用「建议收藏」

jquery-uploadfile的使用「建议收藏」jQueryFileUpload是一个Jquery文件上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。官网链接:点击打开链接特点:拖放支持;上传进度条;图像预览;可定制和可扩展的;兼容任何服务器端应用平台(PHP,Python,RubyonRails,Java,Node.js,Goetc.)。使用方…

大家好,又见面了,我是你们的朋友全栈君。

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

官网链接:

点击打开链接

特点:拖放支持;上传进度条;图像预览;可定制和可扩展的;兼容任何服务器端应用平台(PHP, Python, Ruby on Rails, Java, Node.js, Go etc.)。

使用方法:

1. 需要加载的js文件:

<script src="/static/js/vendor/jquery.ui.widget.js"></script>
<script src="/static/js/vendor/jquery.iframe-transport.js"></script>
<script src="/static/js/vendor/jquery.fileupload.js"></script>
<script src="/static/js/vendor/jquery.fileupload-process.js"></script>
<script src="/static/js/vendor/jquery.fileupload-validate.js"></script>
<script src="/static/js/vue-components/ft.attach.js"></script>

2. html代码:

<div style=”padding:10px 5px;”>

                        <input type=”hidden” id=”jyid” value=”${(jy.id)!”}”>

<input type=”file” name=”file” id=”upload” multiple>
<div id=”progress”>(此处为上传进度条)
   <div class=”bar” style=”width: 0%;height: 4px;background: green;”></div>
</div>

<div class=”profile-info-row” id=”tblist”>

</div>

3. js代码:

$(“upload“).fileupload({

url: ‘upload’,
type: ‘POST’,
maxNumberOfFiles: 10,//最大上传文件数目
maxFileSize: 100000000,//文件不超过100M
dataType: ‘json’,//期望从服务器得到json类型的返回数据
sequentialUploads: true,//是否队列上传
   progressall: function (e, data) {

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

tips(“上传成功”,’success’);
           loadTb();
},
   processfail: function (e, data) { //失败
       tips(‘出错’,’error’);
   }

});  

//文件上传前触发事件
   uploader.bind(‘fileuploadsubmit’, function (e, data) {

       data.formData = { jyid: $(“#jyid”).val() }; //如果需要额外添加参数可以在这里添加 

   });


4.API

4.1 Initialization:

在上传按钮上调用fileupload()方法;

示例:

$('#fileupload').fileupload();

4.2 Options :

1: url:请求发送的目标url

Type: string

Example: ‘/path/to/upload/handler.json’

2.Type: 文件上传HTTP请求方式,可以选择“POST”,“PUT”或者”PATCH”,

默认”POST”

Type: string

Example: ‘PUT’

3. dataType:希望从服务器返回的数据类型,默认”json”

Type: string

Example: ‘json’

4. autoUpload:默认情况下,只要用户点击了开始按钮被添加至组件的文件会立即上传。将autoUpload值设为true可以自动上传。

Type: boolean

Default: true

5. acceptFileTypes:允许上传的的文件类型

Example: /(\.|\/)(gif|jpe?g|png|xlsx)$/i

6. maxFileSize: 最大上传文件大小

Example: 999000 (999KB) //单位:B

7. minFileSize:最小上传文件大小

Example: 100000 (100KB) //单位:B

8.previewMaxWidth : 图片预览区域最大宽度

Example: 100 //单位:px

4.3 Callback Options:

使用方法一:函数属性

实例:

?
1
2
3
4
5
6
7
8
9
10
11
12
$(
'#fileupload'
).fileupload({
  drop:
function
(e, data) {
  $.each(data.files,
function
(index, file) {
  alert(
'Dropped file: '
+ file.name);
  });
  },
  change:
function
(e, data) {
  $.each(data.files,
function
(index, file) {
  alert(
'Selected file: '
+ file.name);
  });
  }
  });

使用方法二:绑定事件监听函数

  实例:

?
1
2
3
$(
'#fileupload'
)
    .bind(
'fileuploaddrop'
,
function
(e, data) {

/* ... */
})
    .bind(
'fileuploadchange'
,
function
(e, data) {

/* ... */
});

每个事件名称都添加前缀:”fileupload”;

注意推荐使用第二种方法。

常用的回调函数:

1. add: 当文件被添加到上传组件时被触发

?
1
$(
'#fileupload'
).bind(
'fileuploadadd'
,
function
(e, data) {

/* ... */
});

或者$(‘#fileupload’).on(‘fileuploadadd’, function (e, data) {/* … */});

2. processalways: 当一个单独的文件处理队列结束(完成或失败时)触发

3. progressall: 全局上传处理事件的回调函数

Example:

?
1
2
3
4
5
6
7
$(
'#fileupload'
).on(
'fileuploadprogressall'
,
function
(e, data) {
//进度条显示
var
progress = parseInt(data.loaded / data.total * 100, 10);
$(
'#progress .progress-bar'
).css(
'width'
,
progress +
'%'
);
});

4. fail : 上传请求失败时触发的回调函数,如果服务器返回一个带有error属性的json响应这个函数将不会被触发。

5. done : 上传请求成功时触发的回调函数,如果服务器返回一个带有error属性的json响应这个函数也会被触发。

6. always : 上传请求结束时(成功,错误或者中止)都会被触发。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/148343.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 做了6年的Java,java简历包装项目经验[通俗易懂]

    高频问题1.上一家公司,你为什么会离职?公司很好,但是公司调整了业务,接下来的发展路线和自己的目标不一致,所以要换工作工作太清闲,学不到知识,我不怕累,就是想多锻炼自己,想找具有挑战力工作公司的管理制度不也是很完善,没有晋升机会,我比较想进步,找一个更好的平台我想去优秀的公司,让自己变得更好2.为什么来我们这里?对原单位充满感恩,这是我人生中非常重要的经历,我认同原单位领导和文化两份工作的本质是一致的,行业和工作性质都有紧密联系选择一份新的工作不代表背叛过去,发扬原公司魅力,同时为了

  • java虚拟机内存分配_深入理解java虚拟机第二版

    java虚拟机内存分配_深入理解java虚拟机第二版深入理解Java虚拟机之对象的内存布局、访问定位

  • Python建立数据库

    Python建立数据库Python建立数据库所谓数据库,即存储数据的仓库。每一个数据库可以存放若干个数据表,这里的数据表就是我们通常所说的二维表,分为行和列,每一行称为一条记录,每一列称为一个字段。表中的列是固定的,可变的是行。要注意,我们通常在列中指定数据的类型,在行中添加数据,即我们每次添加一条记录,就添加一行,而不是添加一列。对数据库的操作可以概括为就是向数据库中添加、删除、修改和查询数据,其中查询功能最为复杂。检查数据库是否存在你可以通过使用“SHOWDATABASES”语句列出系统中所有数据库,检查数据库是否存

  • ps磨皮滤镜插件Portraiture 3

    ps磨皮滤镜插件Portraiture 3Photoshop必备滤镜插件,Portraiture3formac(ps磨皮滤镜插件)是一款支持自动皮肤平滑、愈合和增强效果的磨皮插件,portraiture3主要针对人像进行皮肤修饰、磨皮润色等处理,还可以平滑和去除缺陷,同时保留皮肤纹理和重要的人像细节,功能十分强大,安装即为激活成功教程版。ps磨皮滤镜插件特色介绍Photoshop的画像消除了选择性蒙版和逐像素处理的繁琐的手工劳动,以帮助您在肖像修饰中实现卓越。Imagenomic发布了Photoshop的磨皮滤镜Portraiture

  • 十进制小数转化为二进制小数[通俗易懂]

    十进制小数转化为二进制小数[通俗易懂]一、二进制数转换成十进制数由二进制数转换成十进制数的基本做法是,把二进制数首先写成加权系数展开式,然后按十进制加法规则求和。这种做法称为”按权相加”法。例如把二进制数110.11转换成十进制数。二、十进制数转换为二进制数十进制数转换为二进制数时,由于整数和小数的转换方法不同,所以先将十进制数的整数部分和小数部分分别转换后,再加以合并。1.十进制整数转换为二进制整数十进制整数转换为二进制整数采用”除2取余,逆序排列”法。具体做法是:用2去除十进制整数,可以得到一个商和余数;再

  • mysql修复表的三个方法

    mysql修复表的三个方法

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号