吾爱编程 网站首页 程序人生 WEB前端 查看内容

关于JavaScript进行图片上传的代码

2019-3-12 21:06| 发布者: admin| 查看: 1188| 评论: 0

摘要: 本文实例为大家分享了js图片上传的具体代码,供大家参考,具体内容如下js封装的方法function uploadImages(picker, url, callback) { var img_uploader = WebUploader.create({ auto: true, server: url, pick: p ...
本文实例为大家分享了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 + '" data-bd-imgshare-binded="1"></div>'
  })
 }


以上就是本文的全部内容,希望对大家的学习有所帮助

路过

雷人

握手

鲜花

鸡蛋
返回顶部

平台简介

吾爱编程网:http://www.52pg.net/是IT技能学习交流平台,我们提供了丰富的移动端开发、php开发、web前端开发、android开发、Java开发、Python开发、大数据开发、区块链开发、人工智能开发以及html5等大量的实战视频教程资源。(如果我们有侵犯了您权益的资源请联系我们删除)

点击这里给我发消息|Archiver|手机版|小黑屋|站点地图|吾爱编程  |网站地图

Powered by Discuz! X3.2??? 2017-2020 Comsenz Inc.??吾爱编程网