移动端上传图片

<!DOCTYPE html>  
<html>  
<head>  
 <title>pc和手机端的图片上传处理</title>  
 <meta charset="utf-8" />  
 <meta name="viewport" content="width=device-width" />  
</head>  
<body>  
 <p>选择:</p>  
 <p><input type="file" accept="image/*" id="upload" name="upload"></p>  
 <div><button id="surebtn">确定上传</button></div>  
 <p>图片预览:</p>  
 <p id="preview"></p>  
 <script type="text/javascript">  
 
        var upload = document.getElementById('upload'),  
 preview = document.getElementById('preview'),  
 surebtn = document.getElementById('surebtn'),  
 imgurl = '';  
 
        upload.addEventListener('change',handleFile,false);  
        surebtn.addEventListener('click',upLoadFile,false);  
 
        function handleFile(){  
 window.URL = window.URL || window.webkitURL;  
            var sUserAgent= navigator.userAgent.toLowerCase();  
            var selected_file = upload.files[0];  
 
            if(sUserAgent.match(/android/i) == "android"){  
                var img = new Image();  
 img.src = window.URL.createObjectURL(selected_file);  
 preview.innerHTML = '';  
                preview.appendChild(img);  
 
 
                var reader = new FileReader();  
 reader.onload = function(e) { imgurl = e.target.result; };  
                reader.readAsDataURL(selected_file);  
 
            }else{  
 
                //判断文件类型是否为图片  
                 var imageType = /image.*/;  
 
                if (!selected_file.type.match(imageType)) {  
                  return false;  
                }  
 
                var img = document.createElement('img');  
 img.file = selected_file;  
 preview.innerHTML = '';  
                preview.appendChild(img);  
 
 img.onload = function(){  
 imgurl = img.src;  
                }  
 
                var reader = new FileReader();  
 reader.onload = function(e) { img.src = e.target.result; };  
                reader.readAsDataURL(selected_file);  
            }  
        }  
 
        function upLoadFile(){  
            var start = imgurl.indexOf(',')+1;  
 dataurl = imgurl.substr(start);  
 
            var xmlhttp = new XMLHttpRequest();  
            xmlhttp.open('post','todo.php',true);  
            xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8');  
            xmlhttp.setRequestHeader('X_Requested-With','XMLHttpRequest');  
            xmlhttp.send('dataurl='+encodeURIComponent(dataurl));  
 
 xmlhttp.onreadystatechange=function(){  
                if (xmlhttp.readyState==4 && xmlhttp.status==200){  
                    console.log(xmlhttp.responseText)  
                }  
            }  
        }  
 
 </script>  
</body>  
</html>  

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android先生

RecyclerView 自定义ItemDecoration从入门到实现吸顶效果

RecyclerView性能和自由度相比ListView强大很多,但很恼人的是它没有像ListView一样默认提供分割线。

811
来自专栏hbbliyong

强烈推荐:240多个jQuery插件

概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后...

4024
来自专栏前端说吧

JS-制作可伸缩的水平菜单栏

2984
来自专栏AhDung

【C#】让工具栏ToolStrip能触发焦点控件的Leave、Validating、DataError等事件以验证数据

----------------更新:2014-04-21---------------

762
来自专栏吴老师移动开发

【iOS开发】iOS 动画详解

在移动开发中,为了提高用户体验,会用到一些动画来提高应用的视觉效果。让人有眼前一亮的感觉。同时有动画的过渡过程,会让应用看起来不是那么的生硬,更吸引用户。

956
来自专栏程序员叨叨叨

手把手教你打造RecyclerView滚动特效

最近开发中遇到这样的需求,recyclerview的item随滚动改变大小和透明度。这个效果看起来挺有动感的,似乎实现起来有点复杂,其实不然,接下来将带领大家手...

751
来自专栏达摩兵的技术空间

css选择器攻略

很多小伙伴对css选择器表示不屑,觉得很简单没必要学习,其实你究竟了解多少呢?当面试官问你的时候,你能分出哪些是css3新增的选择器,他们兼容如何?又该如何处理...

763
来自专栏前端知识分享

第2天:HTML常用标签

一、超链接a href:www.baidu.com(跳转页面);id名(锚点跳到相应div位置);01.rar(压缩包) target:_blank(新窗口打...

991
来自专栏埋名

React UI 组件库【uiw】发布

高品质的UI工具包,基于React 16+的组件库。 ? 为了表示支持,点击 阅读原文 搞点Star,多多益善。

592
来自专栏前端

自己实现PC端jQuery版轮播图

最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了...

4979

扫码关注云+社区