Js文件上传

前言

文件上传是一个前端比较常见的功能,无论是以前的MVC客户端,还是现代化SPA客户端中,但万变不离其宗,其内核基本不变,本文就此讨论简单文件上传(以图片为例子)。

解决问题:

  • 使用js上传一张图片

  • 使用js选择一张图片预览,再上传

  • 使用js上传多张图片

mvc上传图片

mvc客户端可以直接使用form表单上传,指定表单提交内容类型为 enctype="multipart/form-data" 即可。

<form action="uplaod" method="POST" enctype="multipart/form-data">
  <input type="file" name="select">
  <input type="submit">
</form>

使用js上传一张图片

图片选择

使用js来上传页面上还是使用input元素,需要使用到input元素的change事件。

<input type="file" class="select" id="select" />

给input绑定change事件,可以在事件传递中获取到选择图片对象。不过因为这个对象比较特殊,所以这个对象是不能直接看见的。

不过,这个对象有一个files属性,对应了选中的图片,是一个FileList对象,FileList对象和数组一样有一个length属性,但没有数组的其他特性。可以像数组一样使用index(索引)来获取子对象和使用length(长度)来循环。

document.querySelect('#select').addEventListener('change', e => {
    //直接打印出选中的第一个图片对象
    console.log(e.target.files[0])
    //判断是否有文件
    if(!e.target.files) return 
    //上传单个图片
    upload(e.target.files[0])
})

图片上传

拿到了选中的图片,下一个就是上传给后端。需要使用到FormData对象。使用FormData的append方法将单个图片对象放到FoemData中。建议使用三个参数的append方法,也可以使用两个参数。

const upload = file => {
    let formData = new FormData()
    //添加图片到FormData对象,参数分别为key,图片对象,图片名
    formData.append('upload', file, file.name)
    //上传,Jq/Axios/xhr/fetch随意
    ...
}

使用js预览文件再上传

相比于上面的直接上传,大家肯定都喜欢先本地预览图片,再确定是否上传。当然你完全可以先上传图片到服务器做临时文件来预览,用户确认后再持久化。对此只能说:可以,但没必要

图片预览

在上面的基础上,再加上一个img标签来预览图片。

<input type="file" class="select" id="select" />
<img src="" alt="" id="preview"/>

使用js将文件转为base64字符串,再用img来预览。

const previewFile = file => {
    let temporaryFileReader
    if(file){
        //创建对象流,转换时给base64字符串加上特性URL
        temporaryFileReader = new FileReader()
        temporaryFileReader.readAsDataURL(file)
    }
    //转换完毕,将字符串作为img标签的src属性值
    temporaryFileReader.addEventListener('load', e => {
        document.querySelector('img').src = e.target.result
    }, false);
}

上传多张图片

给input加上multiple属性即可同时选中多张图片。

<input type="file" class="select" id="select" multiple/>

图片上传

FormData的append方法会智能地根据key来追加内容,如果需要查看同一个key下所有文件对象,需要使用getAll方法,get方法默认获取第一个对象。

//多图片上传需要使用同一个FormData对象,提升作用域,避免追加失败
let formData = new FormData()

document.querySelect('#select').addEventListener('change', e => {
    //直接打印出选中的第一个图片对象
    console.log(e.target.files[0])
    //判断是否有文件
    if(!e.target.files) return 
    //循环上传多个图片
    for(let i = 0; i < e.target.files.length; i++)
        upload(e.target.files[i])
})
    
const addFile = file => {
    //添加图片到FormData对象,参数分别为key,图片对象,图片名
    formData.append('upload', file, file.name)
    //每次执行formData内部文件都会加1
    console.log(formData)
}

//上传,Jq/Axios/HttpClient随意
 ...

要预览多张图片,可以使用js来直接追加内容或者创建img标签,如果是SPA,可以直接使用数据绑定和列表渲染,将转换的base64字符串直接循环绑定到img的src属性

总结

总的来说,就是调用API(DOM对象事件监听,文件流,还有就是HTTP请求)。本文讨论的上传图片,还可以使用file对象的属性判断文件类型和大小,完成一些限制。

发布时间:2021-05-06
其他阅读

使用中间件记录网站访问日志记录

对于网站访问日志的记录,一般情况下都是使用现有的日志服务,比如谷歌分析引入轻量 js 文件即可。本文主要介绍对于现有的 Asp.Net Core 网站使用中间件快速记录访问日志。使用中间件的好处:在服务端进行处理,无视客户端类型(特殊信息无法获取);统一处理,不需要对每个地址重复处理等。

查看原文

Winform中设置控件边框

本文将会介绍在Winform中如何设置控件的边框,可应用于Form和Panel等。

查看原文

个人简介

你好,我是猪头少年,是一名定居在云南的软件工程师,主要的开发语言为 C#JavaScript,涉及 ASP.NET CoreWPFAngularUnity 以及 Babylon.js。平时喜欢自驾出游。欢迎大家联系我。

查看原文

LinqPad 8 分享下载

LinqPad是一个 .Net 快速验证工具,使得.Net开发者可以不借助 Visual Studio 就可以快速验证想法,毕竟vs冷启动和创建项目耗时久,负担大。本文分享一个LinqPad学习版,可直接下载使用。

查看原文

管道技术——中间件的灵魂

在现代Web开发中,中间件技术使用越来越广泛,本文带大家了解中间件的基础,同时也是中间件的灵魂所在,管道技术。在C#中,依赖于委托,我们可以很容易就实现一个中间件管道。所以在阅读本文前,请确保你已经学会了什么是委托,包括但不限于Delegate,Action,Func。除此之外,本文还会使用到反射相关知识,请确保你已经学会了什么是反射。

查看原文