2016年9月29日 星期四
2016年8月7日 星期日
CSS3 transition 屬性的(transition-timing-function速度曲線)
CSS3 transition 屬性的(transition-timing-function速度曲線)
本篇主要介紹transition屬性中的cubic-bezier速度曲線
2016年6月23日 星期四
win mysql cmd 匯出入 table
匯出一個表
#mysqldump -u 使用者名 -p 資料庫名 表名> 匯出的檔案名
建立資料庫名為test
#CREATE DATABASE test;
成功的話會出現:Query OK, 0 rows affected (0.00sec)
使用test資料庫(轉換資料庫為特定的資料庫)
#USE test;
成功的話會出現:Database changed
將本機c槽內的test.sql匯入(要完整path)
#SOURCE c:\test.sql;
成功的話會出現:
Query OK, 0 rows affected (0.00sec)
Query OK, 0 rows affected (0.00sec)
#mysqldump -u 使用者名 -p 資料庫名 表名> 匯出的檔案名
#CREATE DATABASE test;
成功的話會出現:Query OK, 0 rows affected (0.00sec)
使用test資料庫(轉換資料庫為特定的資料庫)
#USE test;
成功的話會出現:Database changed
將本機c槽內的test.sql匯入(要完整path)
#SOURCE c:\test.sql;
成功的話會出現:
Query OK, 0 rows affected (0.00sec)
Query OK, 0 rows affected (0.00sec)
2016年4月28日 星期四
textarea 渲染HTML tag
<script>
function submit_test(){
$('#editable').val($('#editable_div').html());
}
function submit_test2(){
$('#editable_div').html($('#editable').val());
}
</script>
<style>
.editable, .editable_div { width:600px; }
.editable { height:100px; }
.editable_div {
height: 200px;
border: 1px solid #ccc;
padding: 10px;
margin : 0 0 15px 0;
background: #cccccc;
box-shadow: 10px 10px 5px #888888;
}
</style>
<textarea id="editable" class="editable" ></textarea><br/>
<div id="editable_div" class="editable_div" contenteditable="true">
<img src="http://127.0.0.1/Docs/Images/utf-8/style1/logo02.png"><br/>
contenteditable 属性规定元素内容是否可编辑。
</div>
<a class="btn" href="#" onclick="document.execCommand('bold');">bolt</a>
<a class="btn" href="#" onclick="document.execCommand('italic');">italic</a>
<a class="btn" href="#" onclick="document.execCommand('underline');">underline</a>
<a class="btn" href="#" onclick="submit_test();">submit</a>
<a class="btn" href="#" onclick="submit_test2();">submit2</a>
function submit_test(){
$('#editable').val($('#editable_div').html());
}
function submit_test2(){
$('#editable_div').html($('#editable').val());
}
</script>
<style>
.editable, .editable_div { width:600px; }
.editable { height:100px; }
.editable_div {
height: 200px;
border: 1px solid #ccc;
padding: 10px;
margin : 0 0 15px 0;
background: #cccccc;
box-shadow: 10px 10px 5px #888888;
}
</style>
<textarea id="editable" class="editable" ></textarea><br/>
<div id="editable_div" class="editable_div" contenteditable="true">
<img src="http://127.0.0.1/Docs/Images/utf-8/style1/logo02.png"><br/>
contenteditable 属性规定元素内容是否可编辑。
</div>
<a class="btn" href="#" onclick="document.execCommand('bold');">bolt</a>
<a class="btn" href="#" onclick="document.execCommand('italic');">italic</a>
<a class="btn" href="#" onclick="document.execCommand('underline');">underline</a>
<a class="btn" href="#" onclick="submit_test();">submit</a>
<a class="btn" href="#" onclick="submit_test2();">submit2</a>
[HTML5] INPUT FILE 限制 MIMEtype 的選擇
文章出處 http://shinychang.net/article/53ff169465dd204503e125ad
<input type='file'>使用accept屬性,在W3C的規格只允許Image/*、Video/*、Audio/*三種MIMEtype是允許的
也就是說上述三種以外的選擇,就只能選擇所有檔案*.*
接下來直接看範例
<div>All Files <input type='file'></div>
<div>Images <input type='file' accept='image/*'></div>
<div>Videos <input type='file' accept='video/*'></div>
<div>Audios <input type='file' accept='audio/*'></div>
<div>Zip Files <input type='file' accept='.zip'></div>
<div>Custom <input type='file' accept='.zip,.rar,.7z'></div>
第一個是使用了最基本的,也就是沒有任何的限制
第二到第四個則是使用HTML5的規範內的MIMEtype
第五個則是限制只能上傳.zip結尾的ZIP檔
最後一個,則是同時允許.zip, .rar和.7z三種格式
透過這樣的範例,就知道怎麼去限制不同類型的檔案
不過這邊要特別注意一點,即便前端已經限制住了,後端也一定要檢查
使用者傳來的資料永遠都是不可信的!
至於瀏覽器相容性的部分,IE10+
第五和第六種都是非W3C規範內的所以FireFox不支援
<input type='file'>使用accept屬性,在W3C的規格只允許Image/*、Video/*、Audio/*三種MIMEtype是允許的
也就是說上述三種以外的選擇,就只能選擇所有檔案*.*
接下來直接看範例
<div>All Files <input type='file'></div>
<div>Images <input type='file' accept='image/*'></div>
<div>Videos <input type='file' accept='video/*'></div>
<div>Audios <input type='file' accept='audio/*'></div>
<div>Zip Files <input type='file' accept='.zip'></div>
<div>Custom <input type='file' accept='.zip,.rar,.7z'></div>
第一個是使用了最基本的,也就是沒有任何的限制
第二到第四個則是使用HTML5的規範內的MIMEtype
第五個則是限制只能上傳.zip結尾的ZIP檔
最後一個,則是同時允許.zip, .rar和.7z三種格式
透過這樣的範例,就知道怎麼去限制不同類型的檔案
不過這邊要特別注意一點,即便前端已經限制住了,後端也一定要檢查
使用者傳來的資料永遠都是不可信的!
至於瀏覽器相容性的部分,IE10+
第五和第六種都是非W3C規範內的所以FireFox不支援
訂閱:
文章 (Atom)


