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 相关文章推荐
Javascript模块模式分析
May 16 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 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常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
php cookie 详解使用实例
2016/11/03 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
ExtJS下grid的一些属性说明
2009/12/13 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
javascript history对象详解
2017/02/09 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
python opencv人脸检测提取及保存方法
2018/08/03 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Python序列化pickle模块使用详解
2020/03/05 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
美国渔具店:FishUSA
2019/08/07 全球购物
小学生防溺水广播稿
2014/01/12 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
美术教师个人工作总结
2015/02/06 职场文书
会计做账心得体会
2016/01/22 职场文书
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js