网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

如何实现MVC文件上传支持批量上传拖拽及预览文件内容校验功能-创新互联

如何实现MVC文件上传支持批量上传拖拽及预览文件内容校验功能?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

专注于为中小企业提供网站建设、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业启东免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千多家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

网站中的上传相信大家都不陌生,也算是一个小小的技术难点,尤其时在asp.net中,上传的一些大小限制以及上传的进度的控制,以及用户体验等方面,今天在这里分享一个在asp.net mvc模式下的文件上传,同样适用于其它web类型bootstrap-fileinput .

它来自一个开源项目 github.com/kartik-v/bootstrap-fileinput/

文档地址:plugins.krajee.com/file-input

用一个下午的时间将文档通读了一次,并且做了根据文档指示做出了一个小型的demo,效果出奇的好,如下是效果图:

如何实现MVC文件上传支持批量上传拖拽及预览文件内容校验功能

如何实现MVC文件上传支持批量上传拖拽及预览文件内容校验功能

可以对文件预览筛选,从客户端就过滤一些不适用的文件,而且界面效果还特别美观

如下是使用方式:或者直接参照代码写就可以

使用方式:

1.nuget:Install-Package bootstrap-fileinput

如何实现MVC文件上传支持批量上传拖拽及预览文件内容校验功能

2.语言本地化{下载fileinput_locale_zh.js}或者修改Fileinput中的本地化词汇

下载地址:github.com/kartik-v/bootstrap-fileinput/tree/master/js/locales  【中文是zh.js】

文档结构:

如何实现MVC文件上传支持批量上传拖拽及预览文件内容校验功能

3.文件大小限制:修改fileinput.js中的3195行 maxFilePreviewSize配置节点

maxFilePreviewSize: 25600, // 25 MB  默认是25M,根据需要手动调整

示例:前台  --代码中的注释已经足够解释各配置项的作用,就不赘述了.

@{
  Layout = null;
}



  
  Index
  
  
  
  
  
  
  


  

后台:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.IO;
using System.Xml;
using System.Xml.Schema;
namespace UploadTest.Controllers
{
  public class HomeController : Controller
  {
    //
    // GET: /Home/
    public ActionResult Index()
    {
      return View();
    }
    public JsonResult UploadFile()
    {
      uploadResult result = new uploadResult();
      var oFile = Request.Files["txt_file"];
      result.fileName = oFile.FileName;
      Stream sm = oFile.InputStream;
      byte[] bt= new byte[sm.Length];
      sm.Read(bt, 0, (int)sm.Length);
      FileStream fs = new FileStream(AppDomain.CurrentDomain.BaseDirectory+oFile.FileName,FileMode.Create);
      fs.Write(bt, 0, bt.Length);
      fs.Close();
      fs.Dispose();
      sm.Close();
      sm.Dispose();
      return Json(result, JsonRequestBehavior.AllowGet);
    }
    public class uploadResult
    {
      public string fileName { get; set; }
      public string error { get; set; }
    }
  }
}

为了在前台正确的显示文件的错误信息,需要给前台返回一个带有error字段的json,其中error字段时必须的,否则无法显示后台回写的错误消息【这时必须的,官方文档中明确指出】

感谢各位的阅读!看完上述内容,你们对如何实现MVC文件上传支持批量上传拖拽及预览文件内容校验功能大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注创新互联成都网站设计公司行业资讯频道。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站栏目:如何实现MVC文件上传支持批量上传拖拽及预览文件内容校验功能-创新互联
分享地址:http://bjjierui.cn/article/shsih.html

其他资讯