0

我正在使用谷歌应用引擎设计一个简单的聊天应用程序。我正在使用此链接中提供的代码。

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 = "";
}
}
}

基本上，我试图在聊天窗口本身中显示图像。我不知道如何做到这一点。

4

0 回答 0