舞林cuzn blog

【ajax】jquery.ajax上传文件

作者：cuzn【2018-11-24】
分类：JS & JQuery
1659 views
0 条评论
标签: JQuery

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..

作者：cuzn【2018-11-13】
分类：JS & JQuery
1990 views
0 条评论
标签: JQuery

$(function(){

$("input[name='level']").click(function(){

console.log(123);

getPriceAndRatio($('input[name="level"]:checked').val(), 0, 0);

});

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

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

Continue Read..

作者：cuzn【2018-7-17】
分类：JS & JQuery
3271 views
0 条评论
标签: JS

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));

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

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

Continue Read..

作者：cuzn【2018-7-4】
分类：JS & JQuery
2305 views
0 条评论
标签: JS jquery弹窗插件

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

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

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

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

</div>

提交

</button>

</div>

</form>

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

</div>

//这里的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>

参考网站

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

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

【js】数字转汉字

Continue Read..

作者：cuzn【2018-5-5】
分类：JS & JQuery
997 views
0 条评论
标签: JS

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, "元整");
}

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

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

Continue Read..

作者：舞林【2017-7-31】
分类：JS & JQuery
900 views
0 条评论

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

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

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

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

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

Continue Read..

作者：舞林【2017-7-24】
分类：JS & JQuery
854 views
0 条评论

类似这样的代码

{{ description | filterfunction }}

filterfunction 返回一段html，

显示代码类似

<div v-html="description|filterfunction"

这样是不行的，应该这样

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

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

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

Continue Read..

作者：sarah【2017-5-15】
分类：JS & JQuery
902 views
0 条评论

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>

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

js 头像图片过滤器

Continue Read..

作者：sarah【2017-3-14】
分类：JS & JQuery
962 views
0 条评论

html:

</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;

});

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

js 移到端打电话

Continue Read..

作者：sarah【2017-1-12】
分类：JS & JQuery
1093 views
0 条评论

<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);

}

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

舞林cuzn blog舞林cuzn blog

【ajax】jquery.ajax上传文件

【jquery】单选框选中事件

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

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

【js】数字转汉字

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

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

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

js 头像图片过滤器

js 移到端打电话

Hot Posts 热门文章

Lastest Posts 最新日志

Random Posts 随机文章

搜索

分类

链接