Created
June 14, 2012 14:55
-
-
Save haric/2930832 to your computer and use it in GitHub Desktop.
fileUpload
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Upload Files using XMLHttpRequest - Minimal</title> | |
| <script type="text/javascript"> | |
| function fileSelected() { | |
| var file = document.getElementById('fileToUpload').files[0]; | |
| if (file) { | |
| var fileSize = 0; | |
| if (file.size > 1024 * 1024) | |
| fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB'; | |
| else | |
| fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB'; | |
| document.getElementById('fileName').innerHTML = 'Name: ' + file.name; | |
| document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize; | |
| document.getElementById('fileType').innerHTML = 'Type: ' + file.type; | |
| } | |
| } | |
| function uploadFile() { | |
| var fd = new FormData(); | |
| fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]); | |
| var xhr = new XMLHttpRequest(); | |
| xhr.upload.addEventListener("progress", uploadProgress, false); | |
| xhr.addEventListener("load", uploadComplete, false); | |
| xhr.addEventListener("error", uploadFailed, false); | |
| xhr.addEventListener("abort", uploadCanceled, false); | |
| xhr.open("POST", "UploadMinimal.aspx"); | |
| xhr.send(fd); | |
| } | |
| function uploadProgress(evt) { | |
| if (evt.lengthComputable) { | |
| var percentComplete = Math.round(evt.loaded * 100 / evt.total); | |
| document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%'; | |
| } | |
| else { | |
| document.getElementById('progressNumber').innerHTML = 'unable to compute'; | |
| } | |
| } | |
| function uploadComplete(evt) { | |
| /* This event is raised when the server send back a response */ | |
| alert(evt.target.responseText); | |
| } | |
| function uploadFailed(evt) { | |
| alert("There was an error attempting to upload the file."); | |
| } | |
| function uploadCanceled(evt) { | |
| alert("The upload has been canceled by the user or the browser dropped the connection."); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx"> | |
| <div class="row"> | |
| <label for="fileToUpload">Select a File to Upload</label><br /> | |
| <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/> | |
| </div> | |
| <div id="fileName"></div> | |
| <div id="fileSize"></div> | |
| <div id="fileType"></div> | |
| <div class="row"> | |
| <input type="button" onclick="uploadFile()" value="Upload" /> | |
| </div> | |
| <div id="progressNumber"></div> | |
| </form> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment