前端/C# 前后台交互文件上傳、下載

試了很多方式，最終確認這個全面簡單版的。廢話不多說，貼碼。

文件上傳

input的type命名為file，即可實現文件上傳。嗯~~~現在html還是很強大的。Good！

前端

單個文件上傳

Html：

<form id="form1">
　　<input type="file" name="files" /> 
　　<input type="button" value="單文件上傳" onclick="uploadFile()"/>
</form>

Jquery：

在此基礎上，需要引用兩個js文件：

<script src="~/Scripts/jquery-1.8.2.min.js"></script>

<script src="~/Scripts/jquery.form.js"></script>

function uploadFile() {
$("#form1").ajaxSubmit({
url: "@Url.Action("UploadFile", "Home")",  //這里也可以寫成："/Home/UploadFile",其中Home是Controller的名字；UploadFile是方法名字
type: "post",
success: function (data) {
if (data == "True" || data == true) {
}
else {
}
},
error: function (aa) {
}
});
}

多文件上傳

Html：

<form enctype="multipart/form-data" id="form_example">
　　<input type="file" id="files" multiple onchange="addFile()"/><br /><br />
　　<input type="button" value="提交" id="submit" onclick="submitFile()" />
</form>
<div id='file-list-display'></div>

JS：

var fileList = [];

function addFile() {
var files = document.getElementById("files"),
fileListDisplay = document.getElementById('file-list-display');
for (var i = 0; i < files.files.length; i++) {
fileList.push(files.files[i]);
}

 

fileListDisplay.html = '';
fileList.forEach(function (file, index) {
var fileDisplayEl = document.createElement("p");
fileDisplayEl.innerHTML = (index + 1) + ":" + file.name;
fileListDisplay.appendChild(fileDisplayEl);
})
}

function submitFile() {
var formData = new FormData();
//循環添加到formData中
fileList.forEach(function (file) {
formData.append('files', file, file.name);
})

$.ajax({
url: "/Home/UploadFile",
type: 'POST',
data: formData,
// 告訴jQuery不要去處理發送的數據
processData: false,
// 告訴jQuery不要去設置Content-Type請求頭
contentType: false,
async: false,
success: function (data) {
if (data) {
}
}
});
}

后台（C#）

/// <summary>
        /// 文件上傳到本地
        /// </summary>
        public void Upload()
        {
            try
            {
                HttpFileCollection hpFiles = HttpContext.Current.Request.Files;
                for (int i = 0; i < hpFiles.Count; i++)
                {

                    if (hpFiles[i] == null || hpFiles[i].FileName.Trim() == "")
                    {
                        _Error = 1;
                        return;
                    }
                    string Ext = GetExt(hpFiles[i].FileName);
                    //if (!IsUpload(Ext))
                    //{
                    //    _Error = 2;
                    //    return;
                    //}
                    int iLen = hpFiles[i].ContentLength;
                    if (iLen > _MaxSize)
                    {
                        _Error = 3;
                        return;
                    }

                    if (!Directory.Exists(_SavePath)) Directory.CreateDirectory(_SavePath);
                    byte[] bData = new byte[iLen];
                    hpFiles[i].InputStream.Read(bData, 0, iLen);
                    string FName;
                    if (_IsChangeName)
                    {
                        FName = NewFileName(Ext);
                    }
                    else
                    {
                        FName = hpFiles[i].FileName;
                    }
                    FileStream newFile = new FileStream(_SavePath + FName, FileMode.OpenOrCreate);
                    newFile.Write(bData, 0, bData.Length);
                    newFile.Flush();
                    int _FileSizeTemp = hpFiles[i].ContentLength;

                    string ImageFilePath = _SavePath + FName;

                    newFile.Close();
                    newFile.Dispose();
                    _FileName = hpFiles[i].FileName;
                    _OutFileName = FName;
                    _FileSize = _FileSizeTemp;
                }
                _Error = 0;
                return;
            }
            catch (Exception ex)
            {
                _Error = 4;
                return;
            }
        }

源碼下載：https://files.cnblogs.com/files/pukua/UploadDemo.zip