手机端小强原创文章,java小强个人博客站点
当前位置: 首页 >> JS >> JS图片上传预览 Android上的问题

JS图片上传预览 Android上的问题

40500 JS | 2015-8-4

JS进行图片预览,上次说的总体是两种方式(http://javacui.com/javascript/296.html  ),一种是URL.createObjectURL(file),一种是FileReader()。

在进行Android客户端APP访问页面时,发现那种方式也不行。看错误,APP上根本不能使用createObjectURL,那就用FileReader吧,发现页面访问没问题,而APP访问时就是不行。

由于也不报错,我只能对比下e.target.result的结果了。在Google Chrome打印出来的结果来看,是以

data:image/jpeg;base64,

打头的Base64图片内容,但是弹出一下APP上的内容,发现是

data:base64,

不知道为什么少了字符,不过我还是马上使用替换,把内容回归为标准格式:

i.src = e.target.result.replace("data:base64","data:image/jpeg;base64");


于是,预览的方法写成:

function preview(file,imgPreviewId) {
    var reader = new FileReader();
    reader.onload = function(e) {
    	var img = e.target.result;
    	img = img.replace("data:base64","data:image/jpeg;base64");
     	document.getElementById(imgPreviewId).src = img;
    }
    reader.readAsDataURL(file);
}

在File对象的Change方法里面写:

function handleFileSelect (ePara) {
	var file = ePara.target.files[0];
    preview(file,'picZhengMian');
}

使用JS监听增加change事件:

document.getElementById('photoImg').addEventListener('change', handleFileSelect, false);


也许你发现了,这并不是完美的解决方案。所以各位大佬们,你们懂得。


附上一个简介命令的HTML5上传预览测试页面:

<!DOCTYPE HTML>
<html>
    <head>
    <meta charset="utf-8">
    <title>html5 图片上传预览</title>
    <style>
        #preview {
            width: 300px;
            height: 300px;
            overflow: hidden;
        }
        #preview img {
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
        function preview1(file) {
            var img = new Image(), url = img.src = URL.createObjectURL(file)
            var $img = $(img)
            img.onload = function() {
                URL.revokeObjectURL(url)
                $('#preview').empty().append($img)
            }
        }
        function preview2(file) {
            var reader = new FileReader()
            reader.onload = function(e) {
                var $img = $('<img>').attr("src", e.target.result)
                $('#preview').empty().append($img)
            }
            reader.readAsDataURL(file)
        }
        $(function() {
            $('[type=file]').change(function(e) {
                var file = e.target.files[0]
                preview1(file)
            })
        })
    </script>
</head>
<body>
<form enctype="multipart/form-data" action="" method="post">
    <input type="file" name="imageUpload"/>
    <div id="preview" style="width: 300px;height:300px;border:1px solid gray;"></div>
</form>
</body>
</html>

注意:需要JQuery文件。


推荐您阅读更多有关于“ android 图片预览 createObjectURL FileReader ”的文章

上一篇:国美服务器严重问题重现和分析 下一篇:Java内存报错简单分类与分析

猜你喜欢

发表评论:

个人资料
blogger

java小强
没有思考,人生的路会越走越难!

搜索
分类
最新微语
  • 不是本人但真实经历,如果你得了绝症抑或大病,能告诉的人两只手能数过来,而能一直陪床真正帮你的人,一只手就够了。也许你会说我亲戚多哥们多同学多云云,但真遇上的时候,你敢说吗?即使你说了会有人像你想的那样吗?不要尝试考验人性,人走茶凉之类的话都听过,但不遇到事我们未曾理解其中的道理。

    2018-11-07 11:05

  • 每个人的一生都是不同的,我们都需要负重前行。每一种生活都是不同的,我们都需要真实面对。所经历的,让我学会一件事,顺其自然。人,总有很多自己想要的,总有很多困难要面对,总有很多人要去爱,我们不断思考人生,却总是迷失自己。如今,我们最缺的不是金钱和时间,而是忘记了自己的初衷。

    2018-09-28 14:42

  • 车也学了,年也过了,生日也过了,村里的会也赶了,这次,是真的,年过去了。不过我没回京,也没有在家找工作,我在等什么吗?反正现在正合了我这个懒人的要求,不过,我歇不住,思考下人生。

    2018-03-20 00:11

  • 8月1日,我已离开奋斗多年的北京。不知道是暂时的离开,还是永久的离别,反正已经离职在家,告别每日上班,每天苦累的煎熬,过一段属于自己的生活。以前是专职工作,现在专职生活。

    2017-08-18 12:47

  • 又弄完一个项目,累成狗,但是感觉又进步不少,除了很多坑已经踩过,做起来也是轻车熟路。同时也认识到,程序不在于你多牛逼,而是在乎你的细节把控度,而细节的关注,是一个优秀程序员必须要注意的。另外,要相信自己,勇敢向前,没人生下来就是成功的,而且,成功的路,比成功本身更重要。

    2017-06-30 09:46

  • 更多»

最新文章
热门文章
随机文章