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
Post a Comment