【ajax】jquery.ajax上传文件

Continue Read..

Simple HTML

<input type="file" id="one-specific-file" name="one-specific-file">

Use as little as

$('#one-specific-file').ajaxfileupload({
  action: '/upload.php'
});

or as much as

$('input[type="file"]').ajaxfileupload({
  action: '/upload.php',
  valid_extensions : ['md','csv'],
  params: {
    extra: 'info'
  },
  onComplete: function(response) {
    console.log('custom handler for file:');
    alert(JSON.stringify(response));
  },
  onStart: function() {
    if(weWantedTo) return false; // cancels upload
  },
  onCancel: function() {
    console.log('no file selected');
  }

});

参考网址 https://github.com/jfeldstein/jQuery.AjaxFileUpload.js

jquery.ajaxfileupload.zip

【jquery】单选框选中事件

Continue Read..
$(function(){
$("input[name='level']").click(function(){
console.log(123);
getPriceAndRatio($('input[name="level"]:checked').val(), 0, 0);
});
});

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

【JS】计算时间之间的日期

Continue Read..
var endTime = $("#end_date_time").val();//2018-07-20 03:30
endTime = Math.floor(new Date(endTime + ':00').getTime() / 1000);

var nTime = endTime - startTime;
var days =Math.floor(nTime/(24 * 3600));

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

【tui.editor】使用和修改上传

Continue Read..

 

首先调用这些js css(有些是不需要的,自己删)

 <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>

<script>window.jQuery || document.write('<script src="/sta/dist/js/tui-editor/js/jquery-1.11.0.min.js"><\/script>')</script>

<script src="/sta/dist/js/tui-editor/lib/markdown-it/dist/markdown-it.js"></script>

<script src="/sta/dist/js/tui-editor/lib/toMark/dist/toMark.js"></script>

<script src="/sta/dist/js/tui-editor/lib/tui-code-snippet/dist/tui-code-snippet.js"></script>

<script src="/sta/dist/js/tui-editor/lib/tui-color-picker/dist/tui-color-picker.js"></script>

<script src="/sta/dist/js/tui-editor/lib/codemirror/lib/codemirror.js"></script>

<script src="/sta/dist/js/tui-editor/lib/highlightjs/highlight.pack.js"></script>

<script src="/sta/dist/js/tui-editor/lib/squire-rte/build/squire-raw.js"></script>

<link rel="stylesheet" href="/sta/dist/js/tui-editor/lib/codemirror/lib/codemirror.css">

<link rel="stylesheet" href="/sta/dist/js/tui-editor/lib/highlightjs/styles/github.css">

 

<script src="/sta/dist/js/tui-editor/lib/plantuml-encoder/dist/plantuml-encoder.js"></script>

<script src="/sta/dist/js/tui-editor/lib/raphael/raphael.js"></script>

<script src="/sta/dist/js/tui-editor/lib/tui-chart/dist/tui-chart.js"></script>

<script src="/sta/dist/js/tui-editor/dist/tui-editor-Editor-all.js"></script>

<link rel="stylesheet" href="/sta/dist/js/tui-editor/dist/tui-editor.css">

<link rel="stylesheet" href="/sta/dist/js/tui-editor/dist/tui-editor-contents.css">

<link rel="stylesheet" href="/sta/dist/js/tui-editor/lib/tui-color-picker/dist/tui-color-picker.css">

<link rel="stylesheet" href="/sta/dist/js/tui-editor/lib/tui-chart/dist/tui-chart.css">

 

 

我的表单是用from 提交的,大家也可以直接ajax提交表单

 

<form action="/article/<?=$this->ectType?>/" id="id-form" class="form-horizontal form-validate" role="form"

                  method="post" onsubmit="return subF();">

  

                <div class="align-left">

 

                    <div class="form-group">

                        <label class="col-xs-2 control-label no-padding-right">内容</label>

                        <div class="col-xs-9" id="contentEditor"></div>

                        <textarea type="text"  hidden name="content" id="content" class="col-xs-6" rows="6"> </textarea>

                    </div>

     

                </div>

                <div class="clearfix form-actions">

                    <div class="col-md-offset-2 col-md-9">

                        <button class="btn btn-info" type="submit">

                            <i class="ace-icon fa fa-check bigger-110"></i>

                            提交

                        </button>

                    </div>

                </div>

            </form>

 

 

    <script class="code-js">

        var content = [];

        //这里需要注意,php需要传一个json对象过来,

        //$data['content'] = explode("\r\n", $data['content']);

        //$data['content'] = json_encode($data['content']);

 

        content = <?= $this->data['content']; ?>;

        

        //var content = [

        //    '| @cols=2:merged |',

        //    '| --- | --- |',

        //    '| table | table |',

        //    '```uml',

        //    'partition Conductor {',

        //    '  (*) --> "Climbs on Platform"',

        //    '  --> === S1 ===',

        //    '  --> Bows',

        //    '}',

        //    '',

        //    'partition Audience #LightSkyBlue {',

        //    '  === S1 === --> Applauds',

        //    '}',

        //    '',

        //    'partition Conductor {',

        //    '  Bows --> === S2 ===',

        //    '  --> WavesArmes',

        //    '  Applauds --> === S2 ===',

        //    '}',

        //    '',

        //    'partition Orchestra #CCCCEE {',

        //    '  WavesArmes --> Introduction',

        //    '  --> "Play music"',

        //    '}',

        //    '```',

        //    '```chart',

        //    ',category1,category2',

        //    'Jan,21,23',

        //    'Feb,31,17',

        //    '',

        //    'type: column',

        //    'title: Monthly Revenue',

        //    'x.title: Amount',

        //    'y.title: Month',

        //    'y.min: 1',

        //    'y.max: 40',

        //    'y.suffix: $'

        //].join('\n');

 

        var editor = new tui.Editor({

            el: document.querySelector('#contentEditor'),

            previewStyle: 'vertical',

            height: '300px',

            initialEditType: 'wysiwyg',

            useCommandShortcut: true,

            initialValue: content.join('\n'),

            hooks: {

                addImageBlobHook: addImageBlobHook.bind(this),

            },

            exts: ['scrollSync', 'colorSyntax', 'uml', 'chart', 'mark', 'table', 'taskCounter']

        });

        console.log(editor);

 

        function addImageBlobHook(blob, callback) {

 

            const data = new FormData();

            //blob就是一个文件对象

 

点击查看原图

            data.append('upfile', blob);

            //console.log(data, $('#cuzn123')[0]);

 

         //console.log 打印data的时候确实为空,要用下面的方法打印,然后看php获取的值,之前一直用get,拿不到值,换了post就好了

            //console.log(data.has("upfile"));//true

            console.log(data.get("upfile"));

            //data.forEach(function(file){

            //    console.log(file);

            //});

            

            $.ajax({

                url: "/index/upToQiniu/",

                type: "POST",

                data: data,

                //dataType: 'JSON',

                processData: false,

                contentType: false,

                //async: false,

                cache: false,

                //headers: {

                //    'Content-Type': 'multipart/form-data'

                //},

                success: function (result) {

                    result = JSON.parse(result);

                    console.log(typeof result);

                    console.log("result['state'] : " + result["state"]);

                    console.log("result.state : " + result.state);

                    if (result["state"] == 'SUCCESS') {

                        //这里是生成htpp模式的图片地址(我这里是七牛返回的一个key,需要转换)

                        var image = MyCommon.getViewImage(result["key"]);

                        //这里是插件自带的回调函数

                        callback(image, 'alt text');

                    }

                    console.log(result);

                },

                error: function (e) {

                    console.log(e);

                }

            });

            //$.get('/upload-images', data, config) .then(response => { callback(response.data.url, ''); }) .catch(error => { })

        }

        

        //提交表单之前 把值插入textarea 里面

        function subF() {

            $("#content").val(editor.getMarkdown ());

            //console.log('editor.getHtml () : ' + editor.getHtml ());

            //console.log('editor.getValue () : ' + editor.getValue ());

            //console.log('editor.getMarkdown () : ' + editor.getMarkdown ());

            return true;

        }

    </script>

 

 try {

$ret = QiNiu::upload($_FILES["upfile"]["tmp_name"]);

$result = [

'state' => 'SUCCESS',

'key' => $ret,

];

} catch (Exception $e) {

$result = [

'state' => $e->getMessage(),

];

}

echo json_encode($result);

 

 

最后要显示数据库的值需要用Markdown转HTML的插件 showdown

 点击查看原图

<script src="/sta/dist/js/showdown-1.8.6/dist/showdown.js"></script>

<div class="row">

    <div class="col-xs-12" id="content">

    </div>

</div>

 

<!--js:start-->

<script>

 

    //这里的php只需要 $data['content'] = json_encode($data['content']);

 

    var content = '';

    <?php  if (!empty($this->data['content'])) { ?>

    content = <?= $this->data['content']; ?>;

    <?php } ?>

    var converter = new showdown.Converter({

            "omitExtraWLInCodeBlocks":true,

            "noHeaderId":false,

            "prefixHeaderId":"",

            "ghCompatibleHeaderId":true,

            "headerLevelStart":1,

            "parseImgDimensions":true,

            "simplifiedAutoLink":true,

            "excludeTrailingPunctuationFromURLs":false,

            "literalMidWordUnderscores":true,

            "strikethrough":true,

            "tables":true,

            "tablesHeaderId":false,

            "ghCodeBlocks":true,

            "tasklists":true,

            "smoothLivePreview":true,

            "smartIndentationFix":false,

            "disableForced4SpacesIndentedSublists":false,

            "simpleLineBreaks":false,

            "requireSpaceBeforeHeadingText":false,

            "ghMentions":false,"extensions":[],"sanitize":false

        }),

        //text = '# hello, markdown!',

        html = converter.makeHtml(content);

    $("#content").html(html);

