jq上传file到php,jQuery文件上传

992682b40c9265a81c09e9ddecf5e9d9.png

94a6dc5feabd4193c6b752bf51a273a1.png

插件描述:这是一个文件上传的展示,看很多插件,并不满意就自己写了一个,可能兼容性不是很好,没有准确进行测试过,还请各位不吝赐教

更新时间:2019/3/25 下午8:53:17

更新说明:修复上传成功、上传失败,在关掉所有进度条的时候出现的bug

更新时间:2019/3/9 上午10:54:48

更新说明:

1、更改文件回显和文件上传,文件图标状态的bug

2、增强文件回显功能,可下载,可删除,具体事项可参考文档

更新时间:2019/3/4 下午3:37:36

更新说明:感谢网友提供的PHP案例,下载地址如下:提取码: a5zvhttps://pan.baidu.com/s/17OKh4ULRjepi84WKBix6XA

更新时间:2019/3/3 下午3:24:10

更新说明:

1、休息信息提示

2、文件上传进度问题,10秒内获取文件进度为0的时候,停止上传,报错

3、优化单文件上传进度

4、Java后台演示代码:https://pan.baidu.com/s/1fIldjQ4XYluXGmCib9Ty5g

更新时间:2019/2/12 22:40:15

更新说明:

1、框架已重构,对很多功能做了优化,使用说明请参考文档

2、旧的文档不再使用,请勿参考

功能说明:

1、针对多文件上传限制:单文件大小多文件总大小文件数量文件类型是否已经提交2、针对文件上传的参数,现在可以自定义设置,针对php用户可以根据进行参数迭代3、可进行模拟进度上传(需手动设置成功或者失败)4、一个页面可创建多个多文件上传的组件5、针对信息提醒,做了一个统一的管理

更新时间:2018/5/9 下午3:20:40

更新说明:多另一个文件上传回显(显示已经上传的文件)的功能,使用代码如下://显示文件,设置删除事件

uploadTools.showFileResult("fileUploadContent","img/a2.png","1",true,deleteFileByMySelf);

//如果不需要删除

uploadTools.showFileResult("fileUploadContent","img/a3.png","1",false);

//多文件需要自己进行循环

function deleteFileByMySelf(fileId){

alert("要删除文件了:"+fileId);

}

传入的五个参数,说明如下:uploadId 文件上传id,必须

fileUrl 文件地址,必须

fileId 文件操作的id

File 是否删除文件

Event 删除文件执行的事件

更新时间:2017/11/16 下午9:05:24

更新说明:新增记住文件,以及修复文件上传时候还能继续添加文件bug

更新时间:2017/10/20 上午9:20:33

更新说明:修改多次点击清除多次上传的bug

更新时间:2017/10/16 下午11:27:33

更新说明:新增一些方法和说明

自定义设置上传按钮,是否显示上传按钮,是否显示清除按钮,上传模拟进度的快慢,上传后是否自动清除文件,单文件进度条是否显示等

参数说明:"uploadUrl":"#",//必须,上传地址

"progressUrl":"#",//可选,获取进去信息的url

"scheduleStandard":false,//模拟进度的模式

"selfUploadBtId":"",//自定义文件上传按钮id

"velocity":10,//模拟进度速度

"autoCommit":false,//是否自动上传

"isHiddenUploadBt":false,//是否隐藏上传按钮

"isHiddenCleanBt":false,//是否隐藏清除按钮

"isAutoClean":false,//是否上传完成后自动清除

"canDrag":true,//是否可以拖动

"fileType":"*",//文件类型

"size":"-1",//文件大小限制,单位kB

"ismultiple":true,//是否选择多文件

"showSummerProgress":true,//显示总进度条

"showFileItemProgress":true,//是否显示文件单个总进度

"filelSavePath":"",//文件上传地址,后台设置的根目录

更新时间:2017/9/11 下午4:43:59

更新说明:模拟进度上传的方式

可设置下面参数来选择模拟模式

"scheduleStandard":true,//模拟进度的方式,设置为true是按总进度,用于控制上传时间,如果设置为false,按照文件数据的总量,默认为false

更新时间:2017/8/29 下午4:04:06

更新说明:修改上传提交其它数据bug

