Question

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

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

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

使用html上传图片

0 个答案: