2013年12月13日 星期五

jQuery實做輸入時清除input文字

以下程式碼可以完成 點擊input對話框時清除上面的文字,若沒輸入則還原


$(".box").focus(function(){ 
    $(this).addClass("focus"); 
    if($(this).val() ==this.defaultValue){   
        $(this).val("");            
    }  
}).blur(function(){ 
    $(this).removeClass("focus"); 
    if ($(this).val() == '') { 
        $(this).val(this.defaultValue); 
    } 
});

2013年11月28日 星期四

使用python實做AES加密

本篇是要註記一下如何使用python對檔案進行AES加密

所需工具
  1. python
  2. pycrypto
使用python的pycrpto工具就可以簡單的完成AES加解密的程序,要注意的地方是使用的key跟vi需要是16byte的倍數長度的字串,以及加密的區快也需要是16byte的倍數,所以若資料量不足16byte則建議用\0補足16byte。
加密執行完畢後會產生file.encrypt, file.key,file.encrypt就是加密後的檔案,file.key則放入解密需要的資訊,若遺失了檔案就無法解密了。解密執行完畢後則會產生出file.decrypt,就是解密後的檔案。

使用方法
python ./encrypt.py encrypt file
python ./encrypt.py decrypt file keyfile

import os, sys, json
from Crypto.Cipher import AES

if len(sys.argv) < 3 or ( sys.argv[1] == "decrypt" and len(sys.argv) != 4 ):
    print "command encrypt/decrypt file (keyfile)"
    
action = sys.argv[1]
file = sys.argv[2]

def encrypt(file):
    print "Encrypt now"
    if os.path.isfile(file):
        statinfo = os.stat(file)
        size = statinfo.st_size
        name = os.path.basename(file)
        key = genkey(file, size)
        obj = AES.new(key[0].decode('hex'), AES.MODE_CBC, key[1].decode('hex') ) # 將key轉回binrary格式再使用
        chunksize = 16*4 #單次加密區塊大小 必須為16的倍數
        encrypt_file = file + '.encrypt' # 加密後檔名
        with open(file, 'rb') as inputfile:
            with open(encrypt_file, 'wb') as outputfile:
                while True:
                    chunk = inputfile.read(chunksize) # 讀取原始檔案
                    if len(chunk) == 0: # 加密完畢後退出迴圈
                        break
                    elif len(chunk) % chunksize != 0: # 若剩餘長度不足大小 自動補\0
                        chunk += '\0' * (chunksize - len(chunk) % chunksize)
                    outputfile.write(obj.encrypt(chunk)) # 寫入加密後的資料
        print "Encrypt finish."
    else:
        print "Encrypt file not exist.";

def decrypt(file, key):
    print "Decrypt now"
    if os.path.isfile(file):
        f = open(key, 'r')
        key = eval(f.read()) # 讀取key
        f.close()
        obj = AES.new(key[0].decode('hex'), AES.MODE_CBC, key[1].decode('hex') ) # 將key轉回binrary格式再使用
        chunksize = 16*4*4 # 解密區塊大小 必須為16的倍數
        name = file.split('.')[0] + ".decrypt" # 解密後檔名
        with open(file, 'rb') as inputfile:
            with open(name, 'wb') as outputfile:
                while True:
                    chunk = inputfile.read(chunksize)
                    if len(chunk) == 0: # 解密完畢後退出迴圈
                        break
                    outputfile.write(obj.decrypt(chunk)) # 寫入解密後的資料
            outputfile.truncate(key[2]) # 將多餘的檔案去除
        
        print "Decrypt finish."
    else:
        print "Decrypt file not exist.";
        
def genkey(file, size):
    # 產生16byte長度的亂數
    # [key, vi, filesize]
    key = [ os.urandom(16).encode('hex'), os.urandom(16).encode('hex'), size] # 將亂數轉為字串方便存成文字檔
    keyfile = file + ".key"
    fk = open( keyfile, 'w')
    fk.write(json.dumps(key))
    fk.close()
    return key
    
if action == "decrypt":
    key = sys.argv[3]
    decrypt(file, key)
else:
    encrypt(file)

網站在google, yahoo搜尋不到的解決方式

最近弄了幾個新網站,結果在google跟yahoo上搜尋沒在最前面,yahoo甚至找不到,只好手動提醒他們加入了

Google
google的回報系統輸入你網站的網址及可

Yahoo!
由於yahoo搜尋現在都靠微軟的bing了,所以現在網路上一堆錯誤的回報網址,進去都是404,根據yahoo說明中心的說明,正確的回報系統在http://www.bing.com/toolbox/submit-site-url別跑錯了~~~

不過回報之後也沒有保證多久能找的到...慢慢等吧 XD

2013年11月1日 星期五

jQuery File Tree 只顯示 資料夾 與中文亂碼修正

        jQuery File Tree是一套滿好用的檔案樹套件,可以顯示遠端Server的檔案路徑。不過他目前只能選擇檔案,不能只選資料夾,而且若是中文檔名,取得的路徑還會是亂碼,以下做一點小修改,讓他支援中文檔名以及可以選取資料夾。

       首先,針對他的connector動手腳,以下是php的範例,不過各版本其實是相同原理

jqueryFileTree.php

foreach( $files as $file ) {
    if( file_exists($root . $_POST['dir'] . $file) && $file != '.' && $file != '..' && !is_dir($root . $_POST['dir'] . $file) ) {
    $ext = preg_replace('/^.*\./', '', $file);
    echo "<li class=\"file ext_$ext\"><a href=\"#\" rel=\"" . htmlentities($_POST['dir'] . $file) . "\">" . htmlentities($file) . "</a></li>";
    }
}
接下來修改
jQueryFileTree.js
先把所有escape換成encodeURIComponent,然後再把點擊資料夾的部分回傳資料以及加入CSS方便辨識


