jQuery文件上传

所属分类:输入-上传

 28732  78  查看评论 (118)
jQuery文件上传 ie兼容10

更新时间: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

更新说明:

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

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


使用方法

第一步:导入样式

<link href="css/iconfont.css" rel="stylesheet" type="text/css"/>
<link href="css/fileUpload.css" rel="stylesheet" type="text/css">

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

第二部:导入js

<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/fileUpload.js"></script>

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

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

<div id="fileUploadContent" class="fileUploadContent"></div>

第四部:初始化

<script type="text/javascript">
    $("#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'],
        //文件类型限制,默认不限制,注意写的是文件后缀  
    })
</script>

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

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

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

相关插件-上传

手机端实现多图片上传

使用js实现手机端的多图片上传
  上传
 47218  163

jquery多图片上传

多张图片上传,显示
  上传
 161802  378

图片上传插件localResizeIMG

显示原来图片,和压缩后的图片,并且显示大小
  上传
 84805  118

jQuery多图上传图片上传精简版

配置简单功能强大支持进度条限制上传类型文件大小文件数量轻松配置后端值需要写个接口接收文件返回指定信息便可轻松搞定。
  上传
 12825  39

讨论这个项目(118)回答他人问题或分享插件使用方法奖励jQ币

      0
    2017/11/14 18:21:41

    作者大哥,你的QQ是多少  我qq  623317276

    求教个问题

        葬梦0
        2017/11/14 19:44:38

        1120850353

    回复
      0
    2017/11/14 18:16:22

    作者大哥, 您的后台接收文件的php是怎么写的?  能贴一下吗

    回复
    你渲染了我的空城 0
    2017/11/9 17:58:39

    您好 能否加个QQ  请教您一些问题  656729332

    回复
    不离不弃 0
    2017/11/8 17:55:56
    上传的文件大了点,就一直上传失败,代码没有做限制。然后有时上传成功时,状态确实错的
        葬梦0
        2017/11/9 10:32:17

        我传过4个G的系统文件,没有错误,你联系我,我帮忙看看

    回复
    一抹浅笑丶诠释所有的悲伤 0
    2017/11/7 11:10:37
    你好,我上传文件的同时希望把form表单中的几个select中的value值获取到一起走异步发送到后台处理,但是一直处理不了 ,请问该怎么解决。。。。
        葬梦1
        2017/11/7 11:15:45

        点开我的演示,里面有个文档,最后有一个表单,表单下有两个按钮,第二个按钮得到的表单信息就是可以通过上传的信息,怎么上传这个信息,需要通过beforeUpload这个属性参数进行上传,可以见案例

        $("#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);
        }

        opt.otherData就是你要上传的表单信息,也就是第二个按钮得到的信息格式,如果还有什么疑问,可以用QQ联系我,1120850353


    回复
    风在飘动 0
    2017/11/1 17:09:48
    楼主,自动上传好像有这个问题,当选择了A文件(自动上传成功),再次选择A文件,这个时候提示A文件重复,但还是又把A文件上传了一遍。类似问题在“addFileList”这个方法里面都有出现。总结一下,就是已经加的文件,再继续添加文件的时候,又重新把已上传的文件再次上传了一遍。请楼主看看是否有这问题,谢谢~
        葬梦1
        2017/11/6 17:10:48
        我测试过了,第一次添加文件成功,第二次,添加文件提示相同文件已经有了,如果上传,同一个文件不会上传两次,你检查下代码,看看哪里出了问题,也可以联系我,我可以帮忙解决
    回复
    生活 0
    2017/10/30 8:24:35

    是否能加上,初始化文件里。如上传的文件,载下来在修改在上传!!

        葬梦1
        2017/10/30 9:23:52

        修改文件,基本上就是文件名字的修改,文件的删除,文件的修改假设:我修改了文件,我需要做的就是将我修改的上传到服务器,由后台尽心处理,上传的数据什么样的格式,什么样的内容,都是没有固定的,做个私用的可以,做个通用的难,这是其一第二,只对文件进行删除处理,那么一种是服务器传输下来已经上传的文件数据,但是格式也是不固定的,如果说还要放在这个上传的里面,可做删除操作,但是数据格式需要有个统一,比如说,穿回来的是个json数组,如

        [{.......“imgUrl”:“/imgs/ppt/image1.png”},{.......}]

        ,当里面包含一个文件路径的时候便可以进行显示,那么接下去删除,根据什么进行删除呢?文件的id?还是其它的标识?这是我遇到的难题,做个仅仅是自己用的,可以随意写,我也可以帮你写,但是做个通用的,这个是我遇到的难题,如果你有更好的想法和思路请告诉我,谢谢,也可以加我的QQ:1120850353谢谢你提的意见

    回复
    百草荣枯 0
    2017/10/27 11:56:54
    可以加个上传前压缩图片的功能就更好了
        葬梦0
        2017/10/27 12:23:01

        谢谢提议,我试试

    回复
    JQ.Xu 0
    2017/10/19 18:11:42

    上传本地图片  获取图片地址有错  是什么问题啊

        葬梦0
        2017/10/20 9:20:01
        是上传后获取图片地址还是上传的时候获取图片地址?
    回复
    xjh101010 0
    2017/10/17 18:47:46

    弹出"要设定一个Id",则是什么问题啊?

        xjh1010100
        2017/10/17 19:10:29

        知道了,加载顺序有关系,JS需要放在页面底部。

    回复
取消回复