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

2024-09-27 16:49:14

之前的移动端上传的方法，有些朋友测试说微信支持不是很好，还有部分安卓机也不支持，其实我已经有了另一个方法，但是例子还没整理出来，而联系我的很多朋友需要，所以就提前先发出来了，并且做一个简单的说明，就不做一个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开发中图片上传时两种图片压缩方式的比较

IOS 图片上传时两种图片压缩方式的比较上传图片不全面的想法:把图片保存到本地,然后把图片的路径上传到服务器,最后又由服务器把路径返回,这种方式不具有扩展性,如果用户换了手机,那么新手机的沙盒中就没有服务器返回的图片路径了,此时就无法获取之前已经上传了的头像了,在项目中明显的不可行. 上传图片的正确方式:上传头像到服务器一般是将图片NSData上传到服务器,服务器返回一个图片NSString地址,之后再将NSString的路径转为url并通过url请求去更新用户头像(用户头像此时更新的便是NS
iOS实现相册多选图片上传功能

本文实例为大家分享了iOS实现相册多选图片上传的具体代码,供大家参考,具体内容如下原理:获取手机里的全部照片,显示在自定义的视图里 //获取到相册的所有图片 - (void)addAllPhotos{ @WeakObj(self); _assetsLibrary=[[ALAssetsLibrary alloc]init]; [_assetsLibrary enumerateGroupsWithTypes:ALAssetsGroupSavedPhotos usingBlock:^(ALAsset
iOS实现压缩图片上传功能

本文实例为大家分享了iOS实现压缩图片上传功能,供大家参考,具体内容如下 #pragma mark - 打开相机 -(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info{ UIImage *image = info[UIImagePickerControllerOriginalImage]; s
微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题

微信多图片上传必须挨个上传,也就是不能并行,得串行: 那么我们可以定义一个如下所示的上传函数: var serverIds = []; function uploadImages(localImagesIds) { if (localImagesIds.length === 0) { $.showPreloader('正在提交数据...'); $('form').submit(); } wx.uploadImage({ localId: localImagesIds[0], // 需要上传的图片
移动端html5图片上传方法【更好的兼容安卓IOS和微信】

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

本文实例讲述了javascript实现移动端 HTML5 图片上传预览和压缩功能.分享给大家供大家参考,具体如下: 在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个API file 和 FileList 对象 file对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个 input 元素上选择文件后
Vue项目实现html5图片上传的示例代码

目录图例 1.选择图片 2.预览图片 2.1添加图片预览代码两种方法的对比 3.裁剪图片 4.上传选择图片 -> 预览图片 -> 裁剪图片 -> 上传图片我会以事例贯穿图片接下来,就详细的介绍每个步骤具体实现. 图例 1.选择图片选择图片有什么好讲的呢?不就一个 input[type=file] ,然后点击就可以了吗?确实是这样的,但是,我们想要做得更加的友好一些,比如需要过滤掉非图片文件, 或只允许从摄像头拍照获取图片等,还是需要进行一些简单配置的. 下面就先来看看最简单的选
Vue移动端实现图片上传及超过1M压缩上传

本文实例为大家分享了Vue移动端实现图片上传及超过1M压缩上传的具体代码,供大家参考,具体内容如下 1.实现效果 2.代码 Html: <div class="choosePic"> <div class="pics" :style="{backgroundImage: 'url(' + form.erpRecords + ')'}"> <input type="file" class="
实例讲解javascript实现异步图片上传方法

我们首先看下HTML代码实现的form提交部分.其中大家在测试的时候需要把test的URL更换成自己的,也可以直接写一个本地地址测试. html代码: <form id="uploadForm" action="http://storage.test.com/file/upload" method="post" enctype="multipart/form-data"> <input type="
tp5实现微信小程序多图片上传到服务器功能

最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中:  <view class="picture"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <im
vue+elementUi图片上传组件使用详解

上传组件封装需求分析在基于elementUI库做的商城后台管理中,需求最大的是商品管理表单这块,因为需要录入各种各样的商品图片信息.加上后台要求要传递小于2M的图片,因此封装了一个upload.vue组件作为上传页面的子组件,它用于管理图片上传逻辑. upload.vue解析 upload主要用于实现表单上传图片的需求,主要由input +img 构成当没有图片的时候显示默认图片,有图片则显示上传图片,因为input样式不太符合需求所以只是将起设置为不可见,不能将其设置为display:non
jquery实现图片上传前本地预览

前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得到的反而是C:\fakepath\a.jpg,这个路径是错误的.百度之后得到说浏览器基于保护用户的相关安全措施,隐藏了上传的真实路径,用fakepath代替,当然,调整浏览器的相关安全设置可以解决这个问题.但我们不可能让所有用户都通过设置浏览器的安全设置来进行图片上传,这种方法在网络交互上显然不现实
jQuery实现移动端图片上传预览组件的方法分析

本文实例讲述了jQuery实现移动端图片上传预览组件的方法.分享给大家供大家参考,具体如下: 之前的一篇博客:移动端H5图片预览和压缩,实现了基本的功能.这次则计划做成一个组件,可供前台.后台使用. 首先,我们先来捋一捋想要实现的功能: 预览删除压缩上传到服务器基本机构这样,我们的组件结构就有了: ;!function(window, $, undefined){ function Upload() { }; Upload.prototype.change = function() {
基于vue+axios+lrz.js微信端图片压缩上传方法

业务场景微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能按指定尺寸压缩处理 4.上传图片可以从相册中选择或者直接拍照遇到的坑采用微信JSSDK上传图片在之前开发的项目中(mui + jquery),有使用过微信JSSDK的接口上传图片,本想应该能快速迁移至此项目.事实证明编程没有简单的事: 1.按指定尺寸压缩图片 JSSDK提供的接口wx.choo

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

相关推荐

随机推荐