if(jQuery) (function($){
 
$.extend($.fn, {
fileTree: function(o, h) {
    // Defaults
    if( !o ) var o = {};
    if( o.root == undefined ) o.root = '/';
    if( o.script == undefined ) o.script = 'jqueryFileTree';
    if( o.folderEvent == undefined ) o.folderEvent = 'click';
    if( o.expandSpeed == undefined ) o.expandSpeed= 500;
    if( o.collapseSpeed == undefined ) o.collapseSpeed= 500;
    if( o.expandEasing == undefined ) o.expandEasing = null;
    if( o.collapseEasing == undefined ) o.collapseEasing = null;
    if( o.multiFolder == undefined ) o.multiFolder = true;
    if( o.loadMessage == undefined ) o.loadMessage = 'Loading...';
    
    $(this).each( function() {
        function showTree(c, t) {
            $(c).addClass('wait');
            $(".jqueryFileTree.start").remove();
            $.post(o.script, { dir: t }, function(data) {
                $(c).find('.start').html('');
                $(c).removeClass('wait').append(data);
                if( o.root == t ) $(c).find('UL:hidden').show(); else $(c).find('UL:hidden').slideDown({ duration: o.expandSpeed, easing: o.expandEasing });
                bindTree(c);
            });
        }
        
        function bindTree(t) {
            $(t).find('LI A').bind(o.folderEvent, function() {
                if( $(this).parent().hasClass('directory') ) {
                    if( $(this).parent().hasClass('collapsed') ) {
                        // Expand
                        if( !o.multiFolder ) {
                            $(this).parent().parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing });
                            $(this).parent().parent().find('LI.directory').removeClass('expanded').addClass('collapsed');
                        }
                        $(this).parent().find('UL').remove(); // cleanup
                        showTree( $(this).parent(), encodeURIComponent($(this).attr('rel').match( /.*\// )) );
                        $(this).parent().removeClass('collapsed').addClass('expanded');
                        $("a").removeClass("hover"); // 移除所有hover class
                        $(this).addClass('hover');   // 現有資料夾加入hover class
                        h($(this).attr('rel'));      // 回傳路境
                    } else {
                        // Collapse
                        $(this).parent().find('UL').slideUp({ duration: o.collapseSpeed, easing: o.collapseEasing });
                        $(this).parent().removeClass('expanded').addClass('collapsed');
                    }
                } else {
                    h($(this).attr('rel'));
                }
                return false;
            });
            // Prevent A from triggering the # on non-click events
            if( o.folderEvent.toLowerCase != 'click' ) $(t).find('LI A').bind('click', function() { return false; });
        }
        // Loading message
        $(this).html('<ul class="jqueryFileTree start"><li class="wait">' + o.loadMessage + '<li></ul>');
        // Get the initial file list
        showTree( $(this), encodeURIComponent(o.root) );
    });
}
});
 
})(jQuery);

2013年10月4日 星期五

jQuery UI Dialog 按下 Enter 自動送出

WWWWWWWOOOOOOOOOOOOOOOOOWWWW

3年來第一篇技術文章 XD

jQuery的Dialog對於我這種UI白癡來說實在很好用,但是他沒有內建Dialog表單的熱鍵,所以沒有辦法按下Enter就自動送出表單,解決方法是利用focse mothod加入熱鍵檢察,並執行click指令


$( "#form" ).dialog({
    buttons: {
        "送出": function() {
            $.ajax({  // 新增帳號
                type: "POST",
                url: 'manager.php?a=add',
                data: { name:name.val() },
                dataType: "json",
                error: function(xhr) {
                    alert("ajax error");
                },
                success: function(response) {
                    if ( response.status){ //成功
                        $( "#form" ).dialog( "close" ); //關閉dialog                             }else { //失敗show錯誤訊息
                        updateTips( tips, response.code );
                    }
                }
            });
        },
        "取消": function() {
            $( this ).dialog( "close" );
        }
    },
    focus: function() {
        $(':input', this).unbind('keyup'); // 解除事件綁定 不然會重複送出
        $(':input', this).keyup(function(event) {
            if (event.keyCode == 13) { // 偵測到按Enter
                $(this).parent().parent().parent().find("button:first").click(); // 尋找送出按鈕 層級依照頁面設定測試
            }
        });
    }
});

2013年1月5日 星期六

2012回顧

TMMMMMD
一年居然就這樣過了,這邊該不會變成我寫回顧專用的blog吧...
好吧,2012目標有16項,只完成了7項,加油,好嗎?

再來看看2012幹了些什麼好事吧...

  1. 2011/12/31 在101等爆炸
  2. 2012/01/01 接受招換回家修電腦...
  3. 人生第一次尾牙抽獎成果$3000
  4. 人生第一次打麻將,也只打過那一次...XD
  5. 人生第一次在除夕掛急診...
  6. 人生第一次10公里慢跑
  7. 人生第一次戴隱形眼鏡
  8. 人生第一次看演唱會-蘇打綠
  9. 人生第一次上台演講還有錢拿!!
  10. 提了2個專利
  11. 公司提案獲獎,老闆親自頒獎
  12. 靠裝熟認識了一些新朋友 XD
  13. 去峇里島玩~
  14. 人生第一次換工作
  15. 買了kinect!
  16. 年度最佳爛片 蜘蛛人驚奇再起
比起前年的一堆3C 我今年好節制阿 XXXXD