更新时间:2017/6/30 上午10:43:22

更新说明:在上传的时候关闭了选择文件的功能,关闭了自动上传

在这里我还要说明一下:这是一个真实的进度条,我这里显示的是一个模拟,上传的进度信息,必须由后台提供,如果不知道怎么写看我给出的前后台用Spring MVC的例子,我这里这个只是前台!!这个只是前台!这个只是前台!重要的话说三遍,后台需要自己实现,当你,写入了uploadUrl和progressUrl的时候会实现真正的文件上传,否则都是模拟!!!

更新时间:2017年4月29日22:12:35

更新说明:根据网友需求增加了一个自动上传功能,配置代码如下:$("#fileUploadContent").initUpload({

"uploadUrl":"#",//上传文件信息地址

"progressUrl":"#",//获取进度信息地址,可选,注意需要返回的data格式如下({bytesRead: 102516060, contentLength: 102516060, items: 1, percent: 100, startTime: 1489223136317, useTime: 2767})

//"showSummerProgress":false,//总进度条,默认限制

//"size":350,//文件大小限制,单位kb,默认不限制

//"maxFileNumber":3,//文件个数限制,为整数

//"filelSavePath":"",//文件上传地址,后台设置的根目录

//"beforeUpload":beforeUploadFun,//在上传前执行的函数

//"onUpload":onUploadFun,//在上传后执行的函数

autoCommit:true,//文件是否自动上传

//"fileType":['png','jpg','docx','doc'],//文件类型限制,默认不限制,注意写的是文件后缀

})

注意:autoCommit:true,//文件是否自动上传

更新时间:2017年4月24日22:49:01

更新说明:

1、上次版本更新,演示效果缺失补充

2、在上传前,可能存在这样的场景,如要上传除了文件路径之外的数据,那么初始化的时候做了一些改动如下:$("#fileUploadContent").initUpload({

"uploadUrl":"#",//上传文件信息地址

"progressUrl":"#",//获取进度信息地址,可选,注意需要返回的data格式如下({bytesRead: 102516060, contentLength: 102516060, items: 1, percent: 100, startTime: 1489223136317, useTime: 2767})

//"showSummerProgress":false,//总进度条,默认限制

//"size":350,//文件大小限制,单位kb,默认不限制

//"maxFileNumber":3,//文件个数限制,为整数

//"filelSavePath":"",//文件上传地址,后台设置的根目录

//"beforeUpload":beforeUploadFun,//在上传前执行的函数

//"onUpload":onUploadFun,//在上传后执行的函数

//"fileType":['png','jpg','docx','doc'],//文件类型限制,默认不限制,注意写的是文件后缀

})

function beforeUploadFun(opt){

opt.otherData =[{"name":"你要上传的参数","value":"你要上传的值"}];

}

function onUploadFun(data){

alert(data);

}

注意:上面的beforeUploadFun(opt)和onUploadFun(data)都带有这个参数,不要对其进行修改

更新时间:2017年4月18日13:13:43

更新说明:

关于火狐浏览器不能上传显示图片做个修改。

还有,之前没有提到,这个是可以可以拖动文件实现上传的

使用方法

第一步:导入样式

这两个样式第一个使用了阿里的fonticon,第二个是我自己写的一个样式

第二部:导入js

注意:只用了jquery最简单的一些方法函数,大家可以根据自身调整jquery版本,这样浏览器兼容会有些提升

第三步:建立一个文件上传容器

第四部:初始化

$("#fileUploadContent").initUpload({

"uploadUrl": "#",

//上传文件信息地址

"progressUrl": "#",

//获取进度信息地址,可选,注意需要返回的data格式如下

( {

bytesRead: 102516060,

contentLength: 102516060,

items: 1,

percent: 100,

startTime: 1489223136317,

useTime: 2767

})

//"showSummerProgress":false,//总进度条,默认限制

//"size":350,//文件大小限制,单位kb,默认不限制

//"maxFileNumber":3,//文件个数限制,为整数

//"filelSavePath":"",//文件上传地址,后台设置的根目录

//"beforeUpload":function(){alert("zxm first");},

//在上传前执行的函数

//"onUpload":function(){alert("zxm last");},

//在上传后执行的函数

//"fileType":['png','jpg','docx','doc'],

//文件类型限制,默认不限制,注意写的是文件后缀

})

