这是一个关于H5页面实现多图上传、图片压缩和限制上传数量的示例代码。代码包括了图片预览、超过3M压缩、最多上传6张图片的功能，以及隐藏/显示上传按钮的逻辑。此外，还包含了对上传图片数量的实时更新和删除图片的交互处理。
最近有一个需求，花费了我一天时间
需求是 H5页面多图上传，web端可以添加，可以删除，最多上传6张图片，超过6张图片就隐藏上传按钮，少于6张则显示上传按钮 ，超过3M的图片需要做压缩处理再上传，否则占用了服务器带宽，代码如下：
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1"><!--强制使用ie最新内核模式渲染-->
<meta name="keywords" content="举报申诉">
<meta name="description" content="举报申诉">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<script type="text/javascript" src="../views/clientpage/js/jquery.min.js"></script>
<script type="text/javascript">
//console.log(document);
//console.log(window);
window.onresize = function(){
getRem(750,100)
};
function getRem(pwidth,prem){
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth/pwidth*prem + "px";
}
</script>
<style>
/*初始化*/
*{margin:0; padding:0;}
a { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; text-decoration: none; }
img { width: 100%;}
/*初始化*/
.dialog{
width: 90%;
height: 30%;
display: none;
margin: 0 auto;
position: absolute;
top: 25%;
left: 5%;
z-index: 99;
border-radius: 0.2rem;
background: #fff;
}
.dialog .dialog_text{
padding-top: 20%;
text-align: center;
font-size: 0.4rem;
}
.dialog .dialog_confirm{
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
background: #ff7a21;
color: white;
padding: 4% 0;
font-size: 0.5rem;
letter-spacing: 0.1rem;
border-bottom-left-radius: 0.1rem;
border-bottom-right-radius: 0.1rem;
}
.fullscreen{
width: 100%;
top: 0;
height: 100%;
background-color: rgba(0,0,0,0.6);
position: absolute;
z-index: 15;
display: none;
}
/*外层div*/
.input-file-box{
background: whitesmoke;
border: 1px solid whitesmoke;
color: #a2a2a2;
width: 2rem;
height: 2rem;
position: relative;
overflow: hidden;
float: left;
text-align: center;
border-radius: 0.2rem;
margin-top: 4%;
margin-right: 3.5%;
}
/*文字描述*/
.input-file-box > span{
display: block;
font-size: 0.3rem;
line-height: 0.2rem;
}
.input-file-box >.span_1{
line-height: 0.8rem;
font-size: 0.8rem;
margin-top: 20%;
}
/*input框*/
.input-file-box #uploadfile{
opacity: 0;
width: 100%;
height: 100%;
margin-top: -1.4rem;
margin-left: -1rem;
position: absolute;
}
.main{
width: 92%;
height: 5rem;
background: white;
padding: 2% 4%;
font-size: 0.35rem;
}
.title_report{
}
.report_type{
width: 100%;
background: whitesmoke;
border: 1px solid whitesmoke;
border-radius: 0.1rem;
color: #a2a2a2;
margin: 4% 0;
height: 0.7rem;
padding: 0 2%;
box-shadow:0 0 0 rgba(0,0,0,0);
resize: none;
font-size: 0.3rem;
}
.title_report>span{
color: red;
}
.content{
width: 96%;
background: whitesmoke;
border: 1px solid whitesmoke;
border-radius: 0.1rem;
color: #a2a2a2;
padding: 2% 2%;
margin: 5% 0;
height: 3.5rem;
box-shadow:0 0 0 rgba(0,0,0,0);
-webkit-appearance:none;
resize: none;
font-size: 0.3rem;
}
.submit{
width: 100%;
font-size: 0.35rem;
background: #ff7a21;
color: white;
border: 1px solid #ff7a21;
border-radius: 1rem;
padding: 3% 0;
margin: 5% 0;
outline:none; /*去掉点击时，出现的边框*/
}
.div_file{
overflow: hidden;
}
.div_delete{
width: 0.5rem;
height: 0.5rem;
background: black;
opacity: 0.4;
border-radius: 0.1rem;
text-align: center;
line-height: 0.4rem;
color: white;
right: 0;
position: absolute;
font-size: 0.6rem;
}
</style>
<title>举报</title>
</head>
<body>
<div class="main">
<p class="title_report">选择举报类型:</p>
<select name="report_type" class="report_type" >
<?php if(!empty($report_type)) { foreach($report_type as $k=>$v ){ ?>
<option value="<?php echo $k; ?>"><?php echo $v; ?></option>
<?php } } ?>
</select>
<p class="title_report">填写详细举报原因<span>(必填)</span>:</p>
<textarea name="content" class="content" placeholder="请描述具体情况，有助于举报快速处理"></textarea>
<p class="title_report">上传凭证图片(选填):</p>
<!--添加图片-->
<div class="div_file" id="div_file">
<!-- <div class="input-file-box img_box" ><div class="div_delete" >×</div></div>-->
<div class="input-file-box uploadfile" >
<span class="span_1">+</span>
<span>上传凭证</span>
<input type="file" name="uploadfile" id="uploadfile" accept="image/jpeg,image/gif,image/jpg,image/png" multiple="multiple" />
</div>
</div>
<button type="submit" class="submit" id="submit" value="提交">提交</button>
</div>
<!--弹窗提示-->
<div class="fullscreen"></div>
<section class="dialog">
<div class="dialog_text"></div>
<div class="dialog_confirm">确定</div>
</section>
<!--弹窗提示-->
<!-- h5页面调试工具-->
<!--<script src="//cdn.jsdelivr.net/npm/eruda"></script>-->
<!--<script>eruda.init();</script>-->
<!-- h5页面调试工具-->
</body>
</html>
<script type="text/javascript">
//var url = "http://<?php echo $_SERVER['HTTP_HOST'];?>/******.php";
var fromid = '<?php echo $fromid; ?>';
var userid = '<?php echo $toid; ?>';
var formData = new FormData();
var imgData = [];
/*是否刷新*/
var refre_s = false;
var url = "http://<?php echo str_replace('web','api',$_SERVER['HTTP_HOST']);?>/friend/accusation_user.php";
console.log(url);
/** 点击删除点图 */
$(".div_file").on("click",".div_delete",function () {
//console.log(this);
console.log(imgData);
var data_name = $(this).attr('data_name');
//console.log(data_name);
$.each(imgData,function(imgData_k){ //imgData_k:索引 imgData_v:循环的每个元素
/** 不存在该下标， 就跳出循环 */
if(!imgData.hasOwnProperty(imgData_k)) return true; // 跳过本次循环，继续下一个循环
//console.debug(imgData_k);
//console.debug(imgData[imgData_k].size);
var imgData_Vname = imgData[imgData_k].size + imgData[imgData_k].name;
if( imgData_Vname == data_name ){
imgData.splice(imgData_k, 1);
//console.log(imgData_Vname);
}
});
//arr1.splice(index, n); //index：数组中需要删除数据的起始位置；n：需要删除的元素，数据的个数。 lastModified
$(this).parent().hide();
$(this).parent().remove();
var sum_img_ = $(".img_box").length;
/** 图片张数小于6张 就显示上传按钮 */
if(sum_img_ <6 )$(".uploadfile").show();
})
//弹框
$('.dialog_confirm').on('touchend',function(event){
event.preventDefault();
$(".dialog").fadeOut('slow');
$('.fullscreen').fadeOut('slow');
if(refre_s){ window.location.reload(); }
});
function dialog_show(html){
$('.fullscreen').fadeIn('slow');
$(".dialog_text").empty();
$(".dialog_text").append(html);
$(".dialog").fadeIn('slow');
}
/** 点击上传图片，实现图片预览功能 */
window.onload=function(){
getRem(750,100);
var input=document.getElementById("uploadfile");
var div;
var sum_img=0;
// 当用户上传时触发事件
input.onchange=function(){
readFile(this);
}
//处理图片并添加都dom中的函数
var readFile=function(obj){
// 获取input里面的文件组
var fileList=obj.files;
//console.log(fileList);
//对文件组进行遍历，可以到控制台打印出fileList去看看
for(var i=0;i<fileList.length;i++){
//imageFile.push(fileList[i]);
//console.log(fileList[i].type);
if(i>=6){
dialog_show("最多可以上传6张图片！");
break; //可跳出循环
}
/** 控制上传的图片大小，最大为3M */
var file_size = fileList[i].size;
var size = file_size / 1024;
if (size > (4*1024)) {
dialog_show("上传的图片大小不能超过3M！图片名称为[ "+fileList[i].name+" ]已被舍弃");
continue; // 跳过本次循环，继续下一个循环
}
/** 相同图片就跳出去，不上传相同的图片*/
var img_name =false;
$.each(imgData,function(imgData_k){ //imgData_k:索引 imgData_v:循环的每个元素
if( fileList[i].name==imgData[imgData_k].name && fileList[i].size==imgData[imgData_k].size ){
dialog_show("请不要上传相同的图片");
img_name = true;
return true;
}
});
if(img_name) continue; // 跳过本次循环，继续下一个循环
var reader= new FileReader();
/** 获取图片数量 */
sum_img = $(".img_box").length;
if((sum_img+i) <=6){
reader.readAsDataURL(fileList[i]);
// 当文件读取成功时执行的函数
reader.onload=(function(fileList){
return function(e){
/** 获取图片数量 */
sum_img = $(".img_box").length;
/** 图片张数大于6张 就隐藏上传按钮 */
if(sum_img >=6 ){
dialog_show("最多可以上传6张图片！");
return false;
}else {
//对图片进行压缩 false true
if(true){
var fileFormat = fileList.name.substring(fileList.name.lastIndexOf(".")).toLowerCase(),//拓展名
imgBase64a = ''; //存储图片的imgBase64
console.log(fileFormat);
// 检查是否是图片
if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
alert('上传错误,文件格式必须为：png/jpg/jpeg');
return;
}
var img_type = fileFormat.substr(1);
console.log('img_type-------'+img_type);
// 调用函数，对图片进行压缩
compress(fileList,img_type,function(imgBase64){
imgBase64a = imgBase64;//存储转换后的base64编码
/**
* imageURI为图片的base64编码，不包含头部部分：data:img/jpg;base64,
**/
//var fileName=(new Date()).getTime()+'.jpeg'; //随机文件名
//var imgfile=convertBase64UrlToImgFile(imgBase64a,fileName,'image/jpeg'); //转换成file
var fileName=fileList.name; //随机文件名
var imgfile=dataURLtoFile(imgBase64a,fileName); //转换成file
console.log('fileList-------');
console.log(fileList);
console.log('imgfile-------');
console.log(imgfile);
/** 往数组里面添加 图片数据 */
imgData.push(imgfile);
div = '<div class="input-file-box img_box" ><div class="div_delete" data_name="'+imgfile.size+imgfile.name+'" >×</div>' + '<img src="'+imgBase64a+'" /></div>';
$(".div_file").prepend(div);
if(sum_img >=5){
$(".uploadfile").hide();
}
});
}
}
}
})(fileList[i])
}
}
}
}
$("#uploadfile1").on("change",function(){
var filePath = $(this).val(), //获取到input的value，里面是文件的路径
fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),//拓展名
imgBase64a = '', //存储图片的imgBase64
fileObj = document.getElementById('uploadfile1').files[0]; //上传文件的对象,要这样写才行，用jquery写法获取不到对象
console.log(filePath);
console.log(fileFormat);
console.log(fileObj);
// 检查是否是图片
if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
alert('上传错误,文件格式必须为：png/jpg/jpeg');
return;
}
// 调用函数，对图片进行压缩
compress(fileObj,function(imgBase64){
imgBase64a = imgBase64;//存储转换后的base64编码
//console.log(imgBase64a);
//console.log(fileObj);
});
});
/**
* 有些浏览器(如edge)不支持new File，所以为了兼容，base64要先转换成blob再设置type，name，lastModifiedDate
* 属性间接转换成文件，而不推荐直接new File()的方式
**/
function convertBase64UrlToImgFile(urlData,fileName,fileType) {
var bytes = window.btoa(urlData); //转换为byte
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Int8Array(ab);
var i;
for (i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
//转换成文件，添加文件的type，name，lastModifiedDate属性
var blob=new Blob([ab], {type:fileType});
blob.lastModifiedDate = new Date();
blob.name = fileName;
return blob;
}
function dataURLtoFile(dataurl, filename) { //将base64转换为文件 File
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
// 对图片进行压缩
function compress(fileObj,type, callback){
if ( typeof (FileReader) === 'undefined') {
console.log("当前浏览器内核不支持base64图标压缩");
//调用上传方式不压缩
directTurnIntoBase64(fileObj,callback);
} else {
var reader = new FileReader();
reader.onload = function (e) { //要先确保图片完整获取到，这是个异步事件
var image = new Image();
image.src=e.target.result;
console.log('image------');
console.log(image.src);
//document.write(image);
image.onload = function(){
square = 0.5, //定义画布的大小，也就是图片压缩之后的像素(0.1~1)
canvas = document.createElement('canvas'), //创建canvas元素
context = canvas.getContext('2d'),
imageWidth = Math.round(square*image.width), //压缩图片的大小
imageHeight = Math.round(square*image.height);
canvas.width = imageWidth;
canvas.height = imageHeight;
context.clearRect(0, 0, imageWidth, imageHeight); //在给定矩形内清空一个矩形
context.drawImage(this, 0, 0, imageWidth, imageHeight);
//context.fillStyle = 'rgba(255, 255, 255, 0)';
var data = canvas.toDataURL('image/'+type,0.5);
console.log(data);
//压缩完成执行回调
callback(data);
};
};
reader.readAsDataURL(fileObj);
}
}
function directTurnIntoBase64(fileObj,callback){
var r = new FileReader();
// 转成base64
r.onload = function(){
//变成字符串
imgBase64 = r.result;
//console.log(imgBase64);
callback(imgBase64);
}
r.readAsDataURL(fileObj); //转成Base64格式
}
/** 提交图片 */
$("#submit").click(function(){
console.log(imgData);
//console.log($('.content').val());
//console.log($('.report_type').val());
/** 将图片渲染到 formData ，用来提交 */
$.each(imgData,function(imgData_k){ //imgData_k:索引 imgData_v:循环的每个元素
//对图片进行压缩 false true
if(false){
var fileFormat = imgData[imgData_k].name.substring(imgData[imgData_k].name.lastIndexOf(".")).toLowerCase(),//拓展名
imgBase64a = '', //存储图片的imgBase64
fileObj = imgData[imgData_k]; //上传文件的对象,要这样写才行，用jquery写法获取不到对象
console.log(fileFormat);
console.log(fileObj);
// 检查是否是图片
if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
alert('上传错误,文件格式必须为：png/jpg/jpeg');
return;
}
// 调用函数，对图片进行压缩
compress(fileObj,function(imgBase64){
imgBase64a = imgBase64;//存储转换后的base64编码
});
}
formData.append("imgData_"+imgData_k,imgData[imgData_k]);
});
var content = $('.content').val();
if(!content){
dialog_show('请填写详细举报原因！');
return false;
}
formData.append("memo",content);
formData.append("fromid",fromid);
formData.append("userid",userid);
formData.append("type",'web_accusation');
formData.append("mode",$('.report_type').val());
/** 打印上传的东西 */
//console.log(formData.get('type'));
for (var [a, b] of formData.entries()) {
console.log(a, b);
}
/** 打印上传的东西 */
$.ajax({
url: url ,
type: "post",
data: formData,
dataType: "json",
processData : false,
contentType : false,
success: function(data) {
console.log("success");
dialog_show(data.content);
refre_s = true;
},
error: function(xhr) {
console.log("error");
dialog_show('网络错误,请稍后再试');
}
});
})
</script>
扫一扫
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
