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,一经查实,立即删除!

相关文章

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…

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)…

c语言bfs程序讲解,面试算法--二叉树DFS/BFS实现(C语言)

深度优先搜索算法(Depth First Search)DFS是搜索算法的一种。它沿着树的深度遍历树的节点,尽可能深的搜索树的分支。当节点v的所有边都己被探寻过,搜索将回溯到发现节点v的那条边的起始节点。这一过程一直进行到已发现从源节点可达的所有节点为止。如果还…

c语言 子进程,子Shell和子进程

Shell 中有很多方法产生子进程,比如以新进程的方式运行 Shell 脚本,使用组命令、管道、命令替换等,但是这些子进程是有区别的。子进程的概念是由父进程的概念引申而来的。在 Linux 系统中,系统运行的应用程序几乎都是从 init(pid为…

学C语言办公本和游戏本,为什么不建议买游戏本?入手前须知,别只看中游戏...

原标题:为什么不建议买游戏本?入手前须知,别只看中游戏作为一名游戏本用户,我自己在用的游戏本已经用了四五年的时间了,从最初的大学生到毕业工作2年时间,这一游戏本给我带来了不少麻烦。最大的麻烦就是“笨…

Android ui 单元测试 覆盖率,Android单元测试—UI测试(Espresso)

前言我们先回顾一下,在上一篇博客中,主要分享了Android单元测试的逻辑测试部分。接下来,我们重点讲解Android单元测试的UI测试部分!何为UI测试呢?就是对用户界面的交互元素进行测试,如TextView、ImageView&…

android shape 圆角百分比,Android shape显示圆角问题

当需要定义一个圆角效果,当在ADT中预览,没有有效果时,只要运行就可以了!xmlns:Android"http://schemas.android.com/apk/res/android">android:state_pressed"true">android:startColor"#ff8c00"android:endColor"#FFFFFF…

android 删除垃圾文件夹,别再用手机管家清理垃圾了!删除这些文件夹,内存瞬间释放几个G...

随着手机使用时间的增加,手机中缓存的东西越来越多,这时候手机内存空间就会告急,从而影响手机的流畅性。那么在这种时候不要乱清理,我们只需要删除这几个文件夹,就可以帮手机轻松释放好几个G的内存。下面我们就一起来看…

计算机的应用技术课程的看法,统计教学与计算机应用的几点看法论文

统计教学与计算机应用的几点看法论文一、传统教学方法的局限性和弊端统计学是一门关于搜集、整理、汇总、描述和分析数据资料,并在此基础上进行推断和决策的方法论科学,具有很强的应用性、实践性。统计学课程是中等职业学校、财经类专业的基础核心课程。…

jupyter可以打开HTML文件吗,Jupyter ~ 像写文章般的 Coding (附:同一个ipynb文件,执行多语言代码)...

前面用了很久Notebook来交互式编程了,此次说说几个其余的选项:htmlNotebook Markdown此次选Markdown模式(关于Markdown基础能够看以前写的Markdown Base)python和代码同样,Shift回车就能够预览了,怎么样是否是很酷的感受&#xff…

计算机网络技术基础教学内容,计算机网络技术基础

无计算机网络技术基础》课程教案一 计算机网络技术基础》课题: 课题:计算机网络概述(一) ) 教学顺序: 教学顺序:1 教学时数: 教学时数: 2 学时 教学目的:了解计算机网络产生的背景,掌…

计算机表格收入水平怎么算,怎么用excel计算工资所得税

利用Excel表格计算工资所得税?单位工资发放大多采用计算机管理,对一些小企业没有采用工资软件的,一般用Excel表来计算工资。下面小编就教你怎么用excel计算工资所得税。excel计算工资所得税的步骤:1、假设工资的所得税起征点为3500,具体阶段如下表。2、…

同一网段计算机无法共享打印机,Win7同一个局域网内共享打印机不成功的修复方法...

打印机共享需要在同一个局域网内完成,这样打印机可以共享多台电脑。一位用户说自己的打印机和台式Win7系统电脑的连接已经成功,但就是没办法打印机文件,怎么回事呢?win7系统共享打印机的前提是需要关闭杀毒软件和win7系统的防火墙…

嵌入式计算机的特点和应用,以下描述中,()不是嵌入式操作系统的特点。A.面向应用,可以进行裁剪和移植B.用 - 信管网...

第4题:在分布式数据库中包括分片透明、复制透明、位置透明和逻辑透明等基本概念,其中:()是指局部数据模型透明,即用户或应用程序无需知道局部场地使用的是哪种数据模型。A.分片透明B.复制透明C.…

计算机二维全息图原理,三维信息加密如何使用计算全息进行

全息加密技术作为一种特殊的加密方法被广泛应用于信息加密和防伪等领域。在全息加密过程中,光波的波长、记录距离和入射角度等参数用做加密密钥和解密密钥被人们深入研究,但所加密的信息几乎都是二维信息。为此利用一种基于虚拟光学的对三维信息进行加密…

hashmap为什么是2的倍数_HashMap源码解析(jdk1.8)

HashMap在java中使用的频率很高,同时也是面试时的必问的问题。今天咱们就来学习下jHashMap的源码,版本为jdk1.8。学习之前,先一起了解下HashMap的数据结构,便于理解后面所讲的内容。HashMap的底层数据结构由图可见,Has…

消息队列_消息队列:kafka

概念kafka是一个分布式的基于发布/订阅模式的消息队列,主要用于大数据实时处理领域。要理解kafka首先要有分布式的概念,要有消息队列的概念。分布式系统最大的优势就是解耦和削峰,这种情况下,A系统生成了一个消息,B系统…

kopernio显示无效程序_陆风路虎外观设计专利无效案一锤定音,最高法:陆风X7专利无效...

点击上方“华商报”可快速关注哦!持续5年多的路虎、陆风外观设计专利有效性之争终于尘埃落定:华商报记者日前从代理律师处获悉,最高人民法院近日驳回了江铃控股有限公司的再审请求,这意味着,陆风X7的外观专利无效。陆风…

掩膜区域内像素值_MRI ADC值是怎么来的?咱们来手算一下

首发公众号“医影杂记”ADC(Apparent diffusion coefficient),表观弥散系数,用于描述DWI序列中不同方向的分子扩散运动的速度和范围,是MRI DWI(Diffusion-weighted imaging, 弥散加权成像)中最常…