江夏
江夏
  • 发布:2015-01-20 11:15
  • 更新:2015-01-20 15:08
  • 阅读:3927

webapp上的图片上传问题

分类:MUI
mui

又来打扰,请各位海涵。
问题的由来是这样的。我们公司的webapp,其实是个网页,可以通过微信 QQ分享打开,另一个方面,公司另一个研发部门开发的安卓与IOS应用调用我们的链接从而以APP的形式展示给用户,目前我是唯一一个前端,我入职时便提出使用mui框架,但基于公司的实际情况,无法使用mui的窗口管理机制(webview),当初使用mui的CSS框架。

由于不能使用H5+的功能,所以在使用html5一些特性时,总会出问题,这次便遇到一个图片上传的问题,下面是代码。

IOS在,我用IOS6.0系统的4S测试,不管是网页,微信分享,QQ分享,公司的APP,都正常。

在安卓手机上,网页打开没问题,微信,QQ跟公司客户端打开都无效,就是点击上传图片的按钮时,木有反应。我查了下,微信QQ分享时,是默认选择手机系统自带的浏览器打开链接,如果真是如此,安卓手机鱼龙混杂,版本不计其数,很多低级安卓的安卓手机也是挺多的,如果是这种情况,用微信QQ分享之后势必都会在低级浏览器版本中出现问题。

请问各位朋友,大神,请问有没什么方法可以解决图片上传的问题。

2015-01-20 11:15 负责人:无 分享
已邀请:
伟子

伟子

你们公司现在做的是webapp? 是APP还是 WEB?还是html5做的APP?

  • 江夏 (作者)

    其实我也觉得很乱,说是webapp,但更像是网页,只是把网页的链接放到安卓跟IOS上,使用起来像是一个APP。之所以是这样,主要是因为要满足微信跟QQ分享

    2015-01-20 16:22

DCloud_UNI_FXY

DCloud_UNI_FXY

你的图片按钮的点击事件来选择图片的代码是怎么写的。你的是点击上传图片没反应,是指无法打开相册,还是选中了图片后,上传没效果

DCloud_UNI_FXY

DCloud_UNI_FXY

你的代码大概有两个问题:

1.不要使用hidden来隐藏type=file的input,而是使用opacity:0

<style>  
input[type=file]{  
            opacity: 0  
        }  
</style>  
<input type="file" name="appfile[]" id="f0"  onchange="preImg(this.id,'imgPre0');"/>  
        <input type="file" name="appfile[]" id="f1"  onchange="preImg(this.id,'imgPre1');"/>  
        <input type="file" name="appfile[]" id="f2"  onchange="preImg(this.id,'imgPre2');"/>  
        <input type="file" name="appfile[]" id="f3"  onchange="preImg(this.id,'imgPre3');"/>  
        <input type="file" name="appfile[]" id="f4"  onchange="preImg(this.id,'imgPre4');"/>  
        <input type="file" name="appfile[]" id="f5"  onchange="preImg(this.id,'imgPre5');"/>  
        <input type="file" name="appfile[]" id="f6"  onchange="preImg(this.id,'imgPre6');"/>  
        <input type="file" name="appfile[]" id="f7"  onchange="preImg(this.id,'imgPre7');"/>  
        <input type="file" name="appfile[]" id="f8"  onchange="preImg(this.id,'imgPre8');"/>  
        <input type="text" name="t" id="t" value="" hidden="hidden"/>  
        <input type="text" name="u" id="u" value="" hidden="hidden"/>  
        <input type="submit" id="btnImgAdd" hidden="hidden"/>
  1. 在android用FileReader的readAsDataURL时,读取到的base64格式有可能是错误的。需要你自己修复一下:
    reader.onload = function(e) {  
            var img = document.getElementById(targetId);  
            var imgType = 'jpeg';//需要识别一下当前选中img的type  
    //android上读取到的base64格式有可能不正确,需要自己替换一下  
            var base64 = this.result.replace('data:base64,', 'data:image\/'+imgType+';base64,')  
            img.src = base64;  
        }

该问题目前已经被锁定, 无法添加新回复