2013年06月15日

Chrome可以其它浏览器拖拽图片

Chrome永远都是走在技术前线，总会有些惊人的表现，最近我在做一个拖拽上传图片功能时发现Chrome竟然可以直接从其它浏览器拖拽图片。

普通拖拽事件，各个浏览器都识别从本地磁盘拖拽的文件

HTML5的拖拽drop事件让Web应用看到了两点，然而在普通的drop事件里，多数浏览器只支持从本机电脑磁盘上拖拽到浏览器，例如:

JavaScript代码

// 获取要触发drop事件的DIV
var du = $('dragUpload'); 
 
// 根据ID获取对像
function $(id) {
  return document.getElementById(id);
}
 
// 把拖拽到网页上的图片显示到页面上
function displayImage (container,dataURL) {
  var img = document.createElement('img');
  img.src = dataURL;
  container.appendChild(img);
}
 
// 拖放释放主要处理函数
du.addEventListener('drop', function (e) {
  e.stopPropagation();
  e.preventDefault();
  du.className = du.className.replace('drag-over','');

  // 获取拖放文件 一个数组
  var files = e.dataTransfer.files;  
  handleFiles(files);  
}, false);

...

READ ALL

2013年06月08日
JavaScript判断一个变量是对象还是数组
typeof都返回object
在JavaScript中所有数据类型严格意义上都是对象，但实际使用中我们还是有类型之分，如果要判断一个变量是数组还是对象使用typeof搞不定，因为它全都返回object
```
var o = {name: '琼台博客'};
var a = ['reg', 'blue'];
 
console.log( ' o typeof is ' + typeof o);
console.log( ' a typeof is ' + typeof a);
```
Output
```
o typeof is object
a typeof is object   
```
...
READ ALL
2013年06月04日
JavaScript使用eval将字符转换为程序代码
首先声明，不推荐使用eval，这是非常危险且不稳定因素太多的做法
近期项目有这样一个需求，从服务器端返回的JSON里有一段JavaScript代码，需要在浏览器端执行它，把结果填充到一个数组里，最后toString回一个字符串，然后再提交到服务器保存。
首先，已有一个列表:
```
var list = [
  {
    name: '张三',
    fun: function () {
      console.log(this.name);
    }
  }
];
```
而服务器可能读取某个js文件，内容格式如下:
```
{
  name: '李四',
  fun: function () {
    console.log(this.name);
  }
}
```
...
READ ALL
2013年06月04日
JavaScript声明对象时属性名加引号与不加引号的区别
这个问题很好有人关注，但我每一次在声明一个对象属性的时候都要想想要不要给属性加引号？加引号与不加引号有什么区别?
其实在JavaScript中，加引号与不加引号都是一样用，都是有效的。如
```
var obj = {
  name: '琼台博客',
  'age': 18,
};
 
console.log('name: ' + obj.name);
console.log('age: ' + obj.age);
```
Output:
```
name: 琼台博客
age: 18
```
哪在什么时候有区别呢？在你使用一些非合法命名规则的时候，就显的有必要了，比如
...
READ ALL

2013年06月03日

jQuery对象与JSON互相转换

JSON串的方便以及通用性逐渐成为一种规范。jQuery有一个插件jquery-json可以轻易的实现对象与JSON互相转换。

对象转JSON

主要使用toJSON()方法

var obj = {
  name: '琼台博客',
  url: 'www.qttc.net',
  desc: '个人技术日志',
  author: 'Nicholas Lee'
};
 
var json = $.toJSON(obj);
console.log(json);

Output:

{"name":"琼台博客","url":"www.qttc.net","desc":"个人技术日志","author":"Nicholas Lee"}

...

READ ALL

2013年05月30日
IE input file隐藏不能上传文件解决方法
又是IE的一个问题，近来是跟IE浏览器磕上了，这个问题发现不少人也遇到过，实在蛋疼。但今天这个不能算是一个bug，因为IE可能是从安全角度上考虑结果导致的。一步步来解读。
普通上传例子
首先普通的文件上传呢，很简单，前端代码
index.html
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>file标签隐藏</title>

  </head>
  <body>
    <form action="http://192.168.1.99/upload/upload.php" method="post" enctype="multipart/form-data">
      <input onchange="document.forms[0].submit();" type="file" name="file" />
    </form>
  </body>
</html>
```
...
READ ALL
2013年05月29日
IE9以下自定义命名标签方法
自定义命名标签
在早期，HTML网页头部常常这么写，如:
HTML
```
<html xmlns="http://www.w3.org/1999/xhtml">
```
xmlns是值HTML文档所用到的命名空间，通常都是w3c的规范，所以都指向这个地址。如今HTML不少站点为了特殊需求，都添加不少自定义的命名标签。
比如:
```
<lee id="lee">这里是自定义lee标签</lee>
```
样式定义
```
lee {
  display:block;
  width:300px;
  height:100px;
  background:red;
  border:5px solid #000;
  color:yellow;
}
```
...
READ ALL

2013年05月28日

AttributeError 'module' object has no attribute 'setdefaultencoding'

Python的字符集处理实在蛋疼，目前使用UTF-8居多，默认使用的字符集是ascii，所以我们需要改成utf-8

查看目前系统字符集

import sys
print sys.getdefaultencoding()

Output:

[root@lee ~]# python a.py 
ascii

修改成utf-8

import sys
 
sys.setdefaultencoding('utf-8')
 
print sys.getdefaultencoding()

执行:

[root@lee ~]# python a.py 
Traceback (most recent call last):
  File "a.py", line 4, in <module>
    sys.setdefaultencoding('utf-8')
AttributeError: 'module' object has no attribute 'setdefaultencoding'

...

READ ALL

2013年05月26日
Linux crontab容易犯错的地方
Linux的crontab是非常好用的一个计划任务，最小颗粒度是分钟，最近使用crontab的时候发现服务器负载居然到达了七八十
```
[root@test01 ~]# uptime
 16:16:05 up 149 days,  5:17,  1 user,  load average: 75.00, 79.01, 87.05
```
高的吓人，通过top命令看了一下，发现我添加进crontab的脚本居然执行了无数个
怎么回事？
crontab格式
m h dom mon dow command
- m: 分钟，0-59
- h: 小时，0-23
- dom: 日期，1-31
- mon: 月份，1-12
- dow: 星期，0-6，0为星期天
- command: 命令
...
READ ALL
2013年05月26日
HTML5的input color系统颜色选择器
前两天，我写了一篇《推荐两款jQuery色盘选择器》介绍，那是使用JavaScript实现的色盘，今天我给大家介绍HTML5的色盘选择器。HTML5有一个input类型为color，即颜色选择器。
认识html5中的color
```
<input type="color" />
```
Chrome效果
Opera
...
READ ALL

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

普通拖拽事件，各个浏览器都识别从本地磁盘拖拽的文件

typeof都返回object

对象转JSON

普通上传例子

自定义命名标签

认识html5中的color