Hi,各位大佬,
下午好,我又遇到了一个新问题,WebView 加载的网页中,有 input type= file 的表单控件,点击上传文件时,没有触发效果,网上搜索了一番,说是WebView 的兼容问题 android webview图片文件上传兼容性问题——上传控件点击无效的解决办法,
同时在论坛上看到了其它相同的,无奈没有给出没有解决方案uniapp app端 webview中的页面 无法使用input file来选择文件上传,所以我也发表了一番,望大佬们解答一下,谢谢,同时我也写了一个简单的示例,请查阅一下
运行环境:小米Max2 MIUI11.0.2 Android 7.1.1
开发环境:HBuilder X 2.7.5.20200519
$(".file").on("change", "input[type='file']", function () {
console.log('触发上传!'); // 无法触发上传
let filePath = $(this).val();
console.log(`文件路径${filePath}`);
localStorage.setItem("fileAddress", filePath);
let lastname = localStorage.getItem("fileAddress");
if (lastname != "") {
$(".showFileName").html(lastname);
} else {
$(".showFileName").html("");
}
});
完整代码
<body class="body">
<div class="text">
<div class="text-in"> 文件上传 </div>
</div>
<div class="head-btn">
<form action="" method="post">
<a href="javascript:;" class="file">选择文件
<input type="file" name="uploadFile" id="uploadFile">
</a>
</form>
<p class="showFileName"></p>
</div>
<div>
<button class="btn" type="button" data-action="redirectTo">确定</button>
<button class="btn1" type="button" data-action="navigateBack">取消上传</button> </div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script>
$(".file").on("change", "input[type='file']", function () {
console.log('触发上传!'); // 无法触发上传
let filePath = $(this).val();
console.log(`文件路径${filePath}`);
localStorage.setItem("fileAddress", filePath);
let lastname = localStorage.getItem("fileAddress");
if (lastname != "") {
$(".showFileName").html(lastname);
} else {
$(".showFileName").html("");
}
});
$('.btn').click(function (evt) {// 开始上传到服务器
var fileUrl;
var formdata = new FormData();
// 创建一个form类型的数据
formdata.append("files", $("#uploadFile")[0].files[0]);
// 获取上传文件的数据
formdata.append("operate", "UpLoadFile");
// 操作码
formdata.append("name", "name");
console.log("begin")
console.log("end")
var target = evt.target;
if (target.tagName === 'BUTTON') {
var action = target.getAttribute('data-action');
if (action == 'redirectTo') {
uni.redirectTo({
url: '/pages/index/index',
success: function (d) {
console.log("跳转成功");
},
fail: function (e) {
console.log(e);
},
});
}
}
});
//取消文件上传
$('.btn1').click(function (evt) {
var target = evt.target;
if (target.tagName === 'BUTTON') {
var action = target.getAttribute('data-action');
if (action == 'navigateBack') {
uni.navigateBack({
delta: 1,
});
}
}
});
</script>