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+XML 操作
Sep 20 Javascript
Javascript String对象扩展HTML编码和解码的方法
Jun 02 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
vue实现列表的添加点击
Dec 29 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
表单内同名元素的控制
2006/11/22 Javascript
可以文本显示的公告栏的js代码
2007/03/11 Javascript
又一个小巧的图片预加载类
2007/05/05 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
python进阶教程之动态类型详解
2014/08/30 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
用python生成1000个txt文件的方法
2018/10/25 Python
python3 反射的四种基本方法解析
2019/08/26 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
电子商务专业自荐信
2014/06/02 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL