博客 (5)

前端引用 jquery、jquery-ui（或 jquery.ui.widget），以及 jquery.fileupload.js

$('#xxx').fileupload({
    url: 'FileUpload',
    add: function (e, data) {
        console.log('add', data);
        data.submit();
    },
    success: function (response, status) {
        console.log('success', response);
        toastr.success('上传成功！文件名：' + response);
    },
    error: function (error) {
        console.log('error', error);
        toastr.error("上传失败：" + error.responseText);
    }
});

服务端接收文件：

[HttpPost]
public ActionResult FileUpload([FromForm(Name = "files[]")] IFormFile file)
{
    try
    {
        return Ok(file.FileName);
    }
    catch(Exception ex)
    {
        return BadRequest(ex.Message);
    }
}

此处 Name = "files[]" 值是由 <input type="file" name="这里定的" />

如果 input 没有指定 name，那么一般为 file[]，或者在 Chrome 的开发者工具中，切换到 Network 标签页，选中 post 的目标请求，在 Headers 的 Form Data 中可以看到 name="xxx"。

引用

jQuery、moment.js、daterangepicker

例子

$('.x_dates').daterangepicker({
    "timePicker": false, // 是否显示时间
    //"dateLimit": {
    //    "days": 7 // 可选中的最大区间（天）
    //},
    "ranges": { // 快捷栏
        "今天": [moment(), moment()],
        "昨天": [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        "最近 7 天": [moment().subtract(6, 'days'), moment()],
        "最近 30 天": [moment().subtract(29, 'days'), moment()],
        "本月": [moment().startOf('month'), moment().endOf('month')],
        "上个月": [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    },
    startDate: daterangepicker_startDate, // moment(),
    endDate: daterangepicker_endDate, // moment(),
    autoUpdateInput: true,
    "locale": {
        "direction": "ltr",
        "format": "YYYY-MM-DD", // YYYY-MM-DD HH:mm
        "separator": " 至 ",
        "applyLabel": "确定",
        "cancelLabel": "取消",
        "fromLabel": "From",
        "toLabel": "To",
        "customRangeLabel": "自定义",
        "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
        "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        "firstDay": 1
    }
}, function (start, end, label) {
    //console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
    fn_daterangepicker_changed(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'))
});

官网（含配置工具）

http://www.daterangepicker.com/

GitHub

https://github.com/dangrossman/daterangepicker

配置工具

下载的包中的 demo.html

Demo

https://awio.iljmp.com/5/drpdemo

jquery.barrager.js 是一款优雅的网页弹幕插件，支持显示图片，文字以及超链接。支持速度、高度、颜色、数量等自定义。

使用方法参官方网站：http://yaseng.org/jquery.barrager.js/

jquery.barrager.min.js 会报错，改用 jquery.barrager.js（版本 1.1）

实战示例：https://xoyozo.net/Demo/DanMu

该示例重写了部分 CSS 样式。

注：info 属性支持 HTML，因此要自己过滤危险标签，建议仅保留 <img /> 标签

如果要显示在指定区域，可以使用 bottom 属性，例：

bottom: (Math.random() * (0.95 - 0.5) + 0.5) * $(window).height()

建议加 loading 锁，以适应网络不通畅的环境（ajax 时间超过定时间隔会导致请求到重复的数据）

跨域环境可以使用 JSONP 来实现，服务器端需设置 Access-Control-Allow-Origin 为 *。

HTML5 Sortable 是一款使用原生 HTML5 drag 和 drop API 来对列表或网格进行排序的 jQuery 插件。

下载和使用：官网

步骤：

1、给 <ul /> 添加 sortable 样式类

2、引入 jquery.sortable.js

3、$('.sortable').sortable();

通过绑定 sortupdate 事件来获取排序后的 DOM 位置，示例：

$('.sortable').sortable().bind('sortupdate', function (event, ui) {
    var item = $(ui.item[0]);
    var prev = item.prev();

    $.post(window.location.pathname, {
        xdo: 'fn_sort',
        cid: item.data('cid'),
        prev: prev.data('cid') // 可能为 undefined
    }, function (json) {
        if (json.result.success) {
        } else {
            toastr['error'](json.result.info);
        }
    }, 'json');
});

收录了一些个人觉得不错的网页开发插件。

由于插件更新频繁，本页如有错误请指正，也欢迎告知更多功能强大、使用方便的插件。