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 相关文章推荐
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
使用socket.io实现简单聊天室案例
Jan 02 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 Javascript
修改Vue打包后的默认文件名操作
Aug 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正则校验用户名介绍
2008/07/19 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
javascript常用对话框小集
2013/09/13 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
python 实现端口扫描工具
2020/12/18 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
HTML5之语义标签介绍
2016/07/07 HTML / CSS
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
"火柴棍式"程序员面试题
2014/03/16 面试题
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
什么是就业协议书
2014/04/17 职场文书
端午节演讲稿
2014/05/23 职场文书
质量月口号
2014/06/20 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
争先创优心得体会
2014/09/12 职场文书
六查六看心得体会
2014/10/14 职场文书
2014年化验员工作总结
2014/11/18 职场文书
《法国号》教学反思
2016/02/22 职场文书
python四种出行路线规划的实现
2021/06/23 Python
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技