实现图片上传和预览以及多图上传

指尖跃动smile

于 2021-08-26 15:11:23 发布

阅读量642

点赞数

分类专栏： Js 文章标签： javascript html ajax

本文链接：https://blog.csdn.net/h_el_lo/article/details/119931701

版权

Js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用JavaScript的FormData对象处理文件数据，实现图片的预览和上传功能。通过创建FormData实例，将图片文件添加到表单数据中，然后使用Ajax进行POST请求，上传至服务器。同时，文章还涵盖了多图上传的处理方式，以及在上传过程中如何设置请求头以确保正确传输。

摘要由CSDN通过智能技术生成

前言

关于图片上传方法采用的是创建FormData对象处理文件数据和表单数据

预览图片


 function upload(th) {
        var file = th.currentTarget.files[0]
		// 创建文件读取对象
        var reader = new FileReader()
        reader.readAsDataURL(file)
        // 图片预览
        reader.onload = function (res) {
            var temp = `<div class="imgBox" οnclick="previewImg(this)">
                <img src="${this.result}" alt="" />
            </div>`
            $(".imgContent").append(temp)
        }
	
    }

上传图片

	// 创建FormData对象
       var formdata = new FormData()
       //第一个参数是后台接口字段名
       formdata.append('file',file)
       // 采用ajax请求
		 $.ajax({
                type:'post',
                url: '',
                data: formdata,
                processData: false,
                contentType: false,
                dataType: 'json',
            })

processData设置为false是因为提交的是FormData数据，不需要对数据进行处理，contentType设置为false是因为FormData默认的是multipart/form-data请求头，所以不需要设置请求头。
FormData上传等同于原生表单提交设置请求头multipart/form-data
原生表单提交请求头是x-www-form-urlencoded

多图上传

多图上传的话只需要把上传的图片对象放到一个数组里，然后在提交的函数里用formdata对象处理图片。

		  if(fileData && fileData.length > 0) {
            fileData.forEach(item => {
                formdata.append('pictures[]',item)
            })
        }