input:file如何获取手机上的网络图片路径?

发布于 2022-09-07 23:02:04 字数 661 浏览 35 评论 0

在微信内置浏览器打开一个h5页面,页面上有一个上传图片的功能按钮,点击上传时发现无法获取图片(这里的上传图片用的是PhotoClip这个插件)。然后我各种调试,在调试的时候我有发现并不是所有图片都无法上传,最后我发现原来是我手机内有些图片是正常的带有图片文件后缀的,有些图片是下载的一些网络图片,没有图片文件后缀,例如://——123456.downloading这样的路径(我....),然后在PhotoClip插件中有一个判断选中的文件是否为图片文件的判断:

if (!/image\/\w+/.test(files.type)) {
    alert("图片格式不正确,请选择正确格式的图片文件!");
    return false;
} else {
    //...
}

这里就又掉进一个坑了——微信内置浏览器中,alert弹框被它给禁止了,也就是说仅管插件弹出警告了,但是由于这个坑爹的机制导致用户在选中这类网络图片的时候回发现无法裁剪上传——既没有提示信息,又没有选中的图片显示,感觉就是失效了...
没办法,,问题出了,还是得想办法解决,我目前只有一个思路:仿写一个toast提示框,提示用户重新选择。但有一个问题就是,万一用户非要较真:我这明明就是一张正常的图片,你为啥不让我上传?妈的什么破项目,抬走...

有没有前辈,指点个更靠谱点的方法咯

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

傲性难收 2022-09-14 23:02:04
  1. accept控制上传后缀
  2. 假如你默认用户上传的无论什么后缀就一定是图片,因为File继承的是Blob所以你只需要改blobtype然后重新new File就能当图片处理。
情深已缘浅 2022-09-14 23:02:04

这个问题目前找到解决方法了(并不完美):
把input的 accept="image/"属性去掉,把插件内的修改accept="image/"的表达式去掉,即默认为上传所有格式的文件!这样才能够进入插件内的判断语句,才会有一个alert交互;
另外更正一下:

说到alert交互弹框,并不是微信内置浏览器给禁止了,其实是可以正常弹出的,这里刚开始为什么没有弹出的原因其实是因为由于上传的文件格式默认为图片类型的时候,当选择网络图片(没有jpg/png后缀)时,插件不能监听到input框的值的变化
$file.on("change", function () {
    if (!/image\/\w+/.test(files.type)) {
        alert("图片格式不正确,请选择正确格式的图片文件!");
        return false;
    } else {
        //...
    }
})
这个方法压根就不会触发,所以感觉就是微信把alert弹框给阻止了

这里真的魔性,你规定了accept="image/*",当你上次其他格式的文件的时候,input的change事件无法正常监听...

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文