webuploader多图片上传php,PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件...
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程)
使用WebUploader还可以批量上传文件、支持缩略图等等众多参数选项可设置,以及多个事件方法可调用,你可以随心所欲的定制你要的上传组件。
使用:
1、导入Css样式文件:
2、定义html:
多图上传
0%
1、准备一个按钮#filePicker
2、准备一个用来存放添加的文件信息列表的容器.queueList
3、准备一个上传按钮.uploadBtn
2、javascript部分:
首先创建Web Uploader实例:
//实例化
uploader =WebUploader.create({/*************** 重要参数 *************/
//是否自动上传(true是,false否)
auto: false,//flash文件地址
swf: './Uploader.swf',//上传访问的地址
server: './upload.php',//每次请求附带的参数
formData: {act: 'ad_image'},//定义选择文件的按钮
pick: {id:'#filePick', label:'添加图片'},/*************** 其他参数 ***************/
//指定托动区
dnd: '#dndArea',//禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。
disableGlobalDnd: false,//指定监听paste事件的容器,如果不指定,不启用此功能。此功能为通过粘贴来添加截屏的图片
paste: '#uploader',//指定可以上传那些类型的图片
accept: {
title:'Images',
extensions:'jpg,jpeg,png',
mimeTypes:'image/jpg,image/jpeg,image/png'},
thumb:{
width:110,
height:110,//图片质量,只有type为`image/jpeg`的时候才有效。
quality: 70,//是否允许放大,如果想要生成小图的时候不失真,此选项应该设置为false.
allowMagnify: false,//是否允许裁剪。
crop: true,//为空的话则保留原有图片格式。
//否则强制转换成指定的类型。
type: 'image/jpeg'},
compress:{
width:1600,
height:1600,//图片质量,只有type为`image/jpeg`的时候才有效。
quality: 90,//是否允许放大,如果想要生成小图的时候不失真,此选项应该设置为false.
allowMagnify: false,//是否允许裁剪。
crop: false,//是否保留头部meta信息。
preserveHeaders: true,//如果发现压缩后文件大小比原来还大,则使用原来图片
//此属性可能会影响图片自动纠正功能
noCompressIfLarger: false,//单位字节,如果图片大小小于此值,不会采用压缩。
compressSize: 0,//强制转换成指定的类型。
type: 'image/jpeg'},//允许在文件传输时提前把下一个文件准备好 【默认值:false】
prepareNextFile:true,//是否要分片处理大文件上传【默认值:false】
//chunked: false,
//分多大一片【默认值:5242880】
//chunkSize: 512 * 1024,
//如果某个分片由于网络问题出错,允许自动重传多少次!【默认值:2】
//chunkRetry:10,
//上传并发数。允许同时最大上传进程数【默认值:3】
//threads:3,
//文件上传方式,POST或者GET【默认值:'POST'】
//method:'POST',
//最大上传数量,(验证文件总数量, 超出则不允许加入队列)。
fileNumLimit: 20,//验证文件总大小是否超出限制, 超出则不允许加入队列
fileSizeLimit: 200 * 1024 * 1024,//验证单个文件大小是否超出限制, 超出则不允许加入队列
fileSingleSizeLimit: 50 * 1024 * 1024});
接着监听fileQueued事件,即当有文件添加进来的时候,通过uploader.makeThumb来创建图片预览图
至于事件中用到的方法就不写出来的,需要研究的可以下载源码查看学习!(uploader.makeThumb也是写在方法里面去了)
//当文件被加入队列以后触发。
uploader.onFileQueued = function(file) {
fileCount++;
fileSize+=file.size;if (fileCount === 1) {
$placeHolder.addClass('element-invisible');
$statusBar.show();
}
addFile(file);
setState('ready');
updateTotalProgress();
};//上传过程中....
uploader.onUploadProgress = function(file, percentage) {var $li = $('#' +file.id),
$percent= $li.find('.progress span');
$percent.css('width', percentage * 100 + '%');
percentages[ file.id ][1 ] =percentage;
updateTotalProgress();
};//当文件被移除队列后触发。
uploader.onFileDequeued = function(file) {
fileCount--;
fileSize-=file.size;if (!fileCount) {
setState('pedding');
}
removeFile(file);
updateTotalProgress();
};
最后是上传状态提示了,
当文件上传过程中, 上传成功,上传失败,上传完成都分别对应
uploadProgress, uploadSuccess, uploadError, uploadComplete事件。
//文件上传成功
uploader.on( 'uploadSuccess', function( file,data ) {var $li = $('#' +file.id),
$percent= $li.find('.success');
$dsf= $('').appendTo($li),
setState('confirm');
});//文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
setState('uploading');
});//文件上传失败,显示上传出错
uploader.on( 'uploadError', function( file ) {
setState('finish');
});
uploader.on("uploadAccept", function( file, data){if ( data.success==true) {//通过return false来告诉组件,此文件上传有错。
return true;
}else{return false;
}
});
至于事件中用到的方法就不写出来的,需要研究的可以下载源码查看学习!
2、PHP部分:
date_default_timezone_set("Asia/Shanghai");//1、图片文件上传处理 (上传逻辑就自己写了。)
//2、返回值//假如这是上传成功后得到的文件名
$file = date("Ymd_").rand(1000,9999).'.jpg';
$res=array('success' => true,'file' =>$file
);
die(json_encode($res));?>
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程)
WebUploader作用:
使用WebUploader还可以批量上传文件、支持缩略图等等众多参数选项可设置,以及多个事件方法可调用,你可以随心所欲的定制你要的上传组件。
使用:
1、导入Css样式文件:
2、定义html:
1、准备一个按钮#filePicker
2、准备一个用来存放添加的文件信息列表的容器.queueList
3、准备一个上传按钮.uploadBtn
2、javascript部分:
首先创建Web Uploader实例:
webuploader多图片上传php,PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件...相关推荐
- php ajaxfileupload.js 使用,ajaxfileupload.js实现文件上传(附步骤代码)
这次给大家带来ajaxfileupload.js实现文件上传(附步骤代码),ajaxfileupload.js实现文件上传的注意事项有哪些,下面就是实战案例,一起来看一下. AjaxUpLoad.js ...
- vue上传zip文件到服务器,vue.js zip文件上传
vue.js zip文件上传 内容精选 换一换 开发过程中,您有任何问题可以在github上提交issue,或者在华为云对象存储服务论坛中发帖求助.接口参考文档详细介绍了每个接口的参数和使用方法.在O ...
- js判断文件上传的类型
js判断文件上传的类型 /*** @param: fileName - 文件名称* @param: 数据返回 1) 无后缀匹配 - false* @param: 数据返回 2) 匹配图片 - imag ...
- jquery 文件上传插件_10个jQuery文件上传插件
jquery 文件上传插件 这篇热门文章于2016年7月更新,以反映文件上传插件的当前状态. 有关旧文章的评论已删除. 使用Ajax实施文件上传可能非常困难,特别是如果您需要拖放支持,图像预览或进度条 ...
- html js文件域val,js实现文件上传表单域美化特效
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. @H_502_ ...
- js如何上传大文件到服务器,js将文件上传到远程服务器
js将文件上传到远程服务器 内容精选 换一换 将文件上传至Windows云服务器一般会采用MSTSC远程桌面连接的方式.本节为您介绍本地Windows计算机通过远程桌面连接,上传文件至Windows云 ...
- php swfupload handlers.js,SWFUpload 文件上传插件常用的配置讲解
上传文件swfUpload 插件: 基本的文件上传涉及到的四个文件 (还有一个处理数据的php文件 这里没有涉及到) html页面: upload_window.html js文件: swfupl ...
- php 美化js文件,js实现文件上传表单域美化特效_javascript技巧
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. HTML结构 ...
- html和js实现文件上传功能
html和js实现文件上传功能 <!DOCTYPE html> <html><head><meta charset="utf-8"> ...
- 用openoffice+jodconverter+webuploader+pdf.js实现文件上传、在线预览功能
一.背景 最近公司一个项目要实现一个文件上传以及多文档在线预览的功能,之前一直做无线工具开发的,没有涉及到这些东西.另外项目组缺java开发人员,而且自己也只是一个半吊子前端加小半吊子java开发人员 ...
最新文章
- 内核模式下的字符串操作
- c#与WMI使用技巧集
- 【JZOJ4835】【GDOI2017模拟10.31】量化交易
- 《程序员代码面试指南》第七章 位运算 在其他数都出现k 次的数组中找到只出现一次的数...
- 无人化运维离我们有多远?阿里智能化运帷平台深度揭秘
- 【旧文章搬运】Windows内核常见数据结构(线程相关)
- ajax面试技术回答模板
- mysql主从复制不同步案例_mysql主从复制不同步的问题
- 为什么经转速环PI之后的输出量是电流(基于MTPA分析,内含代码)
- windows下的内存型下载者病毒
- 计算机办公软件基础知识题库,办公软件基础知识试题--题库.doc
- 如何轻松高效开展设备巡检?
- 下载webStorm,nodejs,git并简单配置,为JavaScript做准备
- 使用wine在mac系统上运行windows程序
- (生物信息学)R语言绘图初-中-高级——3-10分文章必备——Venn图(韦恩图)(初级)
- 电影推广思路详解,最权威的电影推广方案
- 月薪过2w的IT程序员都是怎么做到的?
- 底层啊底层,你究竟是什么?
- 解决SSD+HDD双硬盘下电脑卡顿问题,CPU和内存使用率低,电脑依旧卡顿
- 2020ICPC济南K Kth Query