jQuery文件上传

所属分类:输入-上传

 42593  112  查看评论 (165)
jQuery文件上传 ie兼容10

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

更新说明:

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

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


使用方法

第一步:导入样式

<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邮箱,我会发送给各位

相关插件-上传

图片上传插件zyupload java版实例代码

本插件经本人多次修改完善,功能齐全,支持多图片上传、拖拽上传、剪辑、编辑,上传预览,编辑获取默认值等功能,并且每一个功能对应一个demo,简单易懂,方便学习修改
  上传
 71611  427

html5文件上传插件Pure HTML5 file upload

html5文件上传插件Pure HTML5 file upload
  上传
 36258  83

js上传图片预览

js上传图片本地预览
  上传
 62240  207

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

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

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

    zhan19911028 0
    2018/5/16 10:05:20
    一个页面存在多个怎么改
        葬梦0
        2018/5/16 10:08:50
        如果存在多个,还略麻烦,你留下邮箱,我改改看,发给你
    回复
    倪好彩云 0
    2018/3/5 21:34:44

    就是想请问下,怎么把得到这个图片数据,就是后台,我要接收什么,怎么封装,图片数据,谢谢,麻烦讲的详细些,我是后台,前台部不熟悉,刚开始用

    @responsebody @requestmapping("release") public message release(httpservletrequest request) throws fileuploadexception {
        return message.success();
    }
    <div class="layui-input-block aaa">
        <div id="box">
            <div id="test"></div>
        </div>
    </div>
    $('#test').diyupload({
        url: '${context_path}/msg/release',
        success: function(data) {
            console.info(data);
        },
        error: function(err) {
            console.info(err);
        }
    });
        葬梦0
        2018/3/5 21:48:26
        我回复不了信息
        葬梦0
        2018/3/5 21:50:55
        联系我:1120850353
        葬梦0
        2018/3/5 21:53:04
        https://pan.baidu.com/s/1hrlgel2
    回复
    倪好彩云 0
    2018/3/5 21:32:57
    就是想请问下,怎么把得到这个图片数据,
    就是后台,我要接收什么,怎么封装,图片数据,谢谢,麻烦讲的详细些,我是后台,前台部不熟悉,刚开始用
    回复
    万鸿-服务22 0
    2018/2/6 15:48:12
    里面的js方法有没有详细的解释文档啊?
        葬梦0
        2018/2/6 15:49:14
        使用有文档,js文件里面,有备注,没有删,方便你看和改
    回复
    『 有何&不可 』┵ 0
    2018/1/23 17:23:54

    能给份后台进度条控制的源码吗?

        葬梦0
        2018/1/23 17:24:34

        https://pan.baidu.com/s/1hrLgel2

    回复
    君がくれたもの 0
    2018/1/18 16:39:28

    不进servlet就可以打钩,进了就不行

    回复
    君がくれたもの 0
    2018/1/18 16:21:42

    为什么上传成功后文件没有打钩?

        葬梦0
        2018/1/18 16:22:53

        调试一下看,还有进度信息,也查看一下

    回复
    君がくれたもの 0
    2018/1/18 15:49:19

    大佬 如果我从后台读取了几张图片要在这个插件上显示要怎么弄

    回复
    天空 0
    2018/1/15 17:31:49

    大神在不在?

    $("#fileUploadContent").initUpload({
            "uploadUrl":comUrl+"/pa/in/kpiData/uploadAtt",//上传文件信息地址
            "isHiddenUploadBt":false,//是否隐藏上传按钮
            "isHiddenCleanBt":false,//是否隐藏清除按钮
            "isAutoClean":false,//是否上传完成后自动清除
            "onUpload":onUploadFun,//在上传后执行的函数
        });

    我留了这几个参数,然后在js试了url

    alert(uploadUrl+"----url2")
                $.ajax({
                    type:"post",
                    url:uploadUrl,
                    data:formData,
                    processData : false,
                    contentType : false,
                    success:function(data){
                        uploadFileList.flushRememberFile(rememberFile,opt);
                        setTimeout(function(){opt.onUpload(opt,data)},500);
                        if(!opt.showSummerProgress&&opt.isAutoClean){
                            setTimeout(function () {uploadEvent.cleanFileEvent(opt);},2000) ;
                        }
                    },
                    error:function(e){
                        uploadTools.uploadError(opt);//显示上传错误
                    }
                });

    结果打断点连后台方法都没进……

    /**
         * 上传文件
         */
        @RequestMapping(value = { "/uploadAtt" },method = RequestMethod.POST)
    //    @ResponseBody
        public void uploadAtt(HttpServletRequest request,HttpServletResponse response, @RequestParam MultipartFile myFile, HttpSession session)throws IOException {
            //获得原来文件名(含后缀名)
            String originalFilename = myFile.getOriginalFilename();
            int pos = originalFilename.lastIndexOf(".");
            //原文件后缀名
            String suffix = originalFilename.substring(pos);

    弹框的路径确定是对的……但为什么没访问,现在很尴尬,试了俩小时没调试出来……

        葬梦0
        2018/1/15 18:05:21

        联系我

    回复
    Lee Young 0
    2018/1/11 12:17:32

    你好  能一个页面存在多个吗?

    回复
取消回复