html表单导入图片,from 表单上传图片

一、基础表单上传图片

上传input样式重置,可自定义。

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 2019 12:21:01 GMT+0800 (中国标准时间) {}

webkitRelativePath: ""

window.URL.createObjectURL()

html表单导入图片,from 表单上传图片相关推荐

win10误删的注册表能还原吗_win10注册表怎么导入 win10注册表误删除怎么恢复
注册表是系统的重要数据组件,包含有系统中的各种关键信息和应用,有些用户不太注重注册表,只有等到 win10注册表怎么导入: 1.首先在登录win10系统打开注册表,在打开的注册表编辑器中点击文件--导 ...
html表单ui图片,semantic-ui 表单(示例代码)
1.定义表单先看一个基础的表单,再讲解一下: Submit semantic中的表单,其实就是在form标签中加一个ui form的class即可下面的使用div将input包含主要是为了好理解, ...
html表单应用图片,在表单(FORM)中使用图片的例子
CSS 语言: CSSSCSS 确定 * { box-sizing: border-box; } .container { padding: 1em; } form { margin: 30px au ...
MySQL表如何导入图片_mysql中怎样插入图片
mysql中插入图片的方法:首先要在数据库中建表:然后装载JDBC驱动,建立连接:最后创建Statement接口类,来执行SQL语句即可. mysql中插入图片的方法: 1.首先,先要在数据库中建表. ...
MySQL表如何导入图片_excel怎么把图片导入表格
我们在制作excel表格的时候,可以相对插一些图片进去,让整个excel表格显得更丰富一点,对于新手来说还是有一定难度,怎么办?下面是学习啦小编整理的excel把图片放进去的方法,欢迎大家来到学习啦学 ...
mysql导入库排除某个表_mysql导入数据排除表-mysql导入数据排除某张表或多张表-吾爱编程网...
mysql在导出数据的时候可以使用--ignore-table参数来排除某张或者多张表,在数据库导入同样也可以使用,接下来吾爱编程就为大家介绍一下关于mysql导入数据排除某张表或多张表的方法,有需要 ...
mysql清除表空间导入_MySQL 清除表空间碎片
碎片产生的原因 (1)表的存储会出现碎片化,每当删除了一行内容,该段空间就会变为空白.被留空,而在一段时间内的大量删除操作,会使这种留空的空间变得比存储列表内容所使用的空间更大; (2)当执行插入操作 ...
使用教程--通过Excel模板导入数据到表单
大家好,增加Excel导入数据功能在挺早之前就列在我的开发计划中了.由于各种事耽搁,导致才上线这个功能.废话不多说了.直接讲讲,在Z平台中是怎样用Excel导入数据的. 我以两个例子来为大家讲解使用方 ...
511遇见易语言资源表的导入和导出
易语言资源表添加声音资源,图片资源,图片组资源,和向资源表中导入可执行文件,将资源表中的资源导出,使用资源表中的资源,通过随机播放音乐,随机播放图片,已经把exe文件写出并执行做了实例演示. 1. 向 ...
数据库-表中导入数据-insert
表中导入数据在表中导入数据的方式有两种第一种:将以上数据整理成SQL语句,insert into pet.... 第二种:通过加载文件的方式将数据导入到表中 1.创建一个pet.txt的文件(注: ...

html表单导入图片,from 表单上传图片

html表单导入图片,from 表单上传图片相关推荐

最新文章

热门文章