html 上传文件

<img id="img" src="" style="max-height: 100px;" />
<input type="file" accept="image/*" change="file_change" />
function file_change(e){
    let files = e.target.files || e.dataTransfer.files;
    if (!files.length || files.length < 1)return;
    let file = files[0];
    let reader = new FileReader();
    reader.onload=function(e) {
        let bs64 = e.target.result;
        //console.log('bs64', bs64);
        $("#img").attr('src') = bs64;
        //把base64发送给后端
    };
    reader.readAsDataURL(file);
}
HTML上传文件美化通常涉及使用CSS来改善默认的文件上传控件的外观,因为原生的文件上传控件(`<input type="file">`)的样式在不同浏览器中可能差异较大,且外观通常比较简单。以下是几个美化文件上传控件的方法: 1. 隐藏原生上传控件:可以将`<input type="file">`隐藏起来,并通过一个自定义按钮或链接来触发文件选择对话框。 2. 自定义按钮样式:使用CSS对自定义的按钮进行样式设计,包括颜色、边框、字体、阴影等效果,使其看起来更符合页面的整体风格。 3. 交互效果:使用JavaScript(或jQuery)为自定义上传按钮添加交互效果,比如当用户点击按钮时光标变样、按钮高亮显示,或者点击后出现一个动画效果等。 4. 预览功能:在文件选择之前或之后,提供一个预览功能,让用户可以预览到即将上传的文件内容或图标,这有助于提升用户体验。 5. 验证和提示:使用JavaScript对用户选择的文件进行验证,比如文件类型、大小限制等,并提供清晰的用户提示信息,引导用户正确操作。 下面是一个简单的示例代码,展示了如何使用纯CSS对文件上传按钮进行美化: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>美化上传文件控件</title> <style> .custom-file-upload { border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer; background-color: #f9f9f9; border-radius: 4px; } .custom-file-upload:hover { background-color: #e9e9e9; } </style> </head> <body> <input type="file" id="fileUpload" class="custom-file-upload" accept="image/*" multiple> </body> </html> ``` 通过上面的CSS样式,我们创建了一个样式化的文件上传按钮。用户点击这个按钮后,会看到一个正常的文件选择对话框,但是按钮看起来已经与页面的其他元素更加协调。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值