H5项目中要用到图片上传，团队成员没有找到解决方案。只能由自己在网上搜索整理一下，如下：
直接看代码吧
Html页：
1<!DOCTYPE html> 2<html lang="zh-CN"> 3<head> 4<meta charset="utf-8"> 5<meta http-equiv="X-UA-Compatible" content="IE=edge"> 6<meta name="viewport" content="width=device-width, initial-scale=1"> 7<title>H5图片压缩上传</title> 8</head> 9<body> 10<div> 单图： 11 <input type="file" accept="image/*" capture="camera" class="jsImg" /> 12 <input type="hidden" id="hidpic"/> 13 <br> 14 多图： 15 <input type="file" accept="image/*" capture="camera" multiple="multiple" class="jsImgs" /> 16 <input type="hidden" id="hidpics"/> 17 <br> 18 <button id="upload" type="button">上传照片 </button> 19</div> 20<script src="https://my.oschina.net//lockupme/blog/907636/jquery.js"></script> 21<script> 22 23$(function(){ 24 $('#upload').on('click', function(){ 25 $.post("u.php", { hidpic: $('#hidpic').val(),hidpics: $('#hidpics').val() }, function(data){ 26 alert("Data Loaded: " + data); 27 }); 28 }); 29 30 //单图 31 $('.jsImg').on('change', function(e){ 32 console.log(this.files[0]); 33 setFilesReader(this.files[0], 0); 34 }); 35 36 //多图 37 $('.jsImgs').on('change', function(e){ 38 console.log(this.files[0]); 39 for (var i = 0; i < this.files.length; i++) { 40 setFilesReader(this.files[i], 1); 41 } 42 }); 43 44}) 45 46function setFilesReader(file, ismul) { 47 var reader = new window.FileReader(); 48 reader.onload = function(e) { 49 compress(this.result, fileSize, ismul); 50 } 51 reader.readAsDataURL(file); 52 //console.log(this.files[0]); 53 var fileSize = Math.round(file.size/1024/1024) 54} 55 56//onchange="readMultiFiles(this.files)" 57function readMultiFiles(files) { 58 for (var i = 0; i < files.length; i++) { 59 setFilesReader(files[i]); 60 } 61} 62 63//res代表上传的图片，fileSize大小图片的大小 64function compress(res, fileSize, ismul) { 65 var img = new Image(), maxW = 640; //设置最大宽度 66 67 img.onload = function () { 68 var cvs = document.createElement('canvas'), ctx = cvs.getContext('2d'); 69 70 if(img.width > maxW) { 71 img.height *= maxW / img.width; 72 img.width = maxW; 73 } 74 75 cvs.width = img.width; 76 cvs.height = img.height; 77 78 ctx.clearRect(0, 0, cvs.width, cvs.height); 79 ctx.drawImage(img, 0, 0, img.width, img.height); 80 81 var compressRate = getCompressRate(1,fileSize); 82 83 var dataUrl = cvs.toDataURL('image/jpeg', compressRate); 84 85 //document.body.appendChild(cvs); 86 //console.log(ismul); 87 if (ismul == 0) { 88 $('#hidpic').val(dataUrl); 89 } else if (ismul == 1) { 90 $('#hidpics').val($('#hidpics').val()+'||'+dataUrl); 91 } 92 } 93 img.src = res; 94} 95 96//计算压缩比率，size单位为MB 97function getCompressRate(allowMaxSize,fileSize){ 98 var compressRate = 1; 99 100 if(fileSize/allowMaxSize > 4){ 101 compressRate = 0.5; 102 } else if(fileSize/allowMaxSize >3){ 103 compressRate = 0.6; 104 } else if(fileSize/allowMaxSize >2){ 105 compressRate = 0.7; 106 } else if(fileSize > allowMaxSize){ 107 compressRate = 0.8; 108 } else{ 109 compressRate = 0.9; 110 } 111 return compressRate; 112} 113 114</script> 115</body> 116</html>
后端用PHP:
1<?php 2 3 4//单图 5$base64 = trim($_POST['hidpic']); 6$url = explode(',', $base64); 7file_put_contents('./test-s.jpg', base64_decode($url[1]));//返回的是字节数 8 9 10//多图 11$base64 = trim($_POST['hidpics'], '||'); 12$urlArr = explode('||', $base64); 13$i = 0; 14foreach ($urlArr as $url) { 15 $url = explode(',', $url); 16 $a = file_put_contents('./test'.$i.'.jpg', base64_decode($url[1]));//返回的是字节数 17 $i++; 18} 19 20print_r('upload ok'); 21 22?>