i




 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Uploading file with Javascript and XMLHTTPRequest
12-30-2011, 08:07 PM
Post: #1
Uploading file with Javascript and XMLHTTPRequest
Code:
<!DOCTYPE html>
<html>
<head >
    <title>Upload Files using XMLHttpRequest</title>

    &lt;script type="text/javascript">
        function fileSelected() {
            var file = document.getElementById('fileToUpload').files[0];
            if (file) {
                var fileSize = 0;
                if (file.size &gt; 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", "UploadHandler.ashx");
            xhr.send(fd);
        }

        function uploadProgress(evt) {
            if (evt.lengthComputable) {
                var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
                document.getElementById('prog').value = percentComplete;
            }
            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.");
        }
    &lt;/script>

</head>
<body>
    <form id="form1">
    <div>
        <label for="fileToUpload">
            Select a File to Upload</label>
        <input type="file" name="fileToUpload[]" id="fileToUpload" onchange="fileSelected();" />
    </div>
    <div id="fileName">
    </div>
    <div id="fileSize">
    </div>
    <div id="fileType">
    </div>
    <div>
        <input type="button" onclick="uploadFile()" value="Upload" />
    </div>
    <div id="progressNumber">
    </div>
    <progress id="prog" value="0" max="100.0"></progress>
    </form>
</body>
</html&gt;

XMLHttpRequest Level 2 adds support for the new FormData interface. FormData objects provide a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest send() method.


XMLHttpRequest Level 2 provides the ability to listen to various events that can occur while the request is being processed. This includes periodic progress notifications, error notifications, and so forth.


Quote
12-31-2011, 11:32 AM
Post: #2
RE: Uploading file with Javascript and XMLHTTPRequest
good work haider, +1 rep from me.
If possible, then please also attach the sample code, because some time code does not display properly in thread.

[Image: 2604595733.png]
Quote
06-13-2012, 04:33 PM (This post was last modified: 06-13-2012 04:38 PM by didi_ort.)
Post: #3
RE: Uploading file with Javascript and XMLHTTPRequest
Disculpe y cual seria la implementación para UploadHandler.ashx
Gracias

Excuse me and what would be the implementation for UploadHandler.ashx
Thanks
Quote
06-15-2012, 04:01 AM
Post: #4
RE: Uploading file with Javascript and XMLHTTPRequest
using HttpFileCollection httpfiles = Request.Files; will get the file as we have uploaded only one file so httpfiles[0].InputStream will do the trick ,you can also use aspx page and do this in page load event e.g

HttpFileCollection httpfiles = Request.Files;
string FName = httpfiles[0].FileName;
using (FileStream fs = File.Create(Server.MapPath(@"YourPath/"+FName)))
{
SaveFile(httpfiles[0].InputStream, fs);
}

..............................
..............................


private void SaveFile(Stream stream, FileStream fs)
{
byte[] buffer = new byte[4096];
int bytesRead;
while ((bytesRead = stream.Read(buffer, 0, buffer.Length)) != 0)
{
fs.Write(buffer, 0, bytesRead);
}
fs.Dispose();
}
Quote
03-17-2013, 09:32 PM
Post: #5
RE: Uploading file with Javascript and XMLHTTPRequest
Hi haider.ali I used code and It was quite true, but It does not work in IE Sad( Please help if you can
Quote


Possibly Related Threads...
Thread: Author Replies Views: Last Post
  New features in XMLHttpRequest haider.ali 0 4,069 12-27-2011 08:06 AM
Last Post: haider.ali
  reading text file with javascript using html5 FileReader haider.ali 0 12,810 07-15-2011 03:12 PM
Last Post: haider.ali



User(s) browsing this thread: 1 Guest(s)