LayUI+asp.net图片上传详解

在一些网站后台经常会有图片上传的场景。例如我之前的后台管理系统中的文章图片。

Layui官方给出的演示只有前端，那么我们先来看看前端的代码。

01

html代码

首先是html部分，我这里用的是Layui的表单，每个layui-form-item代表一行。

从代码上可以看出有一个上传按钮用来触发上传动作，一个图片控件用来显示图片，一个隐藏控件用来接收上传后图片在服务器上保存的路径（这个不是必须的，因为我接下来表单提交用到的是data.field）。

02

JS代码

接下来就是JS的代码，JS代码部分主要是实现按钮提交的动作，调用后台接口将图片保存到服务器上。

upload必须要引用，并且初始化。然后上传方法的参数：

elem：按钮ID

url：后台接口

before：上传之前将图片直接预览到图片控件，不管上传是否成功。

done：上传完成，指的是调用接口完成，实际上可分为上传成功和上传失败。可以根据res返回值进行进一步判断。

03

后台代码

后端我采用的是MVC框架。LoginFilter是登录验证，这里就不讲了。因为要返回的是Json数据，所以定义了一个JsonResult。

Request.Files是本次请求中提交的文件内容，之所以用循环，是因为你可能会上传多个文件（下次讲）。循环内的内容先是判断文件是否为空或者是不是空文件（或者加一些其它的判断条件）。然后判断保存的路径是否存在，不存在则新建。

一般情况下，保存的文件最好根据时间或者其它规则重新命名，我这里没有做。path就是服务器保存路径，uploadFile.FileName是上传文件的文件名，uploadFile.SaveAs(path)保存即可。我们要返回给前端路径是src。

如果保存成功的话，Json中的code值为0，不成功的话，跳转到catch中，code的值为1，并且msg获取到出错的内容。

回到前端JS，done中则是靠res.code判断本次上传是否成功以及不同的处理方式。图片的网址也返回给了隐藏控件Url了。

好了本次内容就到这里了，有问题可以联系我。