分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

表单上传文件,asp.net mvc5

发布时间:2023-09-06 02:00责任编辑:彭小芳关键词:暂无标签
  • 摘要

    本文主要总计,在mvc5中前台上传文件的几种方式。

  • 后台代码 

  _hostingEnvironment为IHostingEnvironment 用于获取当前程序物理路径

  _hostingEnvironment.WebRootPath 获取路径 “程序根目录/wwwroot”

     [HttpPost] ???????public ActionResult UploadFile(List<IFormFile> files) ???????{ ???????????string name = Guid.NewGuid().ToString("n"); ???????????string filePath = _hostingEnvironment.WebRootPath+@"/Files/"; ???????????foreach (var formFile in files) ???????????{ ???????????????string ext = System.IO.Path.GetExtension(formFile.FileName); ???????????????System.IO.Directory.CreateDirectory(filePath); ???????????????if (formFile.Length > 0) ???????????????{ ???????????????????string path = filePath + name + ext; ???????????????????using (var stream = new FileStream(path, FileMode.Create)) ???????????????????{ ???????????????????????formFile.CopyToAsync(stream); ???????????????????} ???????????????} ???????????} ???????????return RedirectToAction("List"); ???????}
  • 前台代码 
  1.  传统表单上传文件
<form method="post" enctype="multipart/form-data" action="@Url.Action("UploadFile")"> ???<div class="form-group"> ???????<div class="col-md-10"> ???????????<p>选择文件</p> ???????????<input type="file" name="files" multiple /> ???????</div> ???</div> ???<div class="form-group"> ???????<div class="col-md-10"> ???????????<input type="submit" value="上 传" /> ???????</div> ???</div></form>

2.使用ajax上传文件

 1 <form enctype="multipart/form-data"> 2 ????<div class="form-group"> 3 ????????<div class="col-md-10"> 4 ????????????<p>选择文件</p> 5 ????????????<input type="file" id="file" name="files" multiple /> 6 ????????</div> 7 ????</div> 8 ????<div class="form-group"> 9 ????????<div class="col-md-10">10 ????????????<input type="button" onclick="ajaxupload()" value="ajax上传" />11 ????????????<input type="button" onclick="formdataupload()" value="formdata对象上 传" />12 ????????????<input type="button" onclick="uploadfile()" value="上 传" />13 ????????</div>14 ????</div>15 </form>16 17 <script>18 ????function ajaxupload() {19 ????????var form = new FormData(document.querySelector("form"));20 ????????$.ajax({21 ????????????url: "@Url.Action("UploadFile")",22 ????????????type: "POST",23 ????????????data: form,24 ????????????processData: false, ?// 不处理数据25 ????????????contentType: false ??// 不设置内容类型26 ????????});27 ????}28 </script>
View Code

3.FormData对象文件上传

1 <script>2 ????function formdataupload() {3 4 ????????var formdata = new FormData(document.querySelector("form"));5 ????????var requst = new XMLHttpRequest();6 ????????requst.open("post", "@Url.Action("UploadFile")");7 ????????requst.send(formdata);8 ????}9 </script>
FormData对象

参考地址

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

表单上传文件,asp.net mvc5

原文地址:https://www.cnblogs.com/kmdatong/p/9211124.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved