H5文件上传插件easyUpload.js

所属分类:输入-上传

 21668  39  查看评论 (38)
H5文件上传插件easyUpload.js ie兼容9

更新时间:2018/1/18 上午12:58:39

更新说明:

修改:

1、增加okCode字段(匹配数据code,执行成功回调)

2、修改界面ui,如gif背景变透明,boder颜色加深等

easyUpload.js

试用过一些资源,发现无法满足项目业务需求,或者无法满足个人的免费要求。因此,我决定从第一行代码开始,来编写一个即免费又好用的玩意。它可以覆盖大部分应用场景,同时也必须高效、稳定、易配置。是的,正是出于这个动机,才有了你看到的这个小项目。个人水平有限,欢迎各位网友批评指正,也可与我联系交流(Email:funnyque@163.com; QQ:1016981640)

插件支持 

  • 文件类型可配置

  • 允许文件大小可配置

  • 是否开启多文件上传可配置

  • 多文件上传数可配置

  • 支持样式自定义

  • 支持单文件上传及删除

  • 支持多文件一键上传及删除

  • 支持实时展示上传进度条

  • 支持上传前文件预览

文件说明 

实际需要用到这里的文件可能只有:

easyUpload.js
easy-upload.less
easy-upload.css
font/
img/

easyUpload.js是插件的主要文件;easy-upload.less便于对css修改;easy-upload.css是less预处理后编译文件,对less不熟悉可以直接修改它;font文件夹里有插件需要用到的字体库;img里有显示上传状态的gif;项目中其他文件则是为了便于你查看demo后加入的。当然,这个插件依赖于jq,调用插件之前需要先引入jq。关于插件的使用,你可以参考下面的使用说明,也可以直接查看demo.html内的示例,这样你可以更快的搞明白

使用说明 

插件使用只需四步:

定义一个结构用于放入插件

<div id="easyContainer"></div>

引入easy-upload.css

<link rel="stylesheet" href="easy-upload.css">

引入jq及easyUpload.js

<script src="vendor/jquery.cookie-1.4.1.min.js"></script>
<script src="easyUpload.js"></script>

配置插件

$('#easyContainer').easyUpload({
  allowFileTypes: '*.jpg;*.doc;*.pdf',//允许上传文件类型,格式';*.doc;*.pdf'
  allowFileSize: 100000,//允许上传文件大小(KB)
  selectText: '选择文件',//选择文件按钮文案
  multi: true,//是否允许多文件上传
  multiNum: 5,//多文件上传时允许的文件数
  showNote: true,//是否展示文件上传说明
  note: '提示:最多上传5个文件,支持格式为doc、pdf、jpg',//文件上传说明
  showPreview: true,//是否显示文件预览
  url: '/api/file/upload',//上传文件地址
  fileName: 'file',//文件filename配置参数
  formParam: {
    token: $.cookie('token_cookie')//不需要验证token时可以去掉
  },//文件filename以外的配置参数,格式:{key1:value1,key2:value2}
  timeout: 30000,//请求超时时间
  successFunc: function(res) {
    console.log('成功回调', res);
  },//上传成功回调函数
  errorFunc: function(res) {
    console.log('失败回调', res);
  },//上传失败回调函数
  deleteFunc: function(res) {
    console.log('删除回调', res);
  }//删除文件回调函数
});
相关插件-上传

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

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

js上传图片预览

js上传图片本地预览
  上传
 56968  202

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

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

图片上传插件

图片上传插件
  上传
 37174  92

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

    askadv 0
    2018/2/23 16:31:02
    请教一下 后台是怎么接收的?
    回复
    414928551 0
    2018/2/23 11:00:16
    能写一个后台 php 的接收文件嘛,我接收老是报错
    回复
    一颗心的沦亡 0
    2018/2/23 9:21:42
    你确定你这能兼容ie9?
    回复
    Anonymous 0
    2018/2/22 21:47:40
    求问这个如何进行上传成功和失败的判定的?能否给出一个返回的json格式标准,让插件根据json里的值进行判定?前台拿到我后台返回的上传成功的json串然后执行失败回调了……
        Anonymous1
        2018/2/22 22:41:35

        查了半天资料,终于解决了。。。
        插件的判定逻辑似乎是在返回串中寻找有没有{"code":200}的字段,如果没有或者不是200则判定失败,否则判定成功。只需要将返回的json串加上该字段即可。
        如果用struts或springmvc的话,返回的json可能被js当成了string处理,从而无法读出json里的"code":200。将easyupload.js的308行开始进行如下修改(308把res换成result,310这一行为新加):
        (308) success: function (result) {
        (309) // 标记索引,用于删除操作
        (310) var res = eval("("+result+")"); //重要!
        (311) res.easyfileindex = file.index;
        (312) var param = _this._findele(file.index, target);
        以下springmvc的后端逻辑仅供参考。其中imageuploadcallback类记录了上传结果,包括errno, code, data[],uploadimage为处理multipartfiles的函数。也兼容wangeditor的文件上传。

        @requestmapping(value = "/admin/docs/imageupload") public void imageupload(@requestparam(httprequestattr.img_upload) multipartfile[] multipartfiles, httpservletresponse response) {
            imageuploadcallback imageuploadcallback = editlogservice.getinstance().uploadimage(multipartfiles);
            try {
                string callback = new objectmapper().writevalueasstring(imageuploadcallback);
                printwriter writer = response.getwriter();
                writer.write(callback);
                writer.flush();
                writer.close();
            } catch (ioexception e) {
                e.printstacktrace();
            }
        }
    回复
    smseasyupload 0
    2018/2/11 10:54:01
    后台似乎不能直接接收,文件上传一般都是form上传,并且enctype="mutilpart/form-data"
    回复
    smseasyupload 0
    2018/2/11 10:38:31
    请问后台怎么接受呢
    回复
    | 静止°相拥那一秒‖丶 1
    2018/2/7 12:45:00

    前台上传失败。在easyupload.js 312行

    if (res.code!=option.okcode)

    我让后台给我传一个code=200,放在message下,所以 我的项目中把312行改成

    if (res.message.code!=option.okcode)

    就不会报错了

    回复
    0
    2018/2/6 19:42:18
    后台怎么能拿到这些信息呢?   希望有大佬能够帮助我。
    回复
    xzp18247655294 0
    2018/2/3 9:44:50
    有没有大神能告诉我后台使用什么接收上传文件的信息 在线等 回复
    0
    2018/2/2 11:47:25

    后台收不到数据是什么情况...

    回复
取消回复