基于七牛 API 的文件上传
Apr 7, 2015 · 1 分钟阅读

$.ajax({
  url: uptoken
})
  .done(function(data) {
    var uploader = Qiniu.uploader({
      runtimes: 'html5,flash,html4', //上传模式,依次退化
      browse_button: 'pickfiles', //上传选择的点选按钮,**必需**
      uptoken: data.token, //uptoken
      domain: 'http://7xo7gu.com1.z0.glb.clouddn.com/', //bucket 域名,下载资源时用到,**必需**
      get_new_uptoken: false, //设置上传文件的时候是否每次都重新获取新的token
      max_file_size: '10mb', //最大文件体积限制
      flash_swf_url: 'plupload/Moxie.swf', //引入flash,相对路径
      max_retries: 3, //上传失败最大重试次数
      chunk_size: '4mb', //分块上传时,每片的体积
      filters: {
        mime_types: [{
          title: "语音文件",
          extensions: "mp3"
        }]
      },
      auto_start: true, //选择文件后自动上传,若关闭需要自己绑定事件触发上传,
      init: {
        QueueChanged: function(up) {
          //自定义路径
          for (var i = 0; i < up.files.length; i++) {
            up.files[i].name = data.paths['brand.audio'] + md5(up.files[i].name) + '.' + up.files[i].name.split('.')[up.files[i].name.split('.').length - 1];
            path = up.files[i].name;
          }
        },
        FileUploaded: function(up, file, info) {
          var domain = up.getOption('domain');
          var res = $.parseJSON(info);
          var sourceLink = domain + res.key; //获取上传成功后的文件的Url

          console.log('上传成功');
          // sourceLink = path; 使用自定义路径
        },
        UploadProgress: function() {
          $('#pickfiles').prop('disabled', true);
          console.log('上传中...');
        },
        Error: function(up, err, errTip) {
          console.log('上传失败');
        },
        UploadComplete: function() {
          $('#pickfiles').prop('disabled', false);
          console.log('上传完成');
        }
      }
    });
  });

see more: qiniu js-sdk

← Previous Post Next Post →

Ryun的博客
与其感慨路难行,不如马上出发。

atom css design git html javascript jekyll laravel life mac mobile optimization sublime tool vscode vue
mac

About

你好,❤朋友

这里是 Ryun 的博客 📝

📝记录了我学习 🔎的过程

作为一名前端攻城狮 🦁

希望能和大家一起 🔎

共同进步 🏃

🦁的特长:

  • HTML5
  • CSS3
  • JavaScript
  • Vue.js
  • 微信小程序
  • 熟练配合 Node.js、PHP 和 Laravel
  • 熟练使用各种开发和设计工具

🦁喜欢 🆒🆒的东西

对提升效率和美感的事物有兴趣 😋

欢迎 👏交流


see this hugo-theme-dream-ink