jQuery文件上传

所属分类:输入-上传

 23725  66  查看评论 (93)
jQuery文件上传 ie兼容10

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

相关插件-上传

基于amazeui头像上传

基于amazeui框架,设计的头像上传插件
  上传
 19507  114

zyupload图片上传修改版

在原zyupload基础上增加了放大,删除,目录选择功能 。上传的图片可以轮播查看, 上传图片有拖拽图片和文件功能
  上传
 5309  19

拖放文件上传与图像预览插件Dropzone.js

dropzone.js是重量轻的JavaScript库,将HTML元素设置为一个降落区,并通过Ajax文件被上传到服务器。
  上传
 52166  96

多图片上传预览(纯前端)

多图片上传预览,已测试ie 360 火狐 谷歌浏览器
  上传
 155222  253

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

    你若成风 0
    2017/9/20 16:40:14
    请问上传成功后,删除怎么处理?我点一下删除虽然不显示,但文件依然存在,在哪里触发事件
        葬梦1
        2017/9/20 16:42:12

        删除是后台的操作,后台你保存了文件,总要有个记录文件的信息,比如说id,那么可以根据这个id删除这个文件,前台是没有任何删除文件功能的,但是你可以自己写删除文件,在自己写删除文件的时候,先获取已经上传的文件

        你若成风0
        2017/9/20 16:47:23
        嗯嗯,挺好用的,楼主很棒
    回复
    Z-Honor 0
    2017/9/18 17:02:02

    你好,我用插件,初始化页面没任何东西,F12也没报错,js也加载进来了,用是google游览器,请问是什么问题呢

        葬梦0
        2017/9/18 19:09:39

        QQ联系我吧,你这样和我说,我也不知道原因,需要调试

    回复
    丶软白沙 0
    2017/9/13 19:24:30

    楼主,请问有兼容IE9 或者以下的版本吗?跪求

        葬梦0
        2017/9/14 16:45:56

        没有兼容ie9的,抱歉啊

    回复
    。。 0
    2017/9/8 13:56:45

    你好 我q897075112出现一些问题 求帮忙解决

    回复
    §?&幻??? 0
    2017/8/22 11:36:34

    请问图片的显示可以只显示一张图片吗?我要做的是上传头像,只要一张就行,不要没点击一次选择文件就要在后面多显示一张

        葬梦1
        2017/8/29 16:03:27

        如果只是上传做头像这个功能,不建议使用这个插件,还有,如果你要用这个插件,把最大文件上传数量更改为1就好

    回复
    无知 0
    2017/8/2 17:19:14
    为什么我的图片没加载啊
        葬梦0
        2017/8/2 17:19:50

        按下F12看看,有没有报错

        无知0
        2017/8/2 17:23:18

        我的 上传 删除 的那两个按钮图片加载不成功,如果我直接打开的静态的没问题,我把它放在项目里面就不行了

        无知0
        2017/8/2 17:25:24
        能加你qq聊么
    回复
    LY.ZW 0
    2017/8/1 17:32:45

    作者大哥,有没有什么兼容IE9多图预览并且一并上传的资源呀,哎,这两天IE弄得我头都大了,IE不支持formData,实在是心塞,在IE上自己发现自己根本不会写一行代码,一写,就给我报错,实在是心累

        葬梦0
        2017/8/1 17:36:31

        你急吗?急的话,我晚上试着谢谢看,好吗?但是现在我也不知道怎么去兼容低版本,需要查查文档

        葬梦1
        2017/8/1 19:47:18

        有一个办法可以实现js文件上传在IE9,利用jquery.form.js插件,在IE9下有个问题,input不支持multiple="multiple"

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

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

        wujunjarvis0
        2017/7/24 17:34:19
        只能获取一条信息的数组
        葬梦0
        2017/7/30 16:07:59

        抱歉,这段时间在忙,获取不到有很多原因,我对PHP不是很懂,所以可能帮不了你,实在是抱歉

        七分醒1
        2017/8/28 17:53:27

        js的问题 下标file叠加替换了 拼个i就行

        for (var i = 0; i < fileList.length; i++) {
            if (fileList[i] != null) {
                formData.append("file" + i, fileList[i]);
            }
        }
    回复
    强少009 0
    2017/7/19 15:37:38

    求作者 解决问题

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

    求作者 解决问题

    回复
取消回复