前端项目中嵌入grafana面板前端formdata

转载

mob6454cc7acbf7 2024-08-12 13:57:03

1.前言

2.HTML5 FormData 方法介绍以及实现文件上传

步骤：

1.问题描述

2.例子

3.HttpPostedFileBase 类

参考

1.前言

在做MVC框架下一个项目，web端使用form表单提交信息给后台，在提交的信息中有文件,一开始不知道如何处理，后来在在博客上看到别人发的解决了我说遇到的问题，在此进行整理并延伸。

前端通过form表单提交图片，图片类型为file，后台如何接收？

1.FormData介绍

FormData是ES提供的一个API，使用它可以实现ajax的文件提交。fomdata实际上是 XMLHttpRequest一个对象，利用它来提交表单、模拟表单提交，使用formData进行传递，好处是可以传递文件和图片。

2.基本用法：

FormData对象，可以把所有表单元素的name与value组成一个queryString，提交到后台。只需要把 form 表单作为参数传入 FormData 构造函数即可：

var form = document.getElementById("form1");

var formData = new FormData(form);

3.代码书写

htlm和js代码直接看参考：

控制台接收数据

前端项目中嵌入grafana面板前端formdata_Data

在控制台接收数据中，文件类型的图片以HttpPostedFileBase实例接收，因此下面特地对HttpPostFileBase类进行了一定的学习

注意：首先要注意因为上传文件，对上传的大小有一定要求，get请求一般最大为2k,post理论上事没有大小限制的，所以这里选择post请求

命名空间:System.Web

程序集:System.Web.dll

定义

用作某种类的基类，前者提供对已由客户端上载的单个文件的访问.

因此前台上传的文件则有该类型为该类的形参进行接收。

表 1 属性

ContentLength	在派生类中重写时，获取已上载文件的大小（以字节为单位）。
ContentType	在派生类中重写时，获取已上载文件的 MIME 内容类型。
FileName	当在派生类中被重写时，获取客户端上文件的完全限定名称（绝对路径）。
InputStream	当在派生类中重写时，获取指向上载文件的 Stream 对象，以准备读取该文件的内容。

表 2 方法

Equals(Object)	确定指定的对象是否等于当前对象。 (继承自 Object)
GetHashCode()	用作默认哈希函数。 (继承自 Object)
GetType()	获取当前实例的 Type。 (继承自 Object)
MemberwiseClone()	创建当前 Object 的浅表副本。 (继承自 Object)
SaveAs(String)	在派生类中重写时，保存已上载文件的内容。
ToString()	返回一个表示当前对象的 string。 (继承自 Object)