H5文件上传插件easyUpload.js

所属分类:输入-上传

 34756  73  查看评论 (90)
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);
  }//删除文件回调函数
});
相关插件-上传

兼容所有浏览器的多图上传预览(原创)

兼容所有浏览器的多图上传预览兼容IE 789.在一个界面上展示到固定标签业务场景:答题添加图片匹配题目一个选项一个题目
  上传
 19781  151

html5 头像上传更换插件

html5 头像上传、更换、剪切插件
  上传
 99383  781

jQuery多图上传带ajax提交

jQuery多图上传可删除,可以本地预览带前台接口
  上传
 31592  169

webuploader 上传插件(根据官方做了小改)

webuploader上传插件,上图之前图片可编辑、可随意排版上传图片顺序
  上传
 28313  119

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

    踏碎这一场盛世,烟花 0
    2018/5/23 9:18:07
    有哪位大神知道怎么回填值吗,也就是编辑修改怎么回填。感谢! 回复
    非渔恋樵 0
    2018/5/17 15:52:05
    java后台怎么接收 回复
    七夜 0
    2018/5/17 15:24:54
    不兼容IE啊,怎么办 回复
    zly2216 0
    2018/5/1 21:07:28

    c#后台接收

    string uploadPath = context.Server.MapPath("/UploadFile/"); //UploadFile文件的物理地址
    if (!Directory.Exists(uploadPath)) {
        Directory.CreateDirectory(uploadPath);
    }
    
    HttpPostedFile file = context.Request.Files["file"];
    
    var returns = "";
    string filename = DateTime.Now.ToString("yyyyMMddhhmmssffff") + ".jpg";
    if (file != null) {
        returns = uploadPath + file.FileName.Substring(0, file.FileName.Length - 4) + filename;
        file.SaveAs(returns);
    }
    回复
    狐狸 1
    2018/4/28 15:59:13

    //看了这么多评论发现状态码在返回值里面,下面是springmvc返回状态码的一种方式
    //先创建一个对象

    public class Upload {
        private Integer code;
        public Integer getCode() {
            return code;
        }
        public void setCode(Integer code) {
            this.code = code;
        }
    }

    //因为是用的spring框架加上@ResponseBody注解可以将对象转成json字符串返回
    //而我的对象里包含code(状态码),必须返回这个字段
    //因为js代码里判断的是这个名字(code),所以它是不可变的,除非你手动改变它
    //当然返回值里面可以添加其他字段

    @RequestMapping("/uploadMore")
    @ResponseBody
    public Upload uploadMore(MultipartFile file, HttpServletRequest request) throws IOException {
        Upload upload = new Upload();
        upload.setCode(200);
        return upload;
    }
    回复
    Tortov Roddle 0
    2018/4/25 14:32:36
    使用了es6语法,为什么不编译一下 回复
    Tender丶DongGua 0
    2018/4/24 14:36:28
    这个插件支持IE9吗?
    我IE9显示不出来 回复
    Tender丶DongGua 0
    2018/4/24 14:30:00
    ie9 渲染不出来 有人知道怎么回事吗
        十指连心_想迩0
        2018/4/25 17:07:18
        我的IE11都显示不出来。。哭
    回复
    在路上 0
    2018/4/19 16:57:59
    请问后台返回什么才会显示上传成功? 回复
    在路上 0
    2018/4/19 16:52:40
    为什么我已经上传到后台去了,后台设置的返回一个“1”,结果还是回调失败,显示上传失败!明明已经上传过去了。 回复
取消回复