首页 > web前端 > js教程 > 对jQuery Plupload上传插件的基本介绍

对jQuery Plupload上传插件的基本介绍

零下一度
发布: 2017-05-02 10:42:08
原创
1307 人浏览过

这篇文章主要介绍了 jQuery Plupload上传插件的使用详解,需要的朋友可以参考下

因为Plupload可配置参数比较多,所以这里讲解最常用的,结合jquery-ui展示的界面!如下:

Plupload默认支持html5,flash,silverlight,html4,四种上传方式,按照顺序进行加载,如果浏览器不支持html5则会选择flash...到最后html4,

如果不需要某种上传方式,在配置里面不写即可!

 直接上代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<body>

  <p id="uploader">

    <p>Your browser doesn&#39;t have Flash, Silverlight or HTML5 support.</p>

  </p>

  <script type="text/javascript">

  $(function(){

    $("#uploader").plupload({

      runtimes: &#39;html5,flash,silverlight,html4&#39;,//这里可以不写,plupload默认支持

      url: "UploadPhotoServlet",//上传后台请求路径

      max_file_size: &#39;1000mb&#39;,//用来限制单个文件大小的

      multi_selection: true,//默认支持多文件上传,false不支持

      chunk_size: &#39;0&#39;,//是否将上传文件进行分片,0代表是不分

      /*resize配置是对图片的处理

        可以使用该参数对将要上传的图片进行压缩,该参数是一个对象,里面包括5个属性:width:指定压缩后图片的宽度,如果没有设置该属性则默认为原始图片的宽度

        height:指定压缩后图片的高度,如果没有设置该属性则默认为原始图片的高度

        crop:是否裁剪图片

        quality:压缩后图片的质量,只对jpg格式的图片有效,默认为90。quality可以跟width和height一起使用,但也可以单独使用,单独使用时,压缩后图片的宽高不会变化,但由于质量降低了,所以体积也会变小

        preserve_headers:压缩后是否保留图片的元数据,true为保留,false为不保留,默认为true。删除图片的元数据能使图片的体积减小一点点

        resize参数的配置示例如下:

      */

      /* resize : {

        width: 200,

        height: 200,

        quality: 90,

        crop: true

      }, */

      /* rename: true, *///允许多队列文件进行重命名

      /* sortable: true,*/ //启用队列中的文件排序功能,更改上传优先级

      /*dragdrop: true, */ //开启拖拽上传,默认true

      /*

        下面是展示右边的缩略图和列表 两个功能

        默认显示缩略图

      */

      views: {

        list: true,

        thumbs: true, // Show thumbs

        active: &#39;thumbs&#39;

      },

      /*

        flash 和 xap 上传需要的文件

      */

      flash_swf_url : &#39;plupload/js/Moxie.swf&#39;,

      silverlight_xap_url : &#39;plupload/js/Moxie.xap&#39;

    });

  })

</script>

</body>

登录后复制

在官方文档有这样一句话

也就是说,UI.Plupload 需要jquery-ui的支持,我选的是这个

完整的 引入文件是

1

2

3

4

5

6

7

8

9

10

11

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <script type="text/javascript" src="plupload/js/jquery.js"></script>

  <script type="text/javascript" src="plupload/js/jqueryui/jquery-ui.min.js"></script>

  <link rel="stylesheet" href="plupload/js/jqueryui/jquery-ui.min.css" rel="external nofollow" />

  <script type="text/javascript" src="plupload/js/plupload.full.min.js"></script>

  <script type="text/javascript" src="plupload/js/jquery.ui.plupload/jquery.ui.plupload.min.js"></script>

  <script type="text/javascript" src="plupload/js/i18n/zh_CN.js"></script>

  <link rel="stylesheet" type="text/css" href="plupload/js/jquery.ui.plupload/css/jquery.ui.plupload.css" rel="external nofollow" />

  <title>plupload</title>

</head>

登录后复制

常见问题:

1、如果你发现点击 选择文件 按钮,弹出文件框特别慢,那么将,过滤文件代码去掉即可!根据具体情况,自己设置

1

2

3

4

5

6

7

8

filters: {

mime_types : [ //只允许上传图片和zip文件

{ title : "Image files", extensions : "jpg,gif,png" },

{ title : "Zip files", extensions : "zip" }

],

max_file_size : &#39;400kb&#39;, //最大只能上传400kb的文件

prevent_duplicates : true //不允许选取重复文件

}

登录后复制

可以使用该参数来限制上传文件的类型,大小等,该参数以对象的形式传入,它包括三个属性:mime_types:用来限定上传文件的类型,为一个数组,该数组的每个元素又是一个对象,该对象有title和extensions两个属性,title为该过滤器的名称,extensions为文件扩展名,有多个时用逗号隔开。该属性默认为一个空数组,即不做限制。

max_file_size:用来限定上传文件的大小,如果文件体积超过了该值,则不能被选取。值可以为一个数字,单位为b,也可以是一个字符串,由数字和单位组成,如'200kb'

prevent_duplicates:是否允许选取重复的文件,为true时表示不允许,为false时表示允许,默认为false。如果两个文件的文件名和大小都相同,则会被认为是重复的文件

2、如果后台使用是的是文件域名称接收文件,并且附加有额外参数

需要额外设置两个参数

1

2

3

4

5

6

7

8

9

10

file_data_name:"uploadFile",//指定文件上传时文件域的名称,默认为file,例如在php中你可以使用$_FILES[&#39;file&#39;]来获取上传的文件信息

/* resize : {

  width: 200,

  height: 200,

  quality: 90,

  crop: true // crop to exact dimensions

}, */

multipart_params:{//上传时的附加参数,以键/值对的形式传入,服务器端可是使用$_POST来获取这些参数(以php为例)

 "prefixName":"magazine"

},

登录后复制

3、在和easyui,extjs等UI库进行整合时候,引入Plupload的文件一定要在easyui的引入文件之前,否则easyui会出现一些莫名奇妙的错误!

ok,到这里基本完成Plupload的使用。

以上是对jQuery Plupload上传插件的基本介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板