移动端上传图片

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

相关文章

来自专栏SpringBoot

springmvc + h5(进度条)文件上传

771
来自专栏IMWeb前端团队

纯前端实现保存表单数据功能

最近在用管理后台配置数据时,发现辛辛苦苦配置好的表单无缘无故地被覆盖,之后了解到由于我们都是在同一台开发机上做开发,难免会遇到其他同学做数据变更时覆...

33710
来自专栏菩提树下的杨过

如何对动态创建控件进行验证以及在Ajax环境中的使用

首先给一个常规的动态创建控件,并进行验证的代码 [前端aspx代码] <%@ Page Language="C#" AutoEventWireup="true"...

1855
来自专栏bboysoul

中间人攻击工具(Xerosploit)

Xerosploit是一个渗透测试工具包,它的目的是实现中间人攻击。它附带着各种有效的攻击模块,并且还允许执行拒绝服务攻击和端口扫描

763
来自专栏阮一峰的网络日志

短网址还原的Bookmarklet

如今,很多网站提供短网址服务。 ? 但是有时候,我们需要知道真实网址是什么。 ? 一个个点击,实在太麻烦。何况在国内,很多网址是点不开的。 我一直希望,有人做一...

2978
来自专栏杨建荣的学习笔记

备库归档删除策略失效的问题分析 (r7笔记第6天)

最近碰到了一个有些奇怪的问题,自己当时排查问题时间紧,没有细细琢磨,今天抽空看了下,终于发现了端倪。 首先是在早晨收到了报警邮件,报警邮件内容如下: ZABBI...

3548
来自专栏码匠的流水账

spring webflux文件上传下载

使用webflux就没有之前基于servlet容器的HttpServletRequest及HttpServletReponse了,取而代之的是org.sprin...

951
来自专栏菩提树下的杨过

tomcat 8.5.9.0 解决catalina.out过大的问题

先吐嘈一下tomcat这个项目,日志切割这么常见的功能,tomcat这种知名开源项目默认居然不开启,生产环境跑不了几天,磁盘就满了,而且很多网上流传的方法,比如...

2537
来自专栏木宛城主

SharePoint 中时间轴 Timeline的实现

客户需要在OA中实现每日动态功能,能够记录每一位员工的每天的工作动态,我很快想到了时间轴,因为时间轴能很直观的现实员工每一刻的动态。就像Facebook的Ti...

1826
来自专栏walterlv - 吕毅的博客

Introducing MSTestEnhancer to make unit test result easy to read

发布于 2018-03-05 06:21 更新于 2018-08...

461

扫码关注云+社区