js图片上传的封装代码


Posted in Javascript onAugust 01, 2017

本文实例为大家分享了js图片上传的具体代码,供大家参考,具体内容如下

js封装的方法

function uploadImages(picker, url, callback) {
  var img_uploader = WebUploader.create({
    auto: true,
    server: url,
    pick: picker,
    fileNumLimit: 1,
    fileSingleSizeLimit: 2097152, // 2M
    accept: {
      title: 'Images',
      extensions: 'gif,jpg,jpeg,bmp,png',
      // mimeTypes: 'image/*'
    },
    compress: {
      width: 300,
      compressSize: 102400 // < 100kb 不压缩
    },
  })

  var fileType = ['image/jpeg', 'image/jpg', 'image/gif', 'image/png', 'image/bmp']

  img_uploader.on('beforeFileQueued', function(file) {

    fileType.some(function(name) {
      return file.type === name
    })

    ? '' : alert('请上传正确的图片!')

  })

  img_uploader.on('uploadSuccess', function(file, res) {
    callback(file, res)
  })

  img_uploader.on('uploadError', function(file, reason) {
    console.log(reason);
  })

  img_uploader.on('uploadComplete', function(file) {
    img_uploader.reset()
  })

}

html

<div id="zTu">图片</div>

javascript

var coverImage; 
initImageUploader();
function initImageUploader(){
  var fileUrl = 你想上传的地址;
  uploadImages('#imagePicker', fileUrl, function(file, res) {
   coverImage = res.url
   $('#zTu').get(0).innerHTML = '<div class="file-item thumbnail"><img style="max-height:180px" src="' + res.url + '" /></div>'
  })
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
js中将具有数字属性名的对象转换为数组
Mar 06 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 #Javascript
js实现拖拽上传图片功能
Aug 01 #Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 #jQuery
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 #Javascript
使用JavaScript进行表单校验功能
Aug 01 #Javascript
SpringMVC简单整合Angular2的示例
Jul 31 #Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 #Javascript
You might like
社区(php&amp;&amp;mysql)四
2006/10/09 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
ThinkPHP模型详解
2015/07/27 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
Bootstrap框架安装使用详解
2017/01/21 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
解读! Python在人工智能中的作用
2017/11/14 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
python装饰器练习题及答案
2019/11/01 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
Eclipse面试题
2014/03/22 面试题
班班通项目实施方案
2014/02/25 职场文书
白血病捐款倡议书
2014/05/14 职场文书
供电工程专业求职信
2014/08/09 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers