這篇文章受密碼保護，請輸入密碼後查看內容。
- Dec 17 Thu 2015 18:31
-
TEST
- Jun 01 Wed 2016 12:12
-
上傳前預覽
<html>
<head>
<style type="text/css">.thumb-image{float:left;width:100px;position:relative;padding:5px;}</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="wrapper" style="margin-top: 20px;"><input id="fileUpload" multiple="multiple" type="file"/>
<div id="image-holder"></div>
</div>
<script>
$(document).ready(function() {
$("#fileUpload").on('change', function() {
//Get count of selected files
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var image_holder = $("#image-holder");
image_holder.empty();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof(FileReader) != "undefined") {
//loop for each file selected for uploaded.
for (var i = 0; i < countFiles; i++)
{
var reader = new FileReader();
reader.onload = function(e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image"
}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
alert("This browser does not support FileReader.");
}
} else {
alert("Pls select only images");
}
});
});
</script>
</body>
</html>
http://codepedia.info/editor-example/preview-image-before-upload-jquery-example/
http://codepedia.info/html5-filereader-preview-image-show-thumbnail-image-before-uploading-on-server-in-jquery/
- May 12 Thu 2016 11:46
-
SQL 排序置換
If'Peter'and'Steve'are unique in your table, this will do:
UPDATE TableX
SET ord =(SELECT MIN(ord)+ MAX(ord)FROM TableX
WHERE name IN('Peter','Steve'))- ord
WHERE name IN('Peter','Steve')or (improved by @Erwin):
UPDATE TableX
SET ord =(SELECT SUM(ord)FROM TableX
WHERE name IN('Peter','Steve'))- ord
WHERE name IN('Peter','Steve')http://stackoverflow.com/questions/8108798/sql-update-statement-to-switch-two-values-in-two-rows
- May 06 Fri 2016 11:54
-
C# 載入資料夾內所有圖片
string bookNo = "01";
bookNo = Request.Params["no"] == null ? "01" : Request.Params["no"];
DirectoryInfo dir = new DirectoryInfo(Server.MapPath("~/_img/bookImg/" + bookNo));
if(!dir.Exists){
dir = new DirectoryInfo(Server.MapPath("~/_img/bookImg/01"));
bookNo = "01";
}
FileInfo[] files = dir.GetFiles();
StringBuilder sb = new StringBuilder();
foreach (FileInfo file in files)
{
sb.Append("<img src='' data-original='_img/bookImg/" + bookNo + "/" + file.Name + "' style='width:100%;' />");
}
bookImg.InnerHtml = sb.ToString();
- May 06 Fri 2016 11:54
-
判別行動裝置
var uA = navigator.userAgent;
if (uA.match(/iPod/) || uA.match(/iPad/) || uA.match(/iPhone/) || uA.match(/Android/) || uA.match(/Windows Phone/)) {
location.href = "xxx.aspx?no=" + no;
} else {
$(".pobBox").load("xxx.aspx?no=" + no);
$(".popDiv").show(); $(".popDivBg").show();
}
- May 06 Fri 2016 11:47
-
使用a 呼叫js 埋ga
<a class="viewBtn" href="javascript:showView('01')" onclick="ga('send', 'event', 'xxx', 'xxx', '1')"></a>
- May 06 Fri 2016 11:45
-
C# 直接下載檔案
protected void LinkButton5_Click(object sender, EventArgs e)
{
string filename = "xxx.pdf";
//從Server端取得檔案
Stream FileStream;
FileStream = File.OpenRead(Server.MapPath("~/xxx/xxx.pdf"));
downloadBook(filename, FileStream);
}
protected void downloadBook(string filename, Stream FileStream)
{
Byte[] Buf = new byte[FileStream.Length];
FileStream.Read(Buf, 0, int.Parse(FileStream.Length.ToString()));
FileStream.Close();
//準備下載檔案
Response.ClearHeaders();
Response.Clear();
Response.Expires = 0;
Response.Buffer = false;
Response.ContentType = "Application/save-as";
Response.Charset = "utf-8";
//透過Header設定檔名
Response.AddHeader("Content-Disposition", "Attachment; filename=" + HttpUtility.UrlEncode(filename));
Response.BinaryWrite(Buf);
Response.End();
}
- Apr 13 Wed 2016 17:25
-
圖片按鈕 input file
way3
<div class="col-3 frmCaption">Attachments:</div>
<div class="col-9">
<label class="customUpload btnUpload btnM"> <span>Upload files</span>
<input type="file" class="upload" />
</label>
</div>
.btnDefault, .btnUpload {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
color: #333333;
cursor: pointer;
font-weight: 400;
display: inline-block;
padding: 6px 12px;
text-align: center;
text-decoration: none;
vertical-align: middle;
}
.btnDefault:focus, .btnDefault:hover, .btnUpload:focus, .btnUpload:hover {
background-color: #E6E6E6;
}
.btnM {
border-radius: 4px;
font-size: 14px;
padding: 6px 12px;
}
.customUpload {
overflow: hidden;
position: relative;
display: block;
}
.customUpload input.upload {
cursor: pointer;
margin: 0;
opacity: 0;
filter: alpha(opacity=0);
padding: 0;
position: absolute;
right: 0;
top: 0;
}
way2
- Mar 30 Wed 2016 10:41
-
[轉貼]上傳檔案前，JavaScript檢查檔案格式、大小
https://dotblogs.com.tw/topcat/archive/2009/02/20/7250.aspx
範例程式如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>上傳</title>
</head>
<body>
<form ACTION="upload.asp" METHOD="POST" name="FileForm" enctype="multipart/form-data">
圖片: <input type="file" name="file1" size="20" id="file1">
<input type="button" value="確定上傳" onClick="checkFile()">
</form>
</body>
</html>
<script language="JavaScript">
//by Bryan(不來ㄣ)
//這裡控制要檢查的項目，true表示要檢查，false表示不檢查
var isCheckImageType = true; //是否檢查圖片副檔名
var isCheckImageWidth = true; //是否檢查圖片寬度
var isCheckImageHeight = true; //是否檢查圖片高度
var isCheckImageSize = true; //是否檢查圖片檔案大小
var ImageSizeLimit = 100000; //上傳上限，單位:byte
var ImageWidthLimit = 1200; //圖片寬度上限
var ImageHeightLimit = 1000; //圖片高度上限
function checkFile() {
var f = document.FileForm;
var re = /\.(jpg|gif)$/i; //允許的圖片副檔名
if (isCheckImageType && !re.test(f.file1.value)) {
alert("只允許上傳JPG或GIF影像檔");
} else {
var img = new Image();
img.onload = checkImage;
img.src = f.file1.value;
}
}
function checkImage() {
if (isCheckImageWidth && this.width > ImageWidthLimit) {
showMessage('寬度','px',this.width,ImageWidthLimit);
} else if (isCheckImageHeight && this.height > ImageHeightLimit) {
showMessage('高度','px',this.height,ImageHeightLimit);
} else if (isCheckImageSize && this.fileSize > ImageSizeLimit) {
showMessage('檔案大小','kb',this.fileSize/1000,ImageSizeLimit/1000);
} else {
document.FileForm.submit();
}
}
function showMessage(kind,unit,real,limit) {
var msg = "您所選擇的圖片kind為 real unit\n超過了上傳上限 limit unit\n不允許上傳！"
alert(msg.replace(/kind/,kind).replace(/unit/g,unit).replace(/real/,real).replace(/limit/,limit));
}
</script>
- Mar 04 Fri 2016 17:00
-
css goTop
#goTop {
position: fixed;
bottom: 5px;/* 與下方的距離, 也可改為百分比, 即為距離螢幕下方的百分比 */
right: 5px;/* 與右方的距離 */
width: 40px;/* 按鈕原始寬度 */
height: 40px;/* 按鈕原始高度 */
opacity: 0.4;/* 按鈕原始透明度 */
z-index: 10;
cursor: pointer;
transition: all .5s;/* 動畫效果 持續期間 */
-webkit-transition: all .5s;
-moz-transition: all .5s;
}
#goTop:hover {/* 滑鼠經過按鈕時 */
opacity: 1;/* 透明度 */
width: 80px;/* 按鈕寬度 */
height: 80px;/* 按鈕高度 */
}
</style>
http://www.wfublog.com/2015/03/go-top-button-animation.html
- Mar 04 Fri 2016 15:12
-
CSS animation
Hover.css
http://ianlunn.github.io/Hover/
http://learn.shayhowe.com/advanced-html-css/transitions-animations/
