通过form表单post方法提交文件,文件内容放置输入框,输入框类型为文件类型,可存放图片。
要想上传文件,首先需要点击选择要上传文件,那么如何能快捷选择本地电脑的文件呢?其实并不难,可以通过鼠标点击事件,打开本地电脑的文件,并且需要强调input输入框类型为file文件,点击该按钮则会弹出文件夹选择框。
这个是效果弹出文件:
选择了文件后该如何上传呢?上传文件也就是一个提交表单的过程,使用阿贾克斯请求,将获取到的内容通过html属性显示在input输入框中,并且将上传的图片拼接到输入的内容后面,之后进行页面更新。因为我们上传的文件中,有的图片大小不一,在题目中会显得很突兀,所以建议最好写一个方法设置图片的宽高,让每张图片看起来都大小一致,视觉上也会觉得舒服。
控制器:
首先进行判断,看是否有选择了文件,还要判断是否是符合的文件类型,获取文件后缀名,拼接文件名称,可以用日期和唯一标识符再加上文件得后缀。判断是否存在临时文件夹用于暂时保存未上传的文件,看是否有存放图片的文件夹,如果没有就需要创建。拼接保存文件物理详细路径,即再文件中唯一可以通过该路径查找到。如果拓展名不为空,将后缀改为小写,判断后缀是否是图片类型后缀,是则返回图片。
上传成功效果: