Google App Engine を使用して簡単なチャット アプリケーションを設計しています。このリンクから入手できるコードを使用しています。
http://code.google.com/p/google-app-engine-samples/source/browse/trunk/simple-ajax-chat/
HTML、CSS、Javascript の概念は初めてです。ユーザーがチャット ウィンドウ自体に画像をアップロードできる別の機能をチャット アプリケーションに追加したいと考えています。(Facebook にある機能に似ています)。
コードを調べたところ、次の HTML コードがチャット ウィンドウを処理していることがわかりました。
<div id="chats"></div>
<form id="send-chat-form" action="javascript:sendChat();">
<div class="form-item">
<input type="text" name="content" class="form-textfield" id="chattext" size="100" />
<input type="submit" class="form-submit" value="Send" />
<input type="button" class="form-refresh" value="Refresh" onclick="updateChat()" />
</div>
</form>
</div>
sendChat() 関数は以下のようになります。
function sendChat(form) {
if (isNotEmpty(document.getElementById("chattext").value)) {
downloadUrl(getRandomUrl("/getchats"), "POST", "content=" +
encodeURIComponent(document.getElementById("chattext").value), onChatsReturned);
document.getElementById("chattext").value = "";
}
}
画像機能を組み込みたいので、以下のリンクに従ってコードを変更しました。
http://saravani.wordpress.com/2012/03/14/preview-of-an-image-before-it-is-uploaded/
変更後、私の HTML コードは次のようになります。
<div class="form-item">
<input type="text" name="content" class="form-textfield" id="chattext" size="100" />
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" alt="your image"/>
<input type="submit" class="form-submit" value="Send" />
<input type="button" class="form-refresh" value="Refresh" onclick="updateChat()" />
</div>
sendchat() 関数を以下のように修正しました。
function sendChat(form) {`
if (isNotEmpty(document.getElementById("chattext").value)) {
downloadUrl(getRandomUrl("/getchats"), "POST", "content=" +
encodeURIComponent(document.getElementById("chattext").value), onChatsReturned);
downloadUrl(getRandomUrl("/getchats"), "POST", "content=" +
encodeURIComponent(document.getElementById("img_prev").src), onChatsReturned);
document.getElementById("chattext").value = "";
}
}
}
基本的に、チャットウィンドウ自体に画像を表示しようとしています。これを達成する方法がわかりません。