</script>

<!--js:end-->

 点击查看原图

 

参考网站

https://qiita.com/dala00/items/93f96dfbf63e71765562  这个是addImageBlobHook使用的,整个google就这个日本鬼子写了这个

 

这个是官方的文档,硬是想打死这个作者

https://nhnent.github.io/tui.editor/api/latest/ToastUIEditor.html#getHtml  

https://github.com/nhnent/tui.editor#-examples

 

showdown 参考网址

https://github.com/showdownjs/showdown

https://blog.csdn.net/yzf913214/article/details/54607897 

 

 

tui-editor.zip showdown-1.8.6.zip

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

【js】数字转汉字

Continue Read..
function DX(n) {
    if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n))
        return "数据非法";
    var unit = "千百拾亿千百拾万千百拾元角分", str = "";
    n += "00";
    var p = n.indexOf('.');
    if (p >= 0)
        n = n.substring(0, p) + n.substr(p+1, 2);
    unit = unit.substr(unit.length - n.length);
    for (var i=0; i < n.length; i++)
        str += '零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i)) + unit.charAt(i);
    return str.replace(/零(千|百|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/(亿)万|壹(拾)/g, "$1$2").replace(/^元零?|零分/g, "").replace(/元$/g, "元整");
}

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

vue.js 组件中filter后的数据,实时更新

Continue Read..

组件中的数据在模板显示后,变动数据发现不能更新的情况,可以做下面的检查

1、组件标签属性需要动态绑定v-bind:key="val"

2、VUE中加一个动态改变的变量time,动态绑定到组件标签对,props到组件中,在其他地方更新time就可以了

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

vue.js filter处理后返回显示html

Continue Read..
类似这样的代码
{{ description | filterfunction }}


filterfunction 返回一段html,
显示代码类似
<div v-html="description|filterfunction"


这样是不行的,应该这样

<div v-html="$options.filters.filterfunction(description)">


声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

时间比较,判断:当天/昨天/昨天以前/隔年

Continue Read..
<script type="text/javascript">
var vd = new Date('2016/05/01 08:26:23');
var vy= vd.getFullYear();
var vm=vd.getMonth()+1;
var vda=vd.getDate();
var vh= vd.getHours();
var vmi= vd.getMinutes()

var d = new Date();
var cy=d.getFullYear();
var cm=d.getMonth() +1;
var cd=d.getDate();

if(vy==cy){
   var monthFlag = cm== vm? 1 : 0;
   var dateFlag = cd- vda;
   document.write(monthFlag+'--'+dateFlag+'>');
   if (monthFlag == 1 && dateFlag == 0) {
        document.write('今天');
   } else if (monthFlag == 1 && dateFlag == 1) {
        document.write('昨天');
   } else {
        document.write('昨天以前');
   }
}else{
   document.write('隔年');
}

</script>

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

js 头像图片过滤器

Continue Read..
html:
<div class="user-icon user-icon-bg">
               <img :src="item.targetAnswerer.userInfo.avatarId | getThumbnail || 'images/mine/default-avatar1.png'">
               <div class="master" v-if="item.answerer.isAnswer == 1"></div>
           </div>

js:
Vue.filter("getThumbnail", function (url) {
            if (!url) {
                return "http://apr.qiniu.toon.mobi/FqnjLn8FzsD52rZatXzYKgwftS6A";
            }
            //静态服务器头像
            if (url.indexOf("http://img.icon.systoon.com") >= 0 || url.indexOf("http://static1.systoon.com") >= 0) {
                return url;
            }
            var w = 80, h = 80, q = 100;
            var path = url.substr(0, url.lastIndexOf("."));
            var mimeType = url.substring(url.lastIndexOf("."), url.length);
            return path + "_" + w + "_" + h + "_" + q + "_1" + mimeType;
        });

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

js 移到端打电话

Continue Read..
<p class="rules">一键拨打客服电话:<span class="blue" @click="toCall">010-84871686</span></p>

toCall: function(){

var ifr = document.createElement('iframe');
document.body.appendChild(ifr);
ifr.src = 'tel:' + '01084871686';
setTimeout(function(){
ifr.remove();
}, 100);
}

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权