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 相关文章推荐
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
jQuery的事件预绑定
Dec 05 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
js 函数性能比较方法
Aug 24 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
使用重写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与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
ucenter通信原理分析
2015/01/09 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
如何使用php实现评委评分器
2015/07/31 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
PHP强制转化的形式整理
2020/05/22 PHP
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
python读取LMDB中图像的方法
2018/07/02 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
使用python实现kNN分类算法
2019/10/16 Python
使用python实现名片管理系统
2020/06/18 Python
Python中pass的作用与使用教程
2020/11/13 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
品质口号大全
2014/06/17 职场文书
应聘护士求职信
2014/07/21 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
感谢信格式范文
2015/01/22 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书