具体的功能我都已经进行了说明,在没有上传和获取进度信息的情况下,我也写了一个模拟的过程,但是bytesRead(已上传数据)是不断的累加的,以及percent也不断累加,所以会出现不统一的现象,但是有后台情况下不会出现这种情况,实际的百分比和已上传的数据是关联的,我只是做个模拟,还望各位不要较真!

关于文件上传后台怎么实现,我这里就不说明了。提供自身实现(Spring MVC)的一个例子:https://pan.baidu.com/s/1hrLgel2

如果连接实现可留言QQ邮箱,我会发送给各位

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/442391.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

oracle导出建表主键,oracle主键自动生成 配合hibernate的生成策略详解

hibernate配合oracle自动生成主键策略有两种方法:A)设置ID的增长策略是sequence,同时指定sequence的名字,最好每个表建一个sequence,此种做法就如同MS-SQL,MY-SQL中的自动增长一样,不需要创建触发器,具体的…

oracle找到表的位置,查看Oracle表中的指定记录在数据文件中的位置

查看Oracle表中的指定记录位置select rowid,user_id from sshr.xx_user where user_id3010586select rowid,dbms_rowid.rowid_object(rowid) object_id,dbms_rowid.rowid_relative_fno(rowid) file_id,dbms_rowid.rowid_block_number(rowid) block_id,dbms_rowid.rowid_row_num…

oracle异常抛出,ORACLE 存储过程异常捕获并抛出

for tab_name in tables loopexecute immediate drop table ||tab_name; --此处可能会报错end loop;当前情况是,循环表,进行删除,如果出现表不存在,则会异常中断,导致整个存储过程挂掉,需求是要能跳过错误的…

oracle的主目录怎么删除,删除oracle数据库卸载

oracle 10g在win上卸载软件环境1 、Windows XPOracle 10g2、 Oracle安装路径为 d:\Oracle实现方法1 、开始—设置—控制面板—管理工具—服务停止所有 Oracle服务;Or acleUfiCQiisoXeorcl 名称 I细I好I启动类型I aat为ffetwork Frov-isi. 「, 巴SOrae le StrTice…

oracle数据库相关知识,Oracle数据库相关知识点复习

一.Oracle数据库中常用的数据类型varchar2(长度)可变长字符串char(长度)定长number()表示整数或者浮点数number(8) number(8,2)clog字符的大对象blog二进制的大对象二.数据库查询1)SELECT语句从表中提取查询数据.语法为SELECT [DISTINCT] {column1,column2,…} FROM tablename …

Linux中批量创建空白文件,在Linux中批量创建和修改文件或目录

