zoukankan      html  css  js  c++  java
  • 上传图片

    html

    <p class="remove"><label class="zfile btn btn-primary" id="imagePicker">添加照片</label></p>   //触发按钮
    <div id="zTu">图片</div>  //放置图片的地方

    js

    function initImageUploader(activityID){
        var fileUrl='{{ .STATIC_FILE_HOST }}/api/v1/image/upload?type=exchangeAward&uid={{ .COMPANYID }}_'+activityID; //把base64转换本地的地址
        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>'
        })
      }

    调用uploadImages方法

    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: {
                 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()
        })
    
    }
  • 相关阅读:
    好想再吻一次你的唇
    我会永远永远的爱你,直到你不爱我的那一天
    我会永远永远的爱你,直到你不爱我的那一天
    回到你身边
    回到你身边
    两只公蚊子的故事
    两只公蚊子的故事
    洛谷P1090: 合并果子
    洛谷 P1288 :取数游戏II
    洛谷P1164 :小A点菜
  • 原文地址:https://www.cnblogs.com/SunShineM/p/6587590.html
Copyright © 2011-2022 走看看