input type="file" 限制图片格式
时间: 2023-06-09 18:06:24 浏览: 218
你可以使用accept属性来限制上传的文件类型,例如:
<input type="file" accept="image/png, image/jpeg">
这会限制用户只能选择PNG和JPEG格式的图片进行上传。
相关问题
JavaScript input type=file 获取文件大小及类型限制
要获取文件大小,可以使用`File`对象的`size`属性。要获取文件类型,可以使用`File`对象的`type`属性。以下是一个示例代码:
```javascript
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
var file = e.target.files[0];
var fileSize = file.size;
var fileType = file.type;
// 检查文件大小
if (fileSize > 1024 * 1024) {
alert("文件大小不能超过1MB");
return;
}
// 检查文件类型
if (fileType !== 'image/jpeg' && fileType !== 'image/png') {
alert("只能上传JPEG或PNG格式的图片");
return;
}
// 文件大小和类型都符合要求,可以继续操作
});
```
在上面的代码中,我们首先获取了一个`<input type="file">`元素,并在其`change`事件中获取了用户选择的文件。然后我们使用`File`对象的`size`和`type`属性来获取文件大小和类型。最后,我们检查文件大小和类型是否符合要求,并在不符合要求的情况下弹出相应的提示。
input[type='file']样式美化及实现图片预览
要实现input[type='file']样式美化及图片预览,可以使用以下步骤:
1. 创建一个label元素,将input[type='file']元素隐藏在label里面,并设置label的样式。
2. 给input[type='file']元素设置一个change事件,当选择文件后触发事件。
3. 在change事件中获取选择的文件,并将文件转换成URL格式,用于预览。
4. 创建一个img元素,设置src属性为URL格式的文件,即可实现预览效果。
以下是一个简单的示例代码:
```html
<!-- HTML部分 -->
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> 选择文件
</label>
<input id="file-upload" type="file"/>
<div id="preview"></div>
```
```css
/* CSS部分 */
.custom-file-upload {
display: inline-block;
padding: 6px 12px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
border-radius: 4px;
}
#preview {
width: 200px;
height: 200px;
margin-top: 20px;
border: 1px solid #ccc;
}
```
```javascript
// JavaScript部分
var input = document.getElementById("file-upload");
var preview = document.getElementById("preview");
input.addEventListener("change", function() {
var file = this.files[0];
var reader = new FileReader();
reader.addEventListener("load", function() {
preview.innerHTML = '<img src="' + reader.result + '" />';
}, false);
if (file) {
reader.readAsDataURL(file);
}
}, false);
```
以上代码中,我们用label元素包裹隐藏的input[type='file']元素,并设置了一个自定义样式。当用户点击“选择文件”按钮时,实际上是触发了input[type='file']元素的点击事件,从而弹出系统文件选择框。
在input[type='file']元素的change事件中,我们获取选择的文件,并使用FileReader对象将文件转换成URL格式。最后,我们创建一个img元素,将URL格式的文件设置为其src属性,即可实现预览效果。
需要注意的是,由于安全性限制,我们无法直接读取本地文件的路径,因此需要使用FileReader对象将文件转换成URL格式才能进行预览。