移动端html5图片上传方法【更好的兼容安卓IOS和微信】_Android

之前的移动端上传的方法，有些朋友测试说微信支持不是很好，还有部分安卓机也不支持，其实我已经有了另一个方法，但是例子还没整理出来，而联系我的很多朋友需要，所以就提前先发出来了，并且做一个简单的说明，就不做一个demo了。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>图片压缩</title>
<style>
body { margin:0; padding:0; }
html { font-size:62.5%; } 

.imgzip { padding:1em; }
.imgzip .itm { padding-bottom:1em; word-break:break-all; font-size:1.2rem; line-height:1.5em; }
.imgzip .itm .tit { margin-bottom:.5em; background-color:#e71446; color:#FFF; padding:.5rem 1rem; border-radius:3px; }
.imgzip .itm .cnt { padding:1rem; }
.imgzip .itm .cnt img { display:block; max-width:100%; }
.imgzip textarea { width:100%; height:20em; }
</style>
</head> 

<body>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<input type="file" accept="image/*;capture=camera" class="input">
<div class="imgzip"></div>
<script>
document.addEventListener('DOMContentLoaded', init, false); 

function init() {
var u = new UploadPic();
u.init({
input: document.querySelector('.input'),
callback: function (base64) {
$.ajax({
url:"{:U('upload')}",
data:{str:base64,type:this.fileType},
type:'post',
dataType:'json',
success:function(i){
alert(i.info);
}
})
},
loading: function () { 

}
});
} 

function UploadPic() {
this.sw = 0;
this.sh = 0;
this.tw = 0;
this.th = 0;
this.scale = 0;
this.maxWidth = 0;
this.maxHeight = 0;
this.maxSize = 0;
this.fileSize = 0;
this.fileDate = null;
this.fileType = '';
this.fileName = '';
this.input = null;
this.canvas = null;
this.mime = {};
this.type = '';
this.callback = function () {};
this.loading = function () {};
} 

UploadPic.prototype.init = function (options) {
this.maxWidth = options.maxWidth || 800;
this.maxHeight = options.maxHeight || 600;
this.maxSize = options.maxSize || 3 * 1024 * 1024;
this.input = options.input;
this.mime = {'png': 'image/png', 'jpg': 'image/jpeg', 'jpeg': 'image/jpeg', 'bmp': 'image/bmp'};
this.callback = options.callback || function () {};
this.loading = options.loading || function () {}; 

this._addEvent();
}; 

/**
* @description 绑定事件
* @param {Object} elm 元素
* @param {Function} fn 绑定函数
*/
UploadPic.prototype._addEvent = function () {
var _this = this; 

function tmpSelectFile(ev) {
_this._handelSelectFile(ev);
} 

this.input.addEventListener('change', tmpSelectFile, false);
}; 

/**
* @description 绑定事件
* @param {Object} elm 元素
* @param {Function} fn 绑定函数
*/
UploadPic.prototype._handelSelectFile = function (ev) {
var file = ev.target.files[0]; 

this.type = file.type 

// 如果没有文件类型，则通过后缀名判断（解决微信及360浏览器无法获取图片类型问题）
if (!this.type) {
this.type = this.mime[file.name.match(/\.([^\.]+)$/i)[1]];
} 

if (!/image.(png|jpg|jpeg|bmp)/.test(this.type)) {
alert('选择的文件类型不是图片');
return;
} 

if (file.size > this.maxSize) {
alert('选择文件大于' + this.maxSize / 1024 / 1024 + 'M，请重新选择');
return;
} 

this.fileName = file.name;
this.fileSize = file.size;
this.fileType = this.type;
this.fileDate = file.lastModifiedDate; 

this._readImage(file);
}; 

/**
* @description 读取图片文件
* @param {Object} image 图片文件
*/
UploadPic.prototype._readImage = function (file) {
var _this = this; 

function tmpCreateImage(uri) {
_this._createImage(uri);
} 

this.loading(); 

this._getURI(file, tmpCreateImage);
}; 

/**
* @description 通过文件获得URI
* @param {Object} file 文件
* @param {Function} callback 回调函数，返回文件对应URI
* return {Bool} 返回false
*/
UploadPic.prototype._getURI = function (file, callback) {
var reader = new FileReader();
var _this = this; 

function tmpLoad() {
// 头不带图片格式，需填写格式
var re = /^data:base64,/;
var ret = this.result + ''; 

if (re.test(ret)) ret = ret.replace(re, 'data:' + _this.mime[_this.fileType] + ';base64,'); 

callback && callback(ret);
} 

reader.onload = tmpLoad; 

reader.readAsDataURL(file); 

return false;
}; 

/**
* @description 创建图片
* @param {Object} image 图片文件
*/
UploadPic.prototype._createImage = function (uri) {
var img = new Image();
var _this = this; 

function tmpLoad() {
_this._drawImage(this);
} 

img.onload = tmpLoad; 

img.src = uri;
}; 

/**
* @description 创建Canvas将图片画至其中，并获得压缩后的文件
* @param {Object} img 图片文件
* @param {Number} width 图片最大宽度
* @param {Number} height 图片最大高度
* @param {Function} callback 回调函数，参数为图片base64编码
* return {Object} 返回压缩后的图片
*/
UploadPic.prototype._drawImage = function (img, callback) {
this.sw = img.width;
this.sh = img.height;
this.tw = img.width;
this.th = img.height; 

this.scale = (this.tw / this.th).toFixed(2); 

if (this.sw > this.maxWidth) {
this.sw = this.maxWidth;
this.sh = Math.round(this.sw / this.scale);
} 

if (this.sh > this.maxHeight) {
this.sh = this.maxHeight;
this.sw = Math.round(this.sh * this.scale);
} 

this.canvas = document.createElement('canvas');
var ctx = this.canvas.getContext('2d'); 

this.canvas.width = this.sw;
this.canvas.height = this.sh; 

ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, this.sw, this.sh); 

this.callback(this.canvas.toDataURL(this.type)); 

ctx.clearRect(0, 0, this.tw, this.th);
this.canvas.width = 0;
this.canvas.height = 0;
this.canvas = null;
};
</script>
</body>
</html>

