jQuery Plupload上传插件的使用方法详解

本文主要介绍了 jquery plupload上传插件的使用详解,需要的朋友可以参考下,希望能帮助到大家。

jQuery Plupload上传插件的使用方法详解 首先下载plupload->http://www.plupload.com

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

jQuery Plupload上传插件的使用方法详解

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

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

 直接上代码

  

Your browser doesn't have Flash, Silverlight or HTML5 support.

$(function(){ $("#uploader").plupload({ runtimes: 'html5,flash,silverlight,html4',//这里可以不写,plupload默认支持 url: "UploadPhotoServlet",//上传后台请求路径 max_file_size: '1000mb',//用来限制单个文件大小的 multi_selection: true,//默认支持多文件上传,false不支持 chunk_size: '0',//是否将上传文件进行分片,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: 'thumbs' }, /* flash 和 xap 上传需要的文件 */ flash_swf_url : 'plupload/js/Moxie.swf', silverlight_xap_url : 'plupload/js/Moxie.xap' }); })

登录后复制

在官方文档有这样一句话

jQuery Plupload上传插件的使用方法详解

 也就是说,UI.Plupload 需要jquery-ui的支持,http://jqueryui.com/download/ 选择合适的主题,我选的是这个

jQuery Plupload上传插件的使用方法详解

完整的 引入文件是

                  plupload

登录后复制

jQuery Plupload上传插件的使用方法详解

常见问题:

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

filters: {mime_types : [ //只允许上传图片和zip文件{ title : "Image files", extensions : "jpg,gif,png" },{ title : "Zip files", extensions : "zip" }],max_file_size : '400kb', //最大只能上传400kb的文件prevent_duplicates : true //不允许选取重复文件}

登录后复制

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

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

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

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

jQuery Plupload上传插件的使用方法详解

需要额外设置两个参数

file_data_name:"uploadFile",//指定文件上传时文件域的名称,默认为file,例如在php中你可以使用$_FILES['file']来获取上传的文件信息/* 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的使用,plupload中文参考文档 http://www.phpin.net/tools/plupload/,

这个文档仅仅介绍了Plupload基本的options,一些UI高级用法需要参考,

http://www.plupload.com/docs/v2/UI.Plupload#Constructor-method

相关推荐:

jquery ajaxfileupload异步上传插件详解

ThinkPHP5.0实现图片上传插件实例分享

jQuery上传插件webupload使用方法详解

以上就是jQuery Plupload上传插件的使用方法详解的详细内容,更多请关注【创想鸟】其它相关文章!

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

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2791078.html

(0)
上一篇 2025年3月8日 19:05:30
下一篇 2025年2月23日 08:55:36

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • jQuery加密cookie的实现方法

    本文主要和大家分享了jquery 加密密码到cookie的实现方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧,希望能帮助大家更好的掌握cookie。 废话不多说了,直接给大家贴代码了,具体代码如下所示:  nbsp;html>I…

    编程技术 2025年3月8日
    200
  • 为Jquery EasyUI 组件加上清除功能实例分享

    本文主要为大家带来一篇为jquery easyui 组件加上清除功能的方法(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 1、背景 在使用 EasyUI 各表单组件时,尤其是使用 …

    2025年3月8日
    200
  • 为JQuery EasyUI 表单组件增加焦点切换功能实例分享

    本文主要为大家带来一篇为jquery easyui 表单组件增加焦点切换功能的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 1、背景说明     在使用 JQuery  EasyUI…

    2025年3月8日
    200
  • jQuery实现checkbox方法

    本文主要介绍了jquery实现checkbox的简单操作,对复选框组的全选、全不选、不全选,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 对复选框组的全选、全不选、不全选,获取选中的复选框的值的操作 1.点击全选按钮…

    编程技术 2025年3月8日
    200
  • jQuery滚动效果的实现方法

    本文主要为大家详细介绍了jquery实现滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 1. 图片轮播: 原理如下: 假设有三张图片,三张图片实际上都是存在于页面上的,但是由于设置的可视部分的大小(这里主要考…

    2025年3月8日
    200
  • bootstrap轮播模板使用方法(实例代码)

    本文主要介绍了bootstrap轮播模板的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 本文实例为大家分享了bootstrap轮播模板展示的具体代码,供大家参考,具体内容如下 【相关视频推荐:Bootstr…

    编程技术 2025年3月8日
    200
  • Bootstrap table使用方法小结分享

    本文主要为大家总结了bootstrap table简单使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 【相关视频推荐:Bootstrap教程】 bootstrap-table是在bootstrap-table…

    编程技术 2025年3月8日
    200
  • jQuery实现定位导航位置详解

    本文主要为大家详细介绍了基于jquery实现定位导航位置效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 当滚动条滚动到内容区域的时候,侧边导航条定位到屏幕,不再动,并且点击导航条跳转到内容所在的位置; nbsp;…

    编程技术 2025年3月8日
    200
  • nodejs最新版安装npm的使用方法分享

    本文主要介绍了nodejs 最新版安装npm 的使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 # 安装 nodejs 以下介绍的是命令行安装方法,读者也可以到nodejs官网 上下…

    2025年3月8日
    200
  • bootstrap paginator分页插件使用方法

    bootstrap paginator是一款基于bootstrap的js分页插件,本文主要给大家介绍bootstrap paginator分页插件的两种使用方式,一起看看吧,希望能帮助到大家。 【相关视频推荐:Bootstrap教程】 分页…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论