图片文件上传相关的前端知识

2017-04-28, 星期五 |
tutorial前端

用传统的DOM选择器获取选中文件:

var selectedFile = document.getElementById('input').files[0];

你如果允许用户选择多个文件,只用在input元素上加multiple属性:

<input type="file" id="input" multiple onchange="handleFiles(this.files)">

在这种情况下,传入handleFiles()函数文件列表包含一个用户选中文件的File对象。

使用click()方法来使用隐藏的file元素

假设有如下的HTML

<input type="file" id="fileElem" multiple accept="image/*" style="display:none" 
onchange="handleFiles(this.files)">
<a href="#" id="fileSelect">Select some files</a>

处理click事件的代码像这样:

var fileSelect

让 node 应用自动重启

2017-02-23, 星期四 |
秘诀解决方案前端

node 的 web 框架 expresssails 下的应用在启动时都不会因为代码的更改自动重启,开发时每次改一下代码手动重启一下应用很相当的麻烦,利用工具 nodemon 可以解决这个问题。

安装 nodemon

$ npm i -g nodemon

启动并监听文件的变化

$ nodemon ./app.js

参考 http://stackoverflow.com/questions/18687818/auto-reloading-a-sails-js-app-on-code-changes

利用 gulp-pug 自动编译出错停止监听的解决办法

2017-02-21, 星期二 |
秘诀前端

用 gulp-pug 编译 pug 文件很方便,不过也会出现因 pug 文件中语法出错而编译出错的情况,这时 gulp.watch 就停止了,需要手动重新启动非常的不方便。利用插件 gulp-notify 可以很方便的解决这个问题。

var gulp = require('gulp'),
    pug = require('gulp-pug'),
    notify = require('gulp-notify');

gulp.task('pug', function(){
    return gulp.src('pug/*/*.pug')
        // .pipe(plumber())
        .pipe( pug({ pretty: true }).on('error', notify.onError( (error) => { return `pug went wrong, ${error}`; } )) )
        .pipe(gulp.dest('page'));
});

这样,gulp.watch 进程就不会停止了,还会继续监听 pu

自定义终端提示文字

2017-02-10, 星期五 |
linuxtutorial

可以利用修改环境变量 PS1 来修改终端提示文字,例如

$ export PS1="\u@\h:\W$ "

将上述命令增加到 ~/.bashrc 文件中。

变量 PS1 中的变量及其的具体含义如下

  • \d – Current date
  • \t – Current time
  • \h – Host name
  • # – Command number
  • \u – User name
  • \W – Current working directory (ie: Desktop/)
  • \w – Current working directory with full path (ie: /Users/Admin/Desktop/)

Visual Box ubuntu 共享文件夹没有权限的问题

2017-02-10, 星期五 |
linux秘诀

虚拟机中安装的是 ubuntu, 和主机共享文件夹后,非 root 的普通用户不能进入这个共享文件夹。如果想要让普通用户进入,需要将该用户加入 vboxsf 组,假设用户名为 foo, 共享文件夹名为 sf_uShare,那么将用户 foo 加入 vboxsf 组的命令是

# usermod -aG vboxsf foo

可以使用 groups 查看 foo 是否已经加入 vboxsf 组

$ groups foo

重启虚拟机后,用户 foo 现在可以进入 /media/sf_uShare 目录了。

更多参考 stackexchange