js fileupload 部分浏览器下无法弹出

本文介绍了解决特定浏览器下文件上传控件无法正常弹出选择框的问题。通过调整隐藏文件输入框的方法,确保了跨浏览器的一致性和兼容性。

<div style="dispaly:none;"><input type="file" id="fileupload" name="filesname" accept="image/*" /></div>

$('#fileupload').fileupload({});

$('img[name="up_img"]').click(function(){
   $('#fileupload').val('').click();
 });


以上写法在部分浏览器(如小米手机浏览器)下无法正常弹出选择框,是由于元素隐藏显示导致的,此时将页面元素改为以下代码即可:


<div style="width:0;height:0;"><input type="file" id="fileupload" name="filesname" accept="image/*" /></div>


css中display的方式隐藏元素,会导致js操作的各种坑,调试无效果的时候,不妨换个角度试试。

要在浏览器上传时在右下角显示上传类型限定,可以通过 HTML、CSS 和 JavaScript 来实现。以下是一个示例代码,展示了具体的实现方法: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* 样式设置,将提示框固定在右下角 */ #upload-type-limit { position: fixed; bottom: 10px; right: 10px; background-color: #f0f0f0; padding: 5px 10px; border: 1px solid #ccc; border-radius: 5px; } </style> </head> <body> <!-- 文件上传输入框,限定上传类型为图片 --> <input type="file" id="file-upload" accept="image/*"> <!-- 用于显示上传类型限定的提示框 --> <div id="upload-type-limit">仅支持上传图片文件</div> <script> // 获取文件上传输入框元素 const fileUpload = document.getElementById('file-upload'); // 获取显示上传类型限定的提示框元素 const uploadTypeLimit = document.getElementById('upload-type-limit'); // 监听文件上传输入框的 change 事件 fileUpload.addEventListener('change', function () { const files = this.files; if (files.length > 0) { const file = files[0]; const allowedTypes = fileUpload.accept.split(','); let isValid = false; // 检查文件类型是否符合限定 allowedTypes.forEach(type => { if (file.type.includes(type.replace('*', ''))) { isValid = true; } }); if (!isValid) { // 若文件类型不符合限定,给出提示 alert('上传文件类型不符合要求,请上传图片文件。'); this.value = ''; // 清空文件选择 } } }); </script> </body> </html> ``` ### 代码解释 1. **HTML 部分**:创建了一个文件上传输入框 `input`,并通过 `accept` 属性限定了上传文件类型为图片(`image/*`)。同时,创建了一个 `div` 元素用于显示上传类型限定的提示信息。 2. **CSS 部分**:通过 `position: fixed` 将提示框固定在浏览器窗口的右下角,并设置了一些样式,如背景颜色、内边距、边框和圆角等。 3. **JavaScript 部分**: - 获取文件上传输入框和提示框的元素。 - 监听文件上传输入框的 `change` 事件,当用户选择文件时触发。 - 检查用户选择的文件类型是否符合限定,如果不符合则弹出提示框,并清空文件选择。 ### 相关问题
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值