程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> 關於.NET >> mvc file控件無刷新異步上傳操作源碼,mvcfile

mvc file控件無刷新異步上傳操作源碼,mvcfile

編輯:關於.NET

mvc file控件無刷新異步上傳操作源碼,mvcfile


前言

  上傳文件應該是很常見必不可少的一個操作,網上也有很多提供的上傳控件。今天遇到一個問題:input控件file無法進行異步無刷新上傳。真真的感到別扭。所以就嘗試這去處理了一下。主要分三個部分:上傳類的封裝,html input控件file處理和後台controller的調用。

上傳封裝類:

  此類主要兩個功能,一些簡單的篩選和文件重命名操作。

文件的篩選包括:

  文件類型,文件大小

重命名:

  其中默認為不進行重命名操作,其中重命名默認為時間字符串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">文件規定大小</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);
   //文件夾不存在就創建
   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;
  }
 }
}

上傳文件的方法在這也沒有什麼過得的介紹。看代碼注釋應該都好理解。

頁面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不支持異步無刷新上傳,故此用調用跳轉到iframe的方式進行上傳無刷新操作。

以上頁面就是上傳控件的html定義。有幾點要注意的

1.enctype="multipart/form-data"必須加上,表單中enctype="multipart/form-data"的意思,是設置表單的MIME編碼。默認情況,這個編碼格式是application/x-www-form-urlencoded,不能用於文件上傳;只有使用了multipart/form-data,才能完整的傳遞文件數據,進行下面的操作. enctype="multipart/form-data"是上傳二進制數據; form裡面的input的值以2進制的方式傳過去。

2.form的name 要加上

3.提交按鈕是submit,當然你如果想寫js 設置成button也成。這個沒什麼好說的。

4.iframe 中

以上就是整個的布局和提交上傳文件到後台,並且跳轉到ifrom中,接下來就是接受調用上面上傳文件的方法。然後在iframe頁面提示上傳結果,然後把iframe關閉即可。

後台代碼:

 [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的腳本先彈出提示框;在關閉窗口

3.根據你自己的需要去調用UploadFile的msg(錯誤提示),FullName (全名稱), FileName文件名稱進行操作

4.window.top.close()關閉當前iframe的窗口,針對於兼容性請大家自行處理,我測試的沒有問題。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持幫客之家。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved