javascript - Upload image using html -


i designing simple chat application using google app engine. using code available link.

http://code.google.com/p/google-app-engine-samples/source/browse/trunk/simple-ajax-chat/

i new concepts of html, css , javascript. wish add feature chat application user can upload image in chat window itself. (similar feature have in facebook).

i explored code , found out following html code takes care of chat window.

<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>   

the sendchat() function looks below.

function sendchat(form) { if (isnotempty(document.getelementbyid("chattext").value)) { downloadurl(getrandomurl("/getchats"), "post", "content=" +    encodeuricomponent(document.getelementbyid("chattext").value), onchatsreturned); document.getelementbyid("chattext").value = ""; } } 

since, wish incorporate image features, modified code per below link.

http://saravani.wordpress.com/2012/03/14/preview-of-an-image-before-it-is-uploaded/

after modification, html code below.

<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> 

i modified sendchat() function below.

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

basically, trying display image in chat window itself. not sure how accomplish this.


Comments

Popular posts from this blog

javascript - How to get current YouTube IDs via iMacros? -

c# - Maintaining a program folder in program files out of date? -

emulation - Android map show my location didn't work -