一、基础表单上传图片
上传input样式重置,可自定义。
y
from 表单中必须添加该属性 enctype="multipart/form-data"，否则发送不出选择的数据
.btn .btn-primary .upload-picture-btn{
上传按钮样式自定义.....
input type ='file'标签 需display:none
}
/*=========================*/
method="post"
action=""
enctype="multipart/form-data"> //该属性必加
当前头像
你可以上传JPG、GIF或PNG格式的文件，文件大小不能超过2M。
上传新头像
form="settings-avatar-form" //表单中提交按钮需要 设置from的id 可直接发送提交
class="btn btn-primary upload-picture-btn">保存
for="fileBtn">
重新选择
// 控制上传图片方法
function headImg (that) {
$('#img').css({width:'270px',height:'270px'}) //控制上传头像大小
$('#upload-picture-btns').css({color:'#666666',marginLeft:'10px'})
let filePath = $(that).val();
let fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
// 生成浏览器上预览本地图片或者视频的路径
let src = window.URL.createObjectURL(that.files[0]);
// 检查是否是图片
if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
alert('上传错误,文件格式必须为：png/jpg/jpeg');
return;
}else{
$('.upImg').css('display','none');
$('.upImgs').css('display','block');
$('#img').attr('src',src); img标签设定本地图片地址
}
};
$('#fileBtn').change(function () {
headImg(this)
});
$('#fileBtns').change(function () {
headImg(this)
});
读取用户选择本地文件的内容，可使HTML5中添加的DOM的File API
const inputFiles = document.getElementById('input').files; // 打印出FileList对象,并有length
FileList对象(inputFiles[0])提供的三个属性包含有关该文件的有用信息。
name：该文件的名称为只读字符串。这只是文件名，不包含任何路径信息。
size ：文件大小(以字节为单位)作为只读64位整数。
type：将文件的MIME类型作为只读字符串或""无法确定类型
其他属性
lastModified: 1159190361027
lastModifiedDate: Thu May 30 12:21:01 GMT+0800 (中国标准时间) {}
webkitRelativePath: ""
window.URL.createObjectURL()
如果觉得《html表单导入图片 from 表单上传图片》对你有帮助，请点赞、收藏，并留下你的观点哦！
