上传文件的功能

开发工具与关键技术：vs，mvc
作者：陈锦通
撰写时间：2019年4月3日星期三

我们在开发中有的时候的会用到文件的上传比如（图片，文本，表格）等等。那这篇我给你带来的是图片的文件上传的思路和代码的编写。
第一：你要知道上传文件的位置在那个控制器里面的那个页面里面的那个标签里。

看上图我要放文件的地方是：oneController.cs这个控制器里面（如下图的代码）Index这个页面里，然后进到页面代码里

面的一个div里，代码是

这就是我文件上传的地址。
是不是以为这个就可以了呢！那是不可能的因为代码都还没有开始编写！我只不过是确定了一个文件上传的地址而已。下面是文件上传的代码思路。

第二：文件上传的思路和代码的分析
首先我给页面一个上传文件的按钮：
添加文件
再给它一个可以编辑的div：

问：div还可以编辑？ 答：可以的，给div这个contenteditable属性，这个属性的意思是规定是否可编辑元素的内容它的值，两个第一个：true是规定可编辑 第二个：false是规定元素不可编辑。 下图是可编写的div：（我把这样的div叫做“伪”文本输入框）。  上面的效果图如下图：  问：那个上传的按钮只要点击就可以上传文件了吗？ 答：不可能的，那个上传文件的按钮点击的时候，让它执行一个点击事件才可以上传的，  要出来这样的一个文件选择这样（如上图）的框就要用到input标签，因为只有这个标签才可以弹出这样的一个框。代码是： type里面的file是规定把输入作为文件类型来处理。 然后给上传的按钮一个方法，让它点击的时候去执行下面这个方法：

function sqlswj() {
$("#bcddf input[type=‘file’]").click();
}
这个方法的意思是在bcddf 这个ID里面的有[type=’file’] 这个属性的input标签里面的点击事件。然后点击那个上传的按钮就可以上传了不过你要把这个input标签隐藏起来就会让别人认为他点击了那个按钮就可以上传了。?
我把这个input标签和form表单放在同一个div里，要问为什么要from表单的话，因为在你不隐藏这个div时可以让你知道你上传的文件的名字，

还要说的是这个form里面的属性action是向什么地方提交的的地址/one是控制器所在的位置OneOpen是控制器那里的一个方法，enctype是如果使用包含文件上传控件的表单时，必须使用的。因为这是规定的。

问：OneOpen这个方法是干什么用的
答：这个方法是接收添加文件按钮传来的文件，然后对文件进行处理的一个方法
public ActionResult OneOpen(HttpPostedFileBase one)
这个one是和页面那里的input标签里面的name=”one”的这个one相等，因为是通过这个来传递文件的，当文件传过来后，用try来捕捉错误，有错误就报提示上传的数据异常。然后用if来判断one传过来的是不是null如果是null就提示上传的文件为空。如果不是null就获取文件的类型
string tpJPE = System.IO.Path.GetExtension(one.FileName);
GetExtension是返回指定的路径字符串的扩展名，获取扩展名之后就创建文件的名称
string fileName = DateTime.Now.ToString(“yyyy-MM-dd”)+ Guid.NewGuid() + tpJPE，
文件名：DateTime+Guid+文件的扩展名。
DateTime是获取当前时间格式是(“yyyy-MM-dd”)yyyy是年份，MM是月份，dd是日期，Guid是全局唯一标识符。全部的意思是日期时间加全局唯一标识符加文件扩展名来组成文件名称。然后进行保存的操作，在保存之前要检查文件目录是否存在，如果不存在就创建
if (!Directory.Exists(Server.MapPath("~/LSWJ/TP/Temp/")))
注意：不要少了“/”
{
Directory.CreateDirectory(Server.MapPath("~/LSWJ/TP/Temp"));
}
意思：if来判断目录~/LSWJ/TP/Temp/是否存在，如果不存在就创建。Directory是公开用于创建、移动和枚举通过目录和子目录的静态方法，CreateDirectory是指定路径创建所有目录和子目录，括号里面是Server.MapPath是指定虚拟路径相对的物理路径。虚拟路径是控制器是写的路径，物理路径是指计算机上的实际存在的文件路径。创建完路径之后，是写个方法来装保存的路径。
string bclj = Server.MapPath("/LSWJ/TP/Temp/") + fileName;
if (tpJPE != null)
再来用if判断图片扩展名是否为空
tpJPE = tpJPE.ToLower();
然后把扩展名的后缀名的字母转化为小写，ToLower()方法是把字母转化为小写
if ("(.gif)|(.jpg)|(.bmp)|(.jpeg)|(.png)".Contains(tpJPE))
if来判断文件的后缀名是否符合你需要文件的后缀名，如果不是就提示“只支持上传图片文件(gif,jpg,bmp,jpeg,png)”
如果都符合你要的文件后缀名后，把文件保存在保存的文件夹里面
one.SaveAs(bclj);
上面的bclj是一个方法来装文件的保存路径，把文件返回到页面中的div里
string str = “<img “AutoResizeImage(300,300,this)”” + “src=”/LSWJ/TP/Temp/" + fileName + “”/>";
““是转义字符
括号里面的（参数1,参数2,参数3）是图片的尺寸，参数1是最大的宽度，参数2最大的高度，参数3是要改变的图片
return Json(msg, JsonRequestBehavior.AllowGet);
这是这个控制器方法返回的值，通过msg来返回文件给页面的一个方法来接收
function funoop() {
//ajaxSubmit是jquery.form.js的一个方法。
//jquery.form.js是一个插件。
//控制器通过msg来返回，到这里是的data对象
$(”#bcddf”).ajaxSubmit(function (data) {
//data状态值
if (data.State) {
var str = $("#abc").html();
//str通过累加的方式
str += data.Text;
$("#abc").html(str);
} else {
alert(“????”);
}
});
}
这个方法最后给input使用，最后就通过上传按钮来触发input的事件最后图片就出现在页面的div标签上。