1. 用一条命令直接创建[fredRoyalmile Auto_Ops]$ touch seq 10[fredRoyalmile Auto_Ops]$ ls1 10 2 3 4 5 6 7 8 9[fredRoyalmile Auto_Ops]$ touch linux-{A..G}[fredRoyalmile Auto_Ops]$ lslinux-A linux-B linux-C linux-D linux-E linux-F linux-G[fredRo…

linux查看cpu占用最多的进程,Linux下查看占用CPU资源最多的几个进程

BPM SharePoint解决方案分享一.需求分析 SharePoint作为微软推出的协同类平台产品,为客户提供了门户.内容.文档.流程.社区.搜索.BI等一系列的解决方案,然而其流程功能由于设计理念差异,不能完全满足客户的需求,主要原因 ...nodejs字符与字节之间的转换new Buffer("Hello W…

linux内核 sin头文件,Linux内核中中断request_irq详解--中断共享问题解决

。函数原型如下:2.4 内核int request_irq (unsignedintirq,void (*handler)(int,void*,structpt_regs*),unsignedlongfrags,constchar*device,void*dev_id);2.6 内核request_irq(unsignedintirq,irq_handler_thandler,unsignedlongflags,constchar*name,void*dev);参…

linux缓存文件用户权限错误,Laravel运行缓存权限问题

Laravel 开发中遇到权限问题 failed to open stream: Permission denied错误现象:messg:"file_put_contents(.../storage/framework/cache/data/03/8c/03xxxxxx):failed to open stream: Permission denied"status: 500经过搜索发现网络上大量的解决方案是…

linux误删表空间文件,UNDO表空间下的数据文件被误删除后的处理方法

UNDO表空间下的数据文件被误删除后的处理方法:操作前备份数据库,以避免更大的损失。思路:1、把误删除的数据文件offline2、正常打开数据库后创建新的UNDO表空间及数据文件3、修改相应参数指向新的UNDO表空间4、重新启动数据库验证5、删除旧的…

linux内核有ebpf吗,聊聊很重要的内核技术eBPF

在2018年的 Linux Plumber 大会上,eBPF成了亮点,有24个议题提到了 eBPF,可以预计eBPF会成为一大技术热点。eBPF(Extended Berkeley Packet Filter) 的核心是驻留在 kernel 的高效虚拟机。最初的目的是高效网络过滤框架,前身是 BPF…

linux 访问日志ip排序,Linux通过日志文件统计IP访问次数排序

假设我的日志文件内容如下:218.92.217.53 - - [22/Nov/2017:17:26:27 0800] "GET /images/rand HTTP/1.0" 200 1785 "https://www.baidu.com/index.shtml" "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC…

Linux系统自动备份脚本,供参考的Linux系统中自动执行分段备份脚本

供参考的Linux系统中自动执行分段备份脚本发布时间:2014-04-21 15:49:00来源:红联作者:tioced以下脚本仅做学习参考,需加到/etc/crontab文件,每天执行一次的脚本自动执行分段备份/www/users下的网页文件夹。[code]#!/usr/bin/perl$all_day date;chdir &…

linux+last命令菜鸟,Linux基本命令。。。菜鸟保留

以下命令都是以root身份输入的1.从图形界面进入问文本界面:init 32.从文本界面进入图形界面:startx3.从普通用户进入root用户:su4.进入文件夹:cd /文件路径5.返回上一个文件夹:cd ..6.查看当前位置的文件以及文件夹&am…

嵌入式linux tftp rpm,嵌入式linux的tftp配置

tftp是用来下载远程文件的最简单网络协议,它其于UDP协议而实现。嵌入式linux的 tftp开发环境包括两个方面:一是linux服务器端的tftp-server支持,二是嵌入式目标系统的tftp-client支持。因为u- boot本身内置支持tftp-client,所以嵌…

oom linux 导致ssh,Linux OOM

8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选?某个机器看到一条日志:Out of Memory: Kill process xxx (xxx) score 707 or sacrifice child并且syslog, ssh等进程都被kill掉了.简单了解了下OOM(Out of Memory)…

linux c 禁止对外通信,Linux C套接字:在recv调用时被阻止

在我的应用程序中,我为简单的http服务器创建了一个线程,然后从我的应用程序中尝试连接到http服务器,但是在recv调用中控件被阻止/挂起.但是,如果尝试使用linux GET命令连接到应用程序的http服务器,则我将成功连接到http服务器.据我对谷歌搜索的了解,我发现这不是正确的方法.但是…

linux 深度v15,[转载]深度Linux发布 V15.9

新增的功能多种手势,轻触即发,针对支持触摸屏设备,支持单击、双击、唤出右键菜单、上下滑动等多种触摸屏手势。搭配屏幕键盘,让您随心所欲,手指点到即得到。随机应变,识变从宜,推出智能镜像源概…

linux arch 包管理,Archlinux使用包管理方式安装MyEclipse

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼PKGBUILD:# Maintainer: alex-no1 # Contributor: alex-no1 pkgnamemyeclipse_realnameeclipsepkgver11.0.1_internal_pkgver3.8.2pkgrel1_date201301310800pkgdesc"An IDE for Java and other languages - 3.8 - simultaneou…

c语言程序位置式pid算法,增量式与位置式PID算法(C语言实现与电机控制项目)...

4.2核心代码/**************************************************************************函数功能:增量PI控制器入口参数:编码器测量值,目标速度返回 值:电机PWM根据增量式离散PID公式pwmKp[e(k)-e(k-1)]Ki*e(k)Kd[e(k)-2e(k-…