上传图片文件(一)

开发工具与关键技术：VS+图片上传
作者： 李伙
撰写时间： 2019年5月14日

在学习MVC过程中，我们学到手动录入题目信息，录入题目信息时，要判断题目到底是单选题、多选题还是判断题，单选题跟多选题差不多，也是有四个选项以上的，而判断题则只有两个选项，所以一开始就要先判断一下题目是属于哪种类型的，如果是判断题的话就只能添加两个选项，多的话就删除掉。如果是单选题或多选题的话就添加多个选项，但也不能添加太多选项，一般都是六个选项就差不多了，多于六个就提醒用户不能再添加选项了。在录入题目信息时，我们有可能需要上传图片，因为有些题目是需要图片来辅助的，所以接下来就讲讲怎样上传图片文件的。然后在下一篇讲讲如何保存题目信息的。
先看看上传图片文件的html部分的代码：

如上图所示，外面一个div包裹住一个form表单，form表单里面再添加一个input标签，这样就形成了一个添加图片文件的form表单。action表示表单提交的方法，enctype属性表示规定规定在发送到服务器之前应该如何对表单数据进行编码，multipart/form-data 不对字符编码。
再看看js部分的代码：

如上图所示，先给添加图片文件的按钮一个onclick点击事件，然后onclick点击事件里面添加form表单里的input[type=‘file’]的点击事件，然后就会弹出文件选择器，然后就可以选择需要上传的图片文件。
选择好图片后就是上传图片文件了。所以先给form表单里的input标签一个onchange改变事件，然后在里面写需要执行的代码。可以看出我们是用到ajaxSubmit()方法来提交表单的。ajaxSubmit()提交表单:我们直接通过form提交的话,提交后当前页面跳转到form的action所指向的页面。然而，很多时候我们并不希望提交表单后页面跳转，那么，我们就可以使用ajaxSubmit(obj)来提交数据。ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法，所以使用此方法需要先引入这个插件。在传入图片时，我们可能是先写一些题目内容再传入图片的，所以我们要先获取内容框中已有的内容然后再将上传的图片拼接到已输入的内容后面。
写好js部分的代码后，就写控制器的代码：

如上图所示，(1)先用“try catch”来捕获异常，(2)然后判断文件是否为空，不为空则继续执行下面的代码，(3)获取文件后缀，(4)自定义文件名，这里自定义的文件名是根据时间+唯一标识符+文件后缀名定义的，(5)临时保存上传的图片的文件夹，不存在此文件夹就创建，(6)最终保存上传图片的文件，不存在此文件夹就创建，(7)拼接保存文件的详细路径，因为这里的图片还未保存到数据库中，所以就先保存到临时文件夹中，到保存到数据库中这一步骤时，才把临时文件夹中的图片保存到最终文件夹中。

如上图所示，拼接保存文件的详细路径后，就到判断文件扩展名是否为空，若扩展名不为空则判断文件是否是指定的图片类型 ,若不是指定的图片类型就提醒用户只支持上传图片文件，然后保存文件，再拼接返回img标签。