移动端上传图片

<!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 条评论
登录 后参与评论

相关文章

来自专栏前端

自己实现PC端jQuery版轮播图

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

5819
来自专栏zcqshine's blog

ajaxFileUpload+ThinkPHP+jqGrid 图片上传与显示

4004
来自专栏xx_Cc的学习总结专栏

iOS-UIButton 全面解析UIButton 的全面解析

3078
来自专栏Android先生

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

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

1621
来自专栏Material Design组件

Human Interface Guidelines —— Scroll Views

3938
来自专栏埋名

React UI 组件库【uiw】发布

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

1792
来自专栏葡萄城控件技术团队

Web页面中5种超酷的Hover效果

想在自己的网站中应用超酷的hover效果吗?也许你可以从如下的这些实例中获得一些灵感,如果你喜欢这些效果,也可以直接拷贝代码并应用到你的站点。 给平淡的站点带来...

2689
来自专栏AhDung

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

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

1042
来自专栏前端知识分享

第2天:HTML常用标签

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

2591
来自专栏web开发

自实现PC端jQuery版轮播图

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

3232

扫码关注云+社区

领取腾讯云代金券