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

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

26320 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小强
没有思考,人生的路会越走越难!

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

    2017-06-30 09:46

  • 今日北京再次沙尘暴来袭,吃了几年细粮,终于能来口粗粮了,不过大早上看见这场景,还是吓我一跳,不过随后就平静了,毕竟是老朋友了。进公司又发现一股烤糊的味道,真是祸不单行啊,例外都是污染。发了两个口罩,开启保护模式。

    2017-05-04 10:16

  • 今天同学问我,最近还在写代码吗?我想了想,这个问题怎么回答呢,我好像确实很长时间,虽然写了一些,但是主要内容已经不是写代码了。然后再想想,自己也7年多了,这么多年了,我收获了什么,我的目标到底是什么。眼看就奔三了,人生啊,开启感叹模式。

    2017-03-30 22:52

  • 也许大家都已经注意到了,今年的房价,好多地方都是翻了一番,跟着就是,各地房东开始变相涨租。今年之所以搬走,就是为此,这两天同学也是如此。很多房东只认钱,别谈感情,伤钱。而对于这个城市来说,你怎么定位自己,你真把自己当成她的一份子?你来此为何?将来何去何从?自己掂量清楚。

    2016-12-05 10:03

  • 为什么一直不写了呢?因为当爸爸了,没空了。今年的冬天,有些寒冷,除了这寒冬带来的不适,更有因乐视公司遇到危机,而带来的同事别离。送别同事,看着空旷的工位,心中有些悲凉。临近年关,此时此刻,该怎么做,似乎不再是脑子一热那么简单了。

    2016-11-24 11:28

  • 更多»

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