素材8网-专注前端素材！
来源：https://www.sucai8.cn/29800.html

图片上传特效带进度条更换头像上传表单特效

  • 1273
  • 1
  • 1

第一步：导入样式
  1. <link href="css/iconfont.css" rel="stylesheet" type="text/css"/>
  2. <link href="css/fileUpload.css" rel="stylesheet" type="text/css">
复制代码

这两个样式第一个使用了阿里的fonticon，第二个是我自己写的一个样式
第二部：导入js
  1. <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
  2. <script type="text/javascript" src="js/fileUpload.js"></script>
复制代码
注意：只用了jquery最简单的一些方法函数，大家可以根据自身调整jquery版本，这样浏览器兼容会有些提升
第三步：建立一个文件上传容器
  1. <div id="fileUploadContent" class="fileUploadContent"></div>
复制代码
第四部：初始化
  1. <script type="text/javascript">
  2.     $("#fileUploadContent").initUpload({
  3.         "uploadUrl": "#",
  4.         //上传文件信息地址        
  5.         "progressUrl": "#",
  6.         //获取进度信息地址，可选，注意需要返回的data格式如下
  7.         （ {
  8.             bytesRead: 102516060,
  9.             contentLength: 102516060,
  10.             items: 1,
  11.             percent: 100,
  12.             startTime: 1489223136317,
  13.             useTime: 2767
  14.         }）
  15.         //"showSummerProgress":false,//总进度条，默认限制      
  16.         //"size":350,//文件大小限制，单位kb,默认不限制     
  17.         //"maxFileNumber":3,//文件个数限制，为整数     
  18.         //"filelSavePath":"",//文件上传地址，后台设置的根目录   
  19.         //"beforeUpload":function(){alert("zxm first");},
  20.         //在上传前执行的函数      
  21.         //"onUpload":function(){alert("zxm last");}，
  22.         //在上传后执行的函数   
  23.         //"fileType":['png','jpg','docx','doc']，
  24.         //文件类型限制，默认不限制，注意写的是文件后缀  
  25.     })
  26. </script>
复制代码

本素材被以下收藏专辑推荐:

相关素材
图片上传特效带进度条更换头像上传表单特效
  • Flay 刚刚下载了一个素材
  • 一棵树123 刚刚下载了一个素材
  • Babo 刚刚下载了一个素材
  • Toky 刚刚下载了一个素材
  • 小二强 刚刚下载了一个素材
  • babohuang 刚刚下载了一个素材
  • 梦想长着翅膀的 刚刚下载了一个素材
  • 梦想长着翅膀 刚刚下载了一个素材
  • qqAquariushxD 刚刚下载了一个素材
  • 梦想周游世界的J 刚刚下载了一个素材
  • 尘埃落定 刚刚下载了一个素材
  • Liul 刚刚下载了一个素材
  • qqeuVNk 刚刚下载了一个素材
  • WHT 刚刚下载了一个素材
  • 瑞瑞小仙女 刚刚下载了一个素材
分享者：
分享者头像
小编
热门素材推荐
HTML素材网，HTML5模板，网页特效 微信公众账号二维码 淘宝店铺地址二维码
Copyright©2024  素材8  Powered by 智伙伴科技
   鲁ICP备14029286号-5
返回顶部返回顶部
发布主题