前端的例子

页面加载音视频播放

需求

有一个页面,需要加载一个mp3,背景是gif图,在mp3未加载好的时候,需要加一个loading...

html

<audio id="audio" src="{{ getCdnUrl($song->music_url) }}" autoplay="autoplay" preload="auto" loop>

javascript

// 获得视频地址
var audio = document.getElementById("audio");
// 打开loadding
var index = layer.open({type: 2,shadeClose: false});
// 增加 canplaythrough 监听事件
audio.addEventListener('canplaythrough', function(){
    // 取消loadding
    layer.close(index);
    // 开始播放
    audio.play()
});

一开始用的是canplay但是这个有问题就是,歌曲还没下载完,事件就触发了..同时loadding也没了..就换了canplaythrough

注意事项

  • 这里用的layer.js的库来做loadding,注意这里一定要用mobile端的js库,同时引入zepto.js

参考文献

laravel 安装使用select2

npm安装select2

npm install
npm install select2 --save-dev

修改bootstrap.jsapp.scss

try {
    .....
    window.select2 = require('select2');
    ....
} catch (e) {}
@import "~select2/dist/css/select2.min";

编译

npm run production

html

<div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">分类</label>
    <select class="js-example-basic-multiple" style="width: 100%;" name="category[]" multiple="multiple">
        @forelse($categories as $category)
            <option value="{{ $category->id }}" >{{ $category->name }}</option>
        @empty
        @endforelse
    </select>
</div>

js

<script>
    $(document).ready(function () {
        $('.js-example-basic-multiple').select2();
    });
</script>

Ueditor增加字号

需求是这样的,ueditor中默认没有15px字号,但是页面又要用,由于ueditor的css是行内样式,所以,很难改变样式.只能从编辑器入手了..

修改ueditor.all.js

在fontsize数组中加入15即可..

'fontsize': [10, 11, 12, 14, 15, 16, 18, 20, 24, 36]

参考文章

ajax同时上传文件和表单

很多时候,我们会遇到一种情况..表单和中有文件和文本..文本和表单是一个整体..这时候,如何用ajax一次性提交上去呢

html

<form id="song-form" method="post" action="{{ route('songs.upload.store') }}" enctype="multipart/form-data">
    <input type="text" name="name" id="name" placeholder="填写音乐名称"><label id="song_tip">* 音乐名称需要在50字符以内</label>
    <input type="text" name="author" id="author" placeholder="填写歌手名"><label id="singer_tip">* 歌手名称需要在50字符以内</label>
    <input type="file" name="mp3" id="mp3" placeholder="MP3" id="mp3" multiple="multiple"><label id="singer_tip">请选择MP3</label>
    <input type="file" name="cover" id="cover" class="hidden" multiple="multiple"/>
</form>

JavaScript

这里主要是监听mp3和cover这两个标签,如果有变动就往filearr数组中添加覆盖元素

var filearr = [];
var mp3 = document.getElementById('mp3');
var cover = document.getElementById('cover');
mp3.onchange = function(){
    var files = this.files;
    if(!files.length)return;
    for(var i = 0;i<files.length;i++){
        filearr['mp3'] = files[i]
    }
}
cover.onchange = function(){
    var files = this.files;
    if(!files.length)return;
    for(var i = 0;i<files.length;i++){
        filearr['cover'] = files[i]
    }
}
var category = [];

提交函数

function sub(){
    // 因为这里传文件需要formdata
    // 把文件放入formData
    var formData = new FormData();
    formData.append("cover", filearr.cover);
    formData.append("mp3", filearr.mp3);
    // input表单的值存入formData
    formData.append("name", $('#name').val());
    formData.append("author", $('#author').val());
    formData.append("category", category);
    $.ajax({
        url: '{{ route('songs.upload.store') }}',
        type: 'POST',
        cache:false,         //不设置缓存
        processData: false,  // 不处理数据
        contentType: false,  // 不设置内容类型
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        data: formData,

    }).done(function(data) {
        alert('上传成功')
    }).fail(function (data,status,xhr) {
       alert(data.responseJSON.msg)
    })
}

laravel npm run dev失败

$ npm run development

> @ development /Users/ailuoy/code/project/private/logistics-car
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

sh: cross-env: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ailuoy/.npm/_logs/2018-06-14T01_29_24_100Z-debug.log

yarn 安装 cross-env

yarn add cross-env --dev

参考文献