Code for uploading file in javascript

We styled it a bit. In the script , function getAsText readfile basically creates the new FileReader object for reading the file. Then in the next line we are using our readAsText function to get the text from the file into the memory. We added the onload event on the reader object so that we get notification as soon as the read is completed. As the read completes it will call the loaded function. In the loaded function we are simply showing the text of the function inside an op div.

If you have done everything right so far then you are done. Check the following output. I forget to mention that you need to uncomment the call of getTextFile from all of your read functions. The code is not as big as it looks initially.

It mostly contains the boiler plate code with slight modifications of previous methods. The getAsImage method basically reads the image as a data URL and then sends it to " addImg " which in turn creates a new img element and appends it in an op div.

Check the output below for the code above. All done. The upload completed successfully. In this article I tried my best to provide you the minimal code required for the proper working of the uploader but you always can have a look at the API for other options available for it. If you find any problem then ask in comment.

Sign in Email. Our Support Team is here to help. Ask Question. Inside the window onload event handler, the HTML Button element has been assigned a Click event handler and the Fileupload element has been assigned Change event handler. When the Button is clicked, it triggers the Click event of the Fileupload element which in turn opens the File Upload dialog to choose the File for uploading.

Inside the jQuery document ready event handler, the HTML Button element has been assigned a Click event handler and the Fileupload element has been assigned Change event handler. Browser Compatibility. Related Articles. Add Comments. Press ESC to close. Tagged in: file upload , javascript , live demo. Share Article:. Getting started with three. Javascript remove element from Ghost array January 22, And if it gets any file it will select its name and display on no file, selected space.

Whe n no file is selected then it will show No File, Selected!? If you will not include this it will show the whole directory location along with the name. It returns fileList when it is. We will use selected file details and convert them to base64 string by readAsDataURL method and then display as an image. You must be wondering what the hell is this. It returns the base64 String of the selected image. This block of code just reads that base64 string and adds to the image holder space.