这个也是把图片转成了base64去传送，个人不建议去用js改变图片的大小，建议裁切缩放还是PHP来做吧。

this.maxWidth = options.maxWidth || 800;
this.maxHeight = options.maxHeight || 600;
this.maxSize = options.maxSize || 3 * 1024 * 1024;
this.input = options.input;
this.mime = {'png': 'image/png', 'jpg': 'image/jpeg', 'jpeg': 'image/jpeg', 'bmp': 'image/bmp'};

这一部分是对上传图片的配置，应该可以看懂，可以自己去改

$.ajax({
url:"{:U('upload')}",
data:{str:base64,type:this.fileType},
type:'post',
dataType:'json',
success:function(i){
alert(i.info);
}

这部分是上传以后ajax发送base64码到php,
base64码带有图片的说明字符串，所以得用正则去掉，然后base64解码保存到图片的文件中。并且返回地址即可

upload.php的内容

$str = $_POST['str'];
    $type = $_POST['type'];

    switch($type){
      case 'image/png':
        $ext='.png';
        break;
      case 'image/jpeg';
        $ext='.jpeg';
        break;
      case 'image/jpeg':
        $ext='.jpg';
        break;
      case 'image/bmp':
        $ext='.bmp';
        break;
      default:
        $ext='.jpg';
    }
    $file_path='./Uploads/'.date('Ymd').'/'.time().$ext;
    if(!file_exists(dirname($file_path))){
      mkdir(dirname($file_path),0777,true);
    }
    $img_content = str_replace('data:'.$type.';base64,','',$str);
    $img_content = base64_decode($img_content);
    $result =file_put_contents($file_path,$img_content);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索ios上传
， web上传
， 移动端上传
安卓上传
图片上传插件 兼容ie8、js 上传文件 兼容ie8、上传图片预览兼容ie8、上传文件插件 兼容ie9、js上传插件 兼容ie8，以便于您获取更多的相关知识。

时间： 2024-11-17 04:23:13

移动端html5图片上传方法【更好的兼容安卓IOS和微信】_Android的相关文章

移动端html5图片上传方法【更好的兼容安卓IOS和微信】

之前的移动端上传的方法,有些朋友测试说微信支持不是很好,还有部分安卓机也不支持,其实我已经有了另一个方法,但是例子还没整理出来,而联系我的很多朋友需要,所以就提前先发出来了,并且做一个简单的说明,就不做一个demo了. <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=dev

方法-MiniUI+HTML5图片上传预览

问题描述 MiniUI+HTML5图片上传预览 首先,写了一个MiniUI的上传控件和一个标签 <img src="" id="imga" style="width: 100px;height: 100px"><br> <input id="fileupload2" style="width:300px;" class="mini-fileupload" n

html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩). 上传组件特点 轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起来不到12KB 纯

移动端H5图片上传的bug注意事项分析

上周做一个关于移动端图片压缩上传的功能.期间踩了几个坑,在此总结下. 大体的思路是,部分API的兼容性请参照caniuse: 利用FileReader,读取blob对象,或者是file对象,将图片转化为data uri的形式. 使用canvas,在页面上新建一个画布,利用canvas提供的API,将图片画入这个画布当中. 利用canvas.toDataURL(),进行图片的压缩,得到图片的data uri的值 上传文件. 步骤1当中,在进行图片压缩前,还是对图片大小做了判断的,如果图片大小大于2

苹果开发之ios图片上传方法

方法1 在项目中我们经常会遇到需要上传图片的地方,比如更换头像,上传证件照片等.下面介绍一种上传图片的方法. 首先我们需要在项目里打开手机的相册或者相机,然后在下面这个代理方法里进行图片的上传操作. 需要遵循 <UIImagePickerControllerDelegate,UINavigationControllerDelegate>代理. -(void)imagePickerController:(UIImagePickerController *)picker didFinishPick

asp.net图片上传方法

上传图片的相对路径到数据库教程中相应字段里,读取显示时,将控件(假设用的是image控件)的imageurl属性指向该相对路径即可. code: protected void button1_click(object sender, eventargs e)   {   string name = fileupload1.filename;//获取文件名   string type = name.substring(name.lastindexof(".") + 1);       /

c# 客户端 调用 java Webservice 实现图片上传功能

问题描述 c# 客户端 调用 java Webservice 实现图片上传功能 no SOAPAction header c#端添加服务引用 生成实体类 直接调用webservice图片上传方法 结果报错**no SOAPAction header** 解决方案 有没有大神 来帮帮忙 解决方案二: 参考这个:http://blog.csdn.net/wxyong3/article/details/38727503

教你轻松玩转Picasa图片上传

长假归来,相信不少朋友都带回了很多漂亮的假期照片.不过,独乐不如群乐,您是否想过要将自己假期中的所见所闻与朋友们一同分享呢?其实,最简单的一个办法,就是将照片上传到网络相册.不过,如何上传效率才是最高?却是一个说简单就简单,说复杂也复杂的问题.那么下面,笔者就以Google Picasa网络相册为例,向大家介绍几种常见的照片上传方法. 一. ActiveX控件上传 * 优点:可同时上传多张图片,且上传列表可被任意编辑­.同时,我们也能清楚地看到图片上传进度. * 缺点:需要事先安装ActiveX

HTML5 移动端图片上传的实践

主要的思路是这样: 监听一个 input (type='file') 的 change 事件,然后拿到文件的 file; 把 file 转成 dataURL: 然后用 canvas 绘制图片,绘制的时候经过算法按比例裁剪; 然后再把 canvas 转成 dataURL; 再把 dataURL 转成 blob; 接着把 blob append 到 FormData 的实例对象. 最后上传. 主要用到的 FileReader.canvas.FormData.Blob 这几个 API. 开发过程遇到了