<?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/"
	
	xmlns:georss="http://www.georss.org/georss"
	xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
	>

<channel>
	<title>uploader | Web活メモ帳</title>
	<atom:link href="https://blog.verygoodtown.com/tag/uploader/feed/" rel="self" type="application/rss+xml" />
	<link>https://blog.verygoodtown.com</link>
	<description>WEB開発者が使える世界の情報を発信します</description>
	<lastBuildDate>Mon, 08 Mar 2010 13:37:17 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.9.10</generator>
<site xmlns="com-wordpress:feed-additions:1">122803348</site>	<item>
		<title>画像アップロード時にjQueryでサムネイルを表示する方法</title>
		<link>https://blog.verygoodtown.com/2010/03/image-upload-thumbnail-jquery/</link>
					<comments>https://blog.verygoodtown.com/2010/03/image-upload-thumbnail-jquery/#respond</comments>
		
		<dc:creator><![CDATA[linja]]></dc:creator>
		<pubDate>Tue, 09 Mar 2010 01:10:52 +0000</pubDate>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[uploader]]></category>
		<guid isPermaLink="false">http://blog.verygoodtown.com/?p=3130</guid>

					<description><![CDATA[<p>通常、画像アップロードを行う際は一度フォームの内容を全て送信しなければいけません。自分がアップしたファイルを確認するのにひと手間かかってしまいます。 しかし、ajaxを使用する事により画像アップロード時に簡単にファイルを [&#8230;]</p>
The post <a href="https://blog.verygoodtown.com/2010/03/image-upload-thumbnail-jquery/">画像アップロード時にjQueryでサムネイルを表示する方法</a> first appeared on <a href="https://blog.verygoodtown.com">Web活メモ帳</a>.]]></description>
										<content:encoded><![CDATA[<p><img loading="lazy" src="https://blog.verygoodtown.com/wordpress/wp-content/uploads/2010/03/20100308-11.jpg" alt="20100308-11" title="20100308-11" width="422" height="176" class="alignnone size-full wp-image-3135" srcset="https://blog.verygoodtown.com/wordpress/wp-content/uploads/2010/03/20100308-11.jpg 422w, https://blog.verygoodtown.com/wordpress/wp-content/uploads/2010/03/20100308-11-300x125.jpg 300w" sizes="(max-width: 422px) 100vw, 422px" /><br />
通常、画像アップロードを行う際は一度フォームの内容を全て送信しなければいけません。自分がアップしたファイルを確認するのにひと手間かかってしまいます。</p>
<p>しかし、ajaxを使用する事により画像アップロード時に簡単にファイルを確認する事ができるようになります。<br />
jQueryを使用したやり方を紹介している「<a href="http://www.zurb.com/playground/ajax_upload" target="_blank">Image Uploads with 100% Less Suck. Guaranteed.</a>」というエントリーより。</p>
<p>詳しくは以下<br />
<span id="more-3130"></span></p>
<p>以下のようなコードで実装できるようです。</p>
<pre class="brush:xml;">
&lt;script&nbsp;src=&quot;/js/jquery.min.js&quot;&nbsp;type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script&nbsp;src=&quot;/js/ajaxupload.js&quot;&nbsp;type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
</pre>
<pre class="brush:js;">
$(document).ready(function(){

	var thumb = $('img#thumb');	

	new AjaxUpload('imageUpload', {
		action: $('form#newHotnessForm').attr('action'),
		name: 'image',
		onSubmit: function(file, extension) {
			$('div.preview').addClass('loading');
		},
		onComplete: function(file, response) {
			thumb.load(function(){
				$('div.preview').removeClass('loading');
				thumb.unbind();
			});
			thumb.attr('src', response);
		}
	});
});
</pre>
<p>jQueryを使用する事でこんなに短いコードで実装できるようになっているんですね。<br />
CMS等を自作されている方、実装されてみてはいかがでしょうか。</p>The post <a href="https://blog.verygoodtown.com/2010/03/image-upload-thumbnail-jquery/">画像アップロード時にjQueryでサムネイルを表示する方法</a> first appeared on <a href="https://blog.verygoodtown.com">Web活メモ帳</a>.]]></content:encoded>
					
					<wfw:commentRss>https://blog.verygoodtown.com/2010/03/image-upload-thumbnail-jquery/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">3130</post-id>	</item>
	</channel>
</rss>
