jQuery文件上传

所属分类:输入-上传

jQuery文件上传 ie兼容10

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

相关插件-上传

基于HTML5的jquery文件上传插件

这个插件是照着uploadify的api文档写的
  上传
 94007  189

html5 头像上传更换插件

html5 头像上传、更换、剪切插件
  上传
 56461  506

H5移动前端图片批量压缩上传

在移动端压缩图片并且上传主要用到filereader、canvas 以及 fmdata 这三个h5的api
  上传
 25001  77

jQuery图像裁剪插件croppic

croppic图像裁剪将满足您的需求,图像加载效果、展现效果以及裁剪都非常棒,相信您看Demo后一定会喜欢上此插件.
  上传
 54578  95

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

    Sky.晨 曦 0
    2017/4/30 21:56:51

    你好,请问这个可以搭配php使用吗

        葬梦0
        2017/4/30 23:13:41

        可以,和语言无关,只是用js,css,html

        葬梦0
        2017/4/30 23:13:41

        可以,和语言无关,只是用js,css,html

    回复
    zc H。 0
    2017/4/28 17:58:23

    是后台返回值的问题吗

    回复
    zc H。 0
    2017/4/28 17:56:38

       "onUpload":function()这个上传成功的函数无法执行。错误在哪里?

        葬梦0
        2017/4/29 22:19:30

        这几天比较忙,回复晚了,抱歉!

        你好,是这样的,这个函数有一个参数data,这个data是后台传送前台的一个数据,比如说,我上传了5张图片,后台把这五张图片的信息传给前台显示等,所以不管你永不用到data,都需要加上data参数,这一点可能不太好,但是我没有想到什么更好的方案,如果还有什么不清楚或者有什么好的建议,可以留言,也可以找我QQ:1120850353

    回复
    街角福 0
    2017/4/28 17:11:10

    点击选择文件就可以自动上传而不用自己点击上传

    回复
    街角福 0
    2017/4/28 17:09:58

    怎么自动上传呢?

        葬梦0
        2017/4/29 22:14:45

        已经做了更改,增加了自动上传,但是自动上传意味着,不能从多个文件夹选取文件!还是谢谢你的反馈!

        葬梦0
        2017/4/29 22:15:21

        注意看下版本更改日期,在2017/04/29之后的可以

    回复
    Remove 0
    2017/4/26 15:34:28

    使用多图上传..后台接收到的只有一张....

        葬梦0
        2017/4/26 21:14:23

        我不知道你后面是怎么写的,如果也是Spring MVC,在控制器中写入这个参数就好

        @RequestParam(value = "file",required = false) MultipartFile[] files

        比如说:

        @RequestMapping("/uploadEngineeringFiles.do")
            @ResponseBody
            public String uploadEngineeringFiles(@RequestParam(value = "file",required = false) MultipartFile[] files,HttpSession session, HttpServletRequest request){
        。。。。。。。。。
        }

        然后写个文件上传的就OK

        你可以参考这个:https://pan.baidu.com/s/1hrLgel2

        里面有Spring MVC方式还有Servlet文件上传

    回复
    yoonfeng 0
    2017/4/25 16:16:59
    有拖拽换顺序功能那就完美了
        葬梦0
        2017/4/26 21:15:24

        谢谢提议,我试试看能不能改进

    回复
    萧萧 0
    2017/4/22 11:10:59

    亲~~ 如果要再弹出框里面加 上传 要做么弄呢?

        葬梦0
        2017/4/24 21:58:08

        我做了一个,但是没办法给你图片展示,做的方式一样,没什么区别

    回复
    香榭的落叶 0
    2017/4/21 15:41:36

    上传之后怎么拿到服务器传回来的数据呢?

        葬梦0
        2017/4/29 22:45:06

        已做修改

    回复
    lxjpirate 0
    2017/4/19 13:56:04

    上传完之后怎么再编辑该已上传的图片呢

        葬梦3
        2017/4/24 21:47:02

        这个由很多实现方式,这个插件,做不到,因为上传过去首先要记录上传的文件路径还有上传的文件名,但是在这个过程中,可能在上传的时候更改文件名(后台执行的操作),这个插件并没有做到这一点,但是你可以自己补充扩展,我这里提供两个思路,仅当交流:

        1、在上传的时候你返回上传所有文件的文件名或者完整路径,在前台负责显示,当然这个插件可以为您提供一个执行后的操作方法:"onUpload":function(){alert("zxm last");},相对来说这样的做法比较麻烦,但是您可以一试。

        2、上传文件,对上传文件做一个记录,比如说记录数据库中,至于记录文件的id也好,文件路径也好,文件名字也好。你之后要操作的就是用ajax访问获取这个上传的文件信息,然后显示。

    回复
取消回复