溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了如何解決mvcfile控件無刷新異步上傳操作源碼，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
上傳文件應(yīng)該是很常見必不可少的一個操作，網(wǎng)上也有很多提供的上傳控件。今天遇到一個問題：input控件file無法進行異步無刷新上傳。主要分三個部分：上傳類的封裝，html input控件file處理和后臺controller的調(diào)用。
上傳封裝類：
此類主要兩個功能，一些簡單的篩選和文件重命名操作。
文件的篩選包括：
文件類型，文件大小
重命名：
其中默認為不進行重命名操作，其中重命名默認為時間字符串DateTime.Now.ToString("yyyyMMddHHmmss")
文件地址：
可進行自定義。相對地址與絕對地址都可以。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.IO;
using System.Web;
namespace CommonHelper
{
public class UploadFile : System.Web.UI.Page
{
public UploadFile()
{
}
//錯誤信息
public string msg { get; set; }
public string FullName { get; set; }
//文件名稱
public string FileName { get; set; }
/// <summary>
/// 文件上傳
/// by wyl 20161019
/// </summary>
/// <param name="filepath">文件上傳地址</param>
/// <param name="size">文件規(guī)定大小</param>
/// <param name="filetype">文件類型</param>
/// <param name="files">file上傳的文件</param>
/// <param name="isrename">是否重名名</param>
/// <returns></returns>
public bool upload_file(string filepath, int size, string[] filetype, bool isrename = false)
{
filepath = Server.MapPath(filepath);
//文件夾不存在就創(chuàng)建
if (!Directory.Exists(filepath))
Directory.CreateDirectory(filepath);
if (HttpContext.Current.Request.Files.Count == 0)
{
msg = "文件上傳失敗";
return false;
}
msg = "上傳成功";
var file = HttpContext.Current.Request.Files[0];
if (file.ContentLength == 0)
{
msg = "文件大小為0";
return false;
}
if (file.ContentLength > size * 1024)
{
msg = "文件超出指定大小";
return false;
}
var filex = HttpContext.Current.Request.Files[0];
string fileExt = Path.GetExtension(filex.FileName).ToLower();
if (filetype.Count(a => a == fileExt) < 1)
{
msg = "文件類型不支持";
return false;
}
if (isrename)
FileName = DateTime.Now.ToString("yyyyMMddHHmmss") + fileExt;
FileName = filex.FileName;
FullName = Path.Combine(filepath, FileName);
file.SaveAs(FullName);
return true;
}
}
}上傳文件的方法在這也沒有什么過得的介紹?？创a注釋應(yīng)該都好理解。
頁面html
<div class="content"> <form method="post" target="hidden_frame" enctype="multipart/form-data" action="/CustomFrom/FormDesign/FileUpload" name="form"> <input class="m input" name="fileName" type="file"> <input class="btn file-input" value="提交..." name="F2" type="submit"> <iframe id="hidden_frame" name="F2" > <html> <head></head> <body></body> </html> </iframe> </form> </div>
注：因為mvc上傳文件input控件file不支持異步無刷新上傳，故此用調(diào)用跳轉(zhuǎn)到iframe的方式進行上傳無刷新操作。
以上頁面就是上傳控件的html定義。有幾點要注意的
1.enctype="multipart/form-data"必須加上，表單中enctype="multipart/form-data"的意思，是設(shè)置表單的MIME編碼。默認情況，這個編碼格式是application/x-www-form-urlencoded，不能用于文件上傳；只有使用了multipart/form-data，才能完整的傳遞文件數(shù)據(jù)，進行下面的操作. enctype="multipart/form-data"是上傳二進制數(shù)據(jù); form里面的input的值以2進制的方式傳過去。
2.form的name 要加上
3.提交按鈕是submit，當然你如果想寫js 設(shè)置成button也成。這個沒什么好說的。
4.iframe 中
以上就是整個的布局和提交上傳文件到后臺，并且跳轉(zhuǎn)到ifrom中，接下來就是接受調(diào)用上面上傳文件的方法。然后在iframe頁面提示上傳結(jié)果，然后把iframe關(guān)閉即可。
后臺代碼：
[HttpPost]
public ActionResult FileUpload()
{
//從配置文件中獲取支持上傳文件格式
string[] fileType = ConfigurationManager.AppSettings["fileType"].Split('|');
//上傳文件路徑
string strPath = ConfigurationManager.AppSettings["strPath"];
UploadFile file= new UploadFile();
bool flag = file.upload_file(strPath, 25000, fileType);
return Content("<script>window.alert('" + file.msg + "');window.top.close()</script>");
}注：
1.文件路徑，文件保存路徑放在了配置文件中，當然你也可以把文件大小，是否重命名都放到配置文件中。
2.返回到view的腳本先彈出提示框；在關(guān)閉窗口
3.根據(jù)你自己的需要去調(diào)用UploadFile的msg（錯誤提示），F(xiàn)ullName （全名稱）， FileName文件名稱進行操作
4.window.top.close()關(guān)閉當前iframe的窗口，針對于兼容性請大家自行處理，我測試的沒有問題。
上述內(nèi)容就是如何解決mvcfile控件無刷新異步上傳操作源碼，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