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 ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 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中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
domReady的实现案例
2016/11/23 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
pytyon 带有重复的全排列
2013/08/13 Python
python距离测量的方法
2018/03/06 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
UNIX文件类型
2013/08/29 面试题
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
幼儿教师工作感言
2014/02/14 职场文书
家长学校实施方案
2014/03/15 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android