File uploaded WITHOUT its content to web service using jquery ajax

Question

I am uploading file using jquery ajax but the problem is file is uploaded without its content. FIle uploaded with 0Kb. Here is my code:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function uploading() {
var u = document.getElementById('uploadbr');
alert(u.value);

                    $.ajax({ 
                        type: "POST",
                        url: "http://10.20.1.93:8080/Service1/UploadFile?fileName="+u.value, 

                        success: function( data ) 
                        { 
                            alert( data ); 
                        } 
                    });    
                } 

</script>
</head>
<body>
<form name="uploadform" encrypt="multipart/form-data">
<input id="uploadbr" type="file" name="upfile" size="40" /><br/>
<input type="button" name="upbutton" value="Upload" onclick="uploading()" />
</form>
</body>
</html>

This is my code on server side.

 [WebInvoke(Method = "POST", UriTemplate = "UploadFile?fileName={fileName}")]
        public string UploadFile(string fileName, Stream fileContents)
        {
            //save file
            try
            {
                string absFileName = string.Format("{0}\\FileUpload\\{1}"
                                        , AppDomain.CurrentDomain.BaseDirectory
                                        , fileName);
                using (FileStream fs = new FileStream(absFileName, FileMode.Create))
                {
                    fileContents.CopyTo(fs);
                    fileContents.Close();
                }
                return "Upload OK";
            }
            catch (Exception ex)
            {
                return "FAIL ==> " + ex.Message;
            }
        }

Now tell me what can i do? where am i wrong?

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

You cannot upload files using XMLHttpRequest(AJAX).
You can use this plugin instead this
Moreover, With XHR2, File upload through AJAX is supported. E.g. through FormData object, but unfortunately it is not supported by all/old browsers.
Refrence1 Refrence2

edited May 23 '17 at 12:29

Community

1
1

answered Jun 19 '13 at 05:40

Bhavik

4,836
3
30
45

I did not use XMLHttpRequest(AJAX). And file is being uploaded but without its content. – Saad Anees Jun 19 '13 at 06:11
Using [this](http://jquery.malsup.com/form/#file-upload) can ease your code. And can you be more specific on **file is being uploaded nut without its content** – Bhavik Jun 19 '13 at 06:24
when i select a text file to upload, it is uploaded but not its content. Means i have some information save in a text.txt which has some size on disk but when i upload that file, it is uploaded as empty file and its size on disk becomes 0kb. – Saad Anees Jun 19 '13 at 08:56

score 0 · Accepted Answer · answered Jun 21 '13 at 10:07

Problem SOLVED!!! But thanks for replying. My script was wrong. Here is the correct one.

function uploading(){
    var fileIn = $("#uploadbr")[0];
    //Has any file been selected yet?
    if (fileIn.files === undefined || fileIn.files.length == 0) {
        alert("Please select a file");
        return;
    }

    //We will upload only one file in this demo
    var file = fileIn.files[0];
    //Show the progress bar
    $("#progressbar").show();
var u = document.getElementById('uploadbr');
alert(u.value);
    $.ajax({
        url: "http://10.20.1.93:8080/Service1/UploadFile?fileName="+u.value,
        type: "POST",
        data: file,
        processData: false, //Work around #1
        contentType: file.type, //Work around #2
        success: function(){
            $("#progressbar").hide();
        },
        error: function(){alert("Failed");},
        //Work around #3
        xhr: function() {
            myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){
                myXhr.upload.addEventListener('progress',showProgress, false);
            } else {
                console.log("Upload progress is not supported.");
            }
            return myXhr;
        }
    });
}

from this i can upload almost any file with max size 64kb.

File uploaded WITHOUT its content to web service using jquery ajax

2 Answers2