Index

[iMusic]

记录前端的一些功能，大部分是新增加的API，所以可能高级浏览器才支持。有些是特定浏览器才有的API（一般是chrome）

更新中

• 上传    2014/7/6
    自定义样式，参考：KISSY的Uploader
    :one:  传统上传。form，flash。
    :two:  XMLHttpRequest Level 2上传 支持多文件，显示进度条以及图片预览

  • 点击按钮上传
  • 拖动上传
  • 截图上传（目前仅chrome支持）

  可能用到的一些API或方法: 上传用到XHR2, FormData；拖动中用到dataTransfer接口和html5的拖放事件；预览图片用到FileReader的readAsDataURL转成base64或者用blob数据，截图仅chrome支持clipboardData.items。

• grunt 实现静态页面的自动刷新    2014/7/7

• 需安装的插件

  • grunt-contrib-connect // 现已集成livereload功能，所以不用另外安装connect-livereload插件
  • grunt-contrib-watch

• GruntFile配置

    module.exports = function(grunt){
      grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        connect: {
          options: {
            port: 8000,
            hostname: 'localhost',
            livereload: 35729
          },
          server: {
            options: {
              open: false, //true 自动打开面
              base: ['.'] //主目录，“.”表示GruntFile.js所在目录 src为下面的src目录
            }
          }
        },
  
        watch: {
          livereload: {
            options: {
              livereload: 35729
            },
            files: ['*.html']  // 设置监听的文件
          }
        }
      });
  
      grunt.loadNpmTasks('grunt-contrib-connect');
      grunt.loadNpmTasks('grunt-contrib-watch');
      grunt.registerTask('server', ['connect:server', 'watch']);
    }

• 最后grunt server，这样修改并保存被监听文件时，页面会自动刷新。

  Markdown的作者开发的F5工具也能实现类似功能，很方便，[F5官网]

• 跨域

• canvas图片的操作

• auido & video

• ...

---