<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>icez network &#187; javascript</title>
	<atom:link href="http://www.icez.net/blog/tags/javascript/feed" rel="self" type="application/rss+xml" />
	<link>http://www.icez.net/blog</link>
	<description>Technical Blog by icez network</description>
	<lastBuildDate>Mon, 30 Jan 2012 17:31:37 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>0104 &#124; ปุ่มอัพโหลดรูปเข้า upic.me ด่วนทันใจ</title>
		<link>http://www.icez.net/blog/721/quick-upic-me-upload-button</link>
		<comments>http://www.icez.net/blog/721/quick-upic-me-upload-button#comments</comments>
		<pubDate>Sun, 11 Jul 2010 08:24:05 +0000</pubDate>
		<dc:creator>icez</dc:creator>
				<category><![CDATA[PHP Coding]]></category>
		<category><![CDATA[Web Server]]></category>
		<category><![CDATA[api]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[upicme]]></category>

		<guid isPermaLink="false">http://www.icez.net/blog/?p=721</guid>
		<description><![CDATA[คุณสมบัติ - upload รูปได้ทุก format ที่ upic.me รองรับ ขนาดใหญ่ได้ถึง 2MB - เลือกอัพได้ทีละหลายๆ รูปเหมือนหน้าแรก upic.me ด้วย - มีสถานะการ upload ขึ้นตลอดการอัพ และจะหายไปเองเมื่ออัพเสร็จ - อัพเสร็จ code ขึ้นในกล่องข้อความทันที ไม่ต้องก๊อปวาง - ปรับแต่งหน้าตา สีสันของปุ่มได้ตามสะดวก (ส่วนแก้ไขข้อความ จะทำ version ถัดไปครับ) - เอาไปใช้กันได้ฟรีๆ ไม่ต้องแปะ link กลับ ไม่ต้องแปะเครดิตใดๆ ทั้งสิ้น - ไม่เปลือง bandwidth ของ host ด้วย เพราะอัพตรงเข้ามาที่ server ของ upic.me เลย ถ้างงยังไงลองดูตัวอย่าง code ด้านล่างได้เลยครับ &#60;script type=&#34;text/javascript&#34; [...]]]></description>
			<content:encoded><![CDATA[<p>คุณสมบัติ</p>
<p>- upload รูปได้ทุก format ที่ upic.me รองรับ ขนาดใหญ่ได้ถึง 2MB<br />
- เลือกอัพได้ทีละหลายๆ รูปเหมือนหน้าแรก upic.me ด้วย<br />
- มีสถานะการ upload ขึ้นตลอดการอัพ และจะหายไปเองเมื่ออัพเสร็จ<br />
- อัพเสร็จ code ขึ้นในกล่องข้อความทันที ไม่ต้องก๊อปวาง<br />
- ปรับแต่งหน้าตา สีสันของปุ่มได้ตามสะดวก (ส่วนแก้ไขข้อความ จะทำ version ถัดไปครับ)<br />
- เอาไปใช้กันได้ฟรีๆ ไม่ต้องแปะ link กลับ ไม่ต้องแปะเครดิตใดๆ ทั้งสิ้น<br />
- ไม่เปลือง bandwidth ของ host ด้วย เพราะอัพตรงเข้ามาที่ server ของ upic.me เลย</p>
<p>ถ้างงยังไงลองดูตัวอย่าง code ด้านล่างได้เลยครับ</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">&lt;script type=&quot;text/javascript&quot; src=&quot;http://upic.me/js/embedupload.js&quot;&gt;&lt;/script&gt;
<span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
upic_target <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;targetelement&quot;</span><span style="color: #339933;">;</span>
upic_type <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;resulttype&quot;</span><span style="color: #339933;">;</span>
upic_buttoncss <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;appendcss&quot;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

<p>upic_target => จะให้เอา code ไปแปะที่ช่องไหน<br />
upic_type => รูปแบบ code ที่แปะ มี htmlfull / htmlthumb / bbfull / bbthumb (ถ้าไม่ระบุ จะถือว่าเป็น bbthumb ครับ)<br />
upic_buttoncss => css เสริมสำหรับข้อความในปุ่ม เผื่ออยากแก้สีแก้รูปแบบ ใส่ไปได้เลยครับ (การใส่สี รองรับ code แบบ #<a href="http://search.twitter.com/search?q=%23abcdef" rel="nofollow" target="_blank" title="Search Twitter for &quot;abcdef&quot;">abcdef</a> เท่านั้นนะครับ)</p>
<p>ส่วน uploadprogress จะมีประมาณนี้ครับ</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">&lt;style type<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span><span style="color: #00AA00;">&gt;</span>
<span style="color: #cc00cc;">#upic_uploader</span><span style="color: #00AA00;">&#123;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#upic_uploadprogress</span><span style="color: #00AA00;">&#123;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.progressWrapper</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">margin-top</span><span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.progressContainer</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">border-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">dotted</span> <span style="color: #cc00cc;">#ddd</span><span style="color: #00AA00;">;</span>padding<span style="color: #00AA00;">:</span><span style="color: #933;">2px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.progressName</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span>color<span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">black</span><span style="color: #00AA00;">;</span>margin-<span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span><span style="color: #933;">2px</span><span style="color: #00AA00;">;</span>float<span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.progressBarStatus</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#666</span><span style="color: #00AA00;">;</span>text-align<span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">;</span>margin<span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>font-<span style="color: #000000; font-weight: bold;">size</span><span style="color: #00AA00;">:</span><span style="color: #933;">9px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
.<span style="color: #993333;">red</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #993333;">solid</span> <span style="color: #933;">1px</span> <span style="color: #cc00cc;">#B50000</span><span style="color: #00AA00;">;</span>background-<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#FFEBEB</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
.<span style="color: #993333;">green</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #993333;">solid</span> <span style="color: #933;">1px</span> <span style="color: #cc00cc;">#DDF0DD</span><span style="color: #00AA00;">;</span>background-<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#EBFFEB</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
.<span style="color: #000000; font-weight: bold;">blue</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #993333;">solid</span> <span style="color: #933;">1px</span> <span style="color: #cc00cc;">#CEE2F2</span><span style="color: #00AA00;">;</span>background-<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#F0F5FF</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.progressBarInProgress</span><span style="color: #00AA00;">,</span><span style="color: #6666ff;">.progressBarComplete</span><span style="color: #00AA00;">,</span><span style="color: #6666ff;">.progressBarError</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">clear</span><span style="color: #00AA00;">:</span><span style="color: #993333;">both</span><span style="color: #00AA00;">;</span>font-<span style="color: #000000; font-weight: bold;">size</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>width<span style="color: #00AA00;">:</span><span style="color: #933;">0%</span><span style="color: #00AA00;">;</span>height<span style="color: #00AA00;">:</span><span style="color: #933;">2px</span><span style="color: #00AA00;">;</span>background-<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">blue</span><span style="color: #00AA00;">;</span>margin-<span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span><span style="color: #933;">4px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.progressBarComplete</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">100%</span><span style="color: #00AA00;">;</span>background-<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #993333;">green</span><span style="color: #00AA00;">;</span>visibility<span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.progressBarError</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">100%</span><span style="color: #00AA00;">;</span>background-<span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #993333;">red</span><span style="color: #00AA00;">;</span>visibility<span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
&lt;/style<span style="color: #00AA00;">&gt;</span></pre></div></div>

<p>(พอดีมันผ่าน compressor มาหลายรอบ code เลยดูยากหน่อย ขออภัยด้วยครับ)<br />
ถ้าอยากแก้ไขหน้าตาสีสันยังไง สามารถ copy code ด้านบนไปแก้ไข แล้วใส่ต่อจาก script ได้เลยครับ</p>
<p><span id="more-721"></span></p>
<p>.<br />.<br />
<hr />.<br />.</p>
<p>ตัวอย่าง code นี้สำหรับแปะในบอร์ด SMF ไฟล์ Post.template.php ได้ทันที</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">&lt;script type=&quot;text/javascript&quot; src=&quot;http://upic.me/js/embedupload.js&quot;&gt;&lt;/script&gt;
<span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
upic_target <span style="color: #339933;">=</span> document.<span style="color: #660066;">postmodify</span>.<span style="color: #660066;">message</span><span style="color: #339933;">;</span>
upic_type <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;bbthumb&quot;</span><span style="color: #339933;">;</span>
upic_buttoncss <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;color:#000000;&quot;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

<p>อันด้านล่างนี้สำหรับ discuz</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">&lt;script type=&quot;text/javascript&quot; src=&quot;http://upic.me/js/embedupload.js&quot;&gt;&lt;/script&gt;
<span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
upic_target <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;postmessage&quot;</span><span style="color: #339933;">;</span>
upic_type <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;bbthumb&quot;</span><span style="color: #339933;">;</span>
upic_buttoncss <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;color:#000000;&quot;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

<p>=======================<br />
update 2010-08-07 :: custom function สำหรับแทรก code เข้าพวก wysiwyg editor ครับ</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">&lt;script type=&quot;text/javascript&quot; src=&quot;http://upic.me/js/embedupload.js&quot;&gt;&lt;/script&gt;
<span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
upic_target <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;postmessage&quot;</span><span style="color: #339933;">;</span>
upic_type <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;bbthumb&quot;</span><span style="color: #339933;">;</span>
upic_buttoncss <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;color:#000000;&quot;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">function</span> upic_custom<span style="color: #009900;">&#40;</span>urlshow<span style="color: #339933;">,</span> urlfull<span style="color: #339933;">,</span> urlthumb<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #006600; font-style: italic;">// do anything here </span>
<span style="color: #009900;">&#125;</span> 
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

<p>ตัวอย่างด้านล่างสำหรับ SMF 2.0 ขึ้นไปครับ รองรับการทำงานของ WYSIWYG editor เรียบร้อย</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">&lt;script type=&quot;text/javascript&quot; src=&quot;http://upic.me/js/embedupload.js&quot;&gt;&lt;/script&gt;
<span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
upic_target <span style="color: #339933;">=</span> document.<span style="color: #660066;">postmodify</span>.<span style="color: #660066;">message</span><span style="color: #339933;">;</span>
upic_type <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;bbthumb&quot;</span><span style="color: #339933;">;</span>
upic_buttoncss  <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;color:#000000;&quot;</span><span style="color: #339933;">;</span>
upic_buttontext <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;Select Images &lt;span class=<span style="color: #000099; font-weight: bold;">\&quot;</span>buttonSmall<span style="color: #000099; font-weight: bold;">\&quot;</span>&gt;(2 MB Max)&lt;/span&gt;&quot;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> upic_custom<span style="color: #009900;">&#40;</span>urlshow<span style="color: #339933;">,</span> urlfull<span style="color: #339933;">,</span> urlthumb<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>oEditorHandle_message.<span style="color: #660066;">bRichTextEnabled</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
oEditorHandle_message.<span style="color: #660066;">insertText</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;&lt;a href=<span style="color: #000099; font-weight: bold;">\&quot;</span>&quot;</span> <span style="color: #339933;">+</span> urlshow <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\&quot;</span>&gt;&lt;img src=<span style="color: #000099; font-weight: bold;">\&quot;</span>&quot;</span> <span style="color: #339933;">+</span> urlthumb <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\&quot;</span> border=<span style="color: #000099; font-weight: bold;">\&quot;</span>0<span style="color: #000099; font-weight: bold;">\&quot;</span>&gt;&lt;/a&gt;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
upic_target.<span style="color: #660066;">value</span> <span style="color: #339933;">+=</span> <span style="color: #3366CC;">&quot;[url=&quot;</span><span style="color: #339933;">+</span>urlshow<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;][img]&quot;</span><span style="color: #339933;">+</span>urlthumb<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;[/img][/url]&quot;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.icez.net/blog/721/quick-upic-me-upload-button/feed</wfw:commentRss>
		<slash:comments>100</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Served from: www.icez.net @ 2012-02-10 18:35:02 -->
