文件上传详解 (HTML FILE)

时间:2021-09-12 09:20:23

FileUpload 对象

在 HTML 文档中 <input type="file"> 标签每出现一次,一个 FileUpload 对象就会被创建。

该元素包含一个文本输入字段,用来输入文件名,还有一个按钮,用来打开文件选择对话框以便图形化选择文件。

该元素的 value 属性保存了用户指定的文件的名称,但是当包含一个 file-upload 元素的表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。

为安全起见,file-upload 元素不允许 HTML 作者或 JavaScript 程序员指定一个默认的文件名。HTML value 属性被忽略,并且对于此类元素来说,value 属性是只读的,这意味着只有用户可以输入一个文件名。当用户选择或编辑一个文件名,file-upload 元素触发 onchange 事件句柄。

您可以通过遍历表单的 elements[] 数组,或者通过使用 document.getElementById()来访问 FileUpload 对象。

FileUpload 对象的属性

属性 描述
accept 设置或返回指示文件传输的 MIME 类型的列表(逗号分隔)。
accessKey 设置或返回访问 FileUpload 对象的快捷键。
alt 设置或返回不支持 <input type="file"> 时显示的替代文字。
defaultValue 设置或返回 FileUpload 对象的初始值。
disabled 设置或返回是否禁用 FileUpload 对象。
form 返回对包含 FileUpload 对象的表单的引用。
id 设置或返回 FileUpload 对象的 id。
name 设置或返回 FileUpload 对象的名称。
tabIndex 设置或返回定义 FileUpload 对象的 tab 键控制次序的索引号。
type 返回表单元素的类型。对于 FileUpload ,则是 "file" 。
value 返回由用户输入设置的文本后,FileUpload 对象的文件名。

标准属性

属性 描述
className 设置或返回元素的 class 属性。
dir 设置或返回文本的方向。
lang 设置或返回元素的语言代码。
title 设置或返回元素的 title 属性。

FileUpload 对象的方法

方法 描述
blur() 从 FileUpload 对象上移开焦点。
focus() 为 FileUpload 对象赋予焦点。
select() 选取 FileUpload 对象。

MVC FileUpload - Form

  *文件上传有多种途径,其中包括Form 表单提交方式,以下是操作步骤

  1.设置<form>表单属性

    action = "提交地址";  在mvc中默认"/"(当前控制器)

    method = "提交方式";  必须选用 Post,Get方式无法获取file数据

    

  2.保存文件

    使用 System.Web.HttpContext.Current.Requst.Files[];接收文件,文件类型为 HttpPosteFile

注意事项:

  *.Foram表单提交数据超过默认大小 maxRquestLength(4Mb)便无法成功上传,需修改 web.config

    <httpRuntime maxRquestLnegth="kb"></httpRuntime>

   MVC 借助框架生成器生成项目存在两个 Web.config 第一个存在于根目录,第二个存在于Views视图文件夹下,按照就近原则如果配置Views文件夹下Web.config 对此时无效,因为这些配置只针对于 cshtml 视图,但是HTTP 请求与表单提交的执行由路由指向 Controller 控制器中,因此必须配置外部 Web.config