jQuery文件上传

所属分类:输入-上传

 15901  47  查看评论 (73)
jQuery文件上传 ie兼容10

更新时间: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邮箱,我会发送给各位

相关插件-上传

BootstrapFileInput 图片上传插件 详解

样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,完全没有理由不去使用
  上传
 217724  126

zyupload四种不同的上传PHP版

PHP支持拖拽和裁剪的一款上传插件:zyupload。在js里面可以自定义高度和宽度,类型,远程上传地址等。
  上传
 7458  31

上传图片-可裁剪

上传图片可裁剪
  上传
 49178  81

jQuery多图上传

jQuery多图图片上传.net后端以写好,直接使用
  上传
 12018  54

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

    wujunjarvis 0
    2017/7/24 17:24:23

    我用php 接受的 ,但是却获取不到,求作者答复。1943275364

        wujunjarvis0
        2017/7/24 17:34:19
        只能获取一条信息的数组
    回复
    强少009 0
    2017/7/19 15:37:38

    求作者 解决问题

    回复
    强少009 0
    2017/7/19 15:36:18

    求作者 解决问题

    回复
    强少009 0
    2017/7/19 15:33:04

    请问 作者在线吗??着急解决问题

    回复
    强少009 0
    2017/7/19 15:20:14

    作者你好,我现在进度条获取不到状态 打印的全是null我服务端用SpringBoot 但是就是按照你的例子把监听器都配置好了

    回复
    西、瓜 0
    2017/6/16 18:00:46
     怎么指定上传文件在服务器上的保存路径 
        葬梦0
        2017/6/30 10:05:11
        第一种方式,设置filelSavePath,后台获取这个参数,并且保存到这个参数所指引的文件夹中第二种方式,设置beforeUploadFun,在上传的时候提交你要提交的参数,后台获取保存
    回复
    西、瓜 0
    2017/6/16 17:35:19

    我想给他设置一个上传的指定文件夹 在哪改啊  在"filelSavePath"写上 还是没有啊

    ???

        葬梦0
        2017/6/30 10:05:57

        这个需要后台创建,但是要创建什么样的目录或者说路径,可以自己指定,也可以更具这个参数指定

    回复
    西、瓜 0
    2017/6/16 17:28:43

    文件上传地址怎么更改???谢谢

    回复
    月夜丶无痕 0
    2017/6/12 14:44:37

    选择第一个上传的时候选择下一个就出错啦

        葬梦0
        2017/6/30 10:07:58

        这个插件没办法做到选择一个,然后上传一个,你可以一个个选择,然后一起上传

        葬梦0
        2017/6/30 10:09:54

        在线测试的是选择一个就会自动提交,你要关闭自动提交

    回复
    月夜丶无痕 0
    2017/6/12 14:15:50

    div 里面注释的掉的需要么? 我整合到jsp 页面无效啊。必须使用html吗?

        葬梦0
        2017/6/30 10:06:51
        不需要,这个任何页面都行,只要支持jquery和formData就好
    回复
取消回复