H5文件上传插件easyUpload.js

所属分类:输入-上传

 41327  89  查看评论 (109)
H5文件上传插件easyUpload.js ie兼容9

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

更新说明:

修改:

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

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

easyUpload.js

试用过一些资源,发现无法满足项目业务需求,或者无法满足个人的免费要求。因此,我决定从第一行代码开始,来编写一个即免费又好用的玩意。它可以覆盖大部分应用场景,同时也必须高效、稳定、易配置。是的,正是出于这个动机,才有了你看到的这个小项目。个人水平有限,欢迎各位网友批评指正,也可与我联系交流(Email:[email protected]; 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,简单易懂,方便学习修改
  上传
 74416  441

zyupload图片上传修改版V2.0

在原zyupload基础上增加了放大,删除,目录选择功能 。同时修改了原作者中的删除图片后该图片不能再次上传的BUG
  上传
 7257  34

jQuery移动端多图上传(带裁剪功能)

适应于手机端上传图片的功能,附带上传图片裁剪功能
  上传
 222  2

图片上传插件

图片上传插件
  上传
 41739  98

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

    明哥 0
    2018/7/16 17:02:14
    苹果部分旧手机无法直接拍照上传但选相册可以,有人知道原因么? 回复
    technology 0
    2018/6/25 19:29:15
    如果要在图片选择之后再传参数呢 求解 回复
    朝途 0
    2018/6/20 18:37:40
    请教怎样在同一个页面使用两次,不让它覆盖? 回复
    小王 0
    2018/6/13 16:54:28
    大神请问 ,IE浏览器提示 SCRIPT438: 对象不支持“easyUpload”属性或方法 这种情况有没有什么解决办法
        缺席你的过去,0
        2018/7/5 17:29:26
        改源码,源码中的`改啦,就好啦
    回复
    海洋男孩 0
    2018/6/13 8:22:52
    我引入到项目之后easyupload 这个JS报错了,知道怎么解决吗 回复
    杨晓明 0
    2018/6/11 10:21:57
    明明上传成功了,但是返回数据打印的是回调失败?请大神赐教
        雨田1
        2018/6/12 9:40:19

        后台需要返回code为200,不过你可以把他代码给屏蔽掉,在代码的319行,

         if (res.code != option.okCode) {
             allowNewPost = true;
             if (option.multi) {
                 response.error.push(res);
                 option.errorFunc && option.errorFunc(response);
             } else {
                 option.errorFunc && option.errorFunc(res);
             }
             _this._handleFailed(param);
         } else {
             //这里面的代码留着
         }

        把上面这段代码给注释掉

    回复
    雨田 0
    2018/6/5 13:52:27
    你这个插件一个界面只能配置一个吗?后面的会把前面给覆盖掉,有没有大佬解决了的,求方案 回复
    Helianthus。 0
    2018/6/2 14:41:55
    ie11下无法显示的原因。。。欲哭无泪、、、、就因为“`”这个!!!!
        Helianthus。0
        2018/6/2 15:03:34
        然后也是因为“`”这个 导致后续的删除按钮无效。。哎,,,js小白表示。。放弃、、
        Helianthus。0
        2018/6/2 15:17:22
        有没有大神指教一下
        Helianthus。0
        2018/6/2 15:28:30
        ES6了解一下?
        缺席你的过去,0
        2018/7/5 17:32:43
        `改成' 然后${index}改成+index+
    回复
    踏碎这一场盛世,烟花 0
    2018/5/23 9:18:07
    有哪位大神知道怎么回填值吗,也就是编辑修改怎么回填。感谢! 回复
    非渔恋樵 0
    2018/5/17 15:52:05
    java后台怎么接收
        雨田3
        2018/6/5 13:49:11

        插件配置好路径,

        $('#richContent').easyUpload({
               allowFileTypes: '*.jpg;*.png;*.jpeg;*.doc;*.pdf',
               allowFileSize: 100000,
               selectText: '选择文件',
               multi: true,
               multiNum: 12,
               showNote: true,//是否展示文件上传说明
               note: '提示:最多上传5个文件,支持格式为doc、pdf、jpg',//文件上传

        说明   

        showPreview: true,//是否显示文件预览
               url: "${pageContext.request.contextPath}/product/productDetailImageUpload",
               fileName: "photo",
               timeout: 100000,//请求超时时间
               okCode: 200,//与后端返回数据code值一致时执行成功回调,不配置默认200
               successFunc: function(res) {
                   var result=res.successSingle[0];
                 
               },//上传成功回调函数
               errorFunc: function(res) {
                   console.log('失败回调', res);
               },//上传失败回调函数
               Func: function(res) {
                   var result = res.del[0];
               }
           });

        fileName与你后端接受参数名字对应:使用 MultipartFile类接收

        @RequestMapping(value = "/productDetailImageUpload")
        @ResponseBody
        public APIResult productDetailImageUpload(@RequestParam("photo") MultipartFile photo, HttpServletRequest request) {
           处理自己的图片业务逻辑
        }
    回复
取消回复