JavaScript实现图片上传并预览并提交ajax（完整demo）

您所在的位置：网站首页 › artbreeder如何上传图片 › JavaScript实现图片上传并预览并提交ajax（完整demo）

JavaScript实现图片上传并预览并提交ajax（完整demo）

2024-05-16 20:10| 来源: 网络整理| 查看: 265

图片上传并预览

2021.03.31更新并附完整demo，点击下载

在这里插入图片描述

HTML css .file-box { position: relative; display: inline-block; } .file-box img { width: 50px; height: 50px; border-radius: 50%; position: absolute; top: -30px; left: 0; display: inline-block; border: none; } .file-box .txt,.file-box .file { width: 70px; height: 36px; position: absolute; top: -20px; left: 100px; text-align: center; } JS function imgPreview(fileDom) { //判断是否支持FileReader if(window.FileReader) { var reader = new FileReader(); } else { alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！"); } //获取文件 var file = fileDom.files[0]; var imageType = /^image\//; //是否是图片 if(!imageType.test(file.type)) { alert("请选择图片！"); return; } //读取完成 reader.onload = function(e) { //获取图片dom var img = document.getElementById("preview"); //图片路径设置为读取的图片 img.src = e.target.result; }; reader.readAsDataURL(file); } 上传图片提交ajax

如果想把图片信息通过ajax传给后端，则需要通过new FormData() 上传图片信息，然后使用 append() 方法向该对象里添加字段，具体代码如下：

(注：以下代码在图片预览成功后执行，也就是在reader.readAsDataURL(file); 后)

这里写图片描述

【本文地址】

JavaScript实现图片上传并预览并提交ajax（完整demo）

JavaScript实现图片上传并预览并提交ajax（完整demo）

今日新闻

推荐新闻