使用 jquery ajax 将不带内容的文件上传到 Web 服务答案

【问题标题】：File uploaded WITHOUT its content to web service using jquery ajax使用 jquery ajax 将不带内容的文件上传到 Web 服务
【发布时间】：2013-06-15 12:38:36
【问题描述】：

我正在使用 jquery ajax 上传文件，但问题是上传的文件没有内容。上传的文件为 0Kb。这是我的代码：

<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>

这是我在服务器端的代码。

 [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;
            }
        }

现在告诉我我能做什么？我哪里错了？

【问题讨论】：

标签： jquery ajax web-services web restful-url

【解决方案1】：

您无法使用 XMLHttpRequest(AJAX) 上传文件。
你可以改用这个插件this
此外，使用 XHR2，支持通过 AJAX 上传文件。例如。通过FormData 对象，但不幸的是，并非所有/旧浏览器都支持它。
Refrence1 Refrence2

【讨论】：

我没有使用 XMLHttpRequest(AJAX)。文件正在上传，但没有内容。
使用this 可以简化您的代码。您能否更具体地了解正在上传的文件没有内容
当我选择要上传的文本文件时，它会被上传，但它的内容不会被上传。意味着我有一些信息保存在一个 text.txt 中，它在磁盘上有一些大小，但是当我上传该文件时，它作为空文件上传，它在磁盘上的大小变为 0kb。

【解决方案2】：

问题解决了！！！但是感谢您的回复。我的剧本错了。这是正确的。

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;
        }
    });
}

从此我可以上传几乎任何最大大小为 64kb 的文件。

【讨论】：