i trying upload file (a picture, really) unto parse. , using following html accomplish that:
<body> <form id="uploadphoto"> <input type="file" id="profilephotofileupload"> <input type="submit" id="submitbutton" value="submit" /> </form> </body> now, problem is, when try value of profilephotofileupload var image = document.getelementbyid('profilephotofileupload').value;, string of file path instead of actual picture. example, when alert(image), c:fakepath/twitterlogo.png. want actual image in variable. know how accomplish this?
i read whole bunch of other posts regarding , involved php (i don't know php). , wondering if bypass php part , directly upload parse... anyhow, please let me know if have solution problem!
if want handle files on client (i.e. don't upload file server) have access files property on element.
here's quick working sample using vanilla js: http://jsbin.com/woboju/edit?js,output
with code can click on upload button , select image. triggers change event on element -- note: not traditional form submission. in event handler, first file object taken , asynchronously read. once file loaded -- onload -- new image element created, src attribute set resulting data url, , element appended document.
document.getelementbyid('profilephotofileupload').addeventlistener("change", function() { var self = this; var file = self.files[0]; var reader = new filereader(); reader.onload = function() { var img = document.createelement('img'); img.src = reader.result; self.parentnode.appendchild(img); }; reader.readasdataurl(file); }, false); in final code, you'll want add sanity checks, such making sure image has been selected. add support multiple images being selected @ once.
cf. http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api
Comments
Post a Comment