移动端图片上传
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="yes" name="apple-touch-fullscreen" />
<meta content="telephone=no,email=no" name="format-detection" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<title>移动端上传图片</title>
<link
rel="stylesheet"
href="https://www.jq22.com/demo/upload202306202300/css/reset.css"
media="screen"
title="no title"
/>
<link
rel="stylesheet"
href="https://www.jq22.com/demo/upload202306202300/css/invoices.css"
media="screen"
title="no title"
/>
<script src="https://www.jq22.com/demo/upload202306202300/js/flexible.js"></script>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/demo/upload202306202300/js/util.js"></script>
</head>
<body>
<div id="index" class="index-page">
<div class="upload">
<div class="title">
<div class="size">上传图片</div>
<div class="tips">（非必填，单张图片不超过5M）</div>
</div>
<div class="img_box">
<div class="box">
<img src="https://www.jq22.com/demo/upload202306202300/img/add.png" alt="" />
<input type="file" name="file" class="addImg" id="upload_image" />
</div>
<div class="imgNumber"></div>
</div>
</div>
<div class="btn">
<button class="submit">上传图片</button>
</div>
</div>
</body>
</html>
<script>
$(function () {
var textVal = $("#tex").val();
// 图片数量初始化
$(".imgNumber").text("0/4");
// 图片上传
var imgArr = [];
var res = "";
$("#upload_image").change(function (event) {
var files = event.target.files,
file;
var filePath = $(this).val(),
fileFormat = filePath
.substring(filePath.lastIndexOf("."))
.toLowerCase(); //获取文件格式
if (files && files.length > 0) {
file = files;
if (file.size > 1024 * 1024 * 5) {
toast("图片大小不能超过 5MB!");
return false;
}
if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
toast("上传错误,文件格式必须为：png/jpg/jpeg");
return false;
}
var URL = window.URL || window.webkitURL;
var imgURL = URL.createObjectURL(file);
var strs = imgURL.substring(27);
let imgageDom =
"<div style='position:relative'class='image' id='" +
strs +
"'><imgsrc='" +
imgURL +
"'/> <svg data-src='" +
imgURL +
"'t='1661306388955' class='icon'id='close' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='25663' width='64' height='64'><pathid='close' data-src='" +
imgURL +
"'d='M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333z m0 64C311.701333 149.333333 149.333333 311.701333 149.333333 512s162.368 362.666667 362.666667 362.666667 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333z m182.997333 179.669334a30.72 30.72 0 0 1 0 43.456l-139.52 139.52 139.52 139.562666a30.72 30.72 0 1 1-43.456 43.456l-139.52-139.562666-139.562666 139.562666a30.72 30.72 0 1 1-43.456-43.456L468.565333 512l-139.562666-139.52a30.72 30.72 0 1 1 43.456-43.456L512 468.522667l139.52-139.52a30.72 30.72 0 0 1 43.456 0z' fill='#bfbfbf' p-id='25664'></path></svg></div>";
// 上传本地预览
$(".box").before(imgageDom);
$(".imgNumber").text($(".img_box").children(".image").length + "/4");
// 超过4张不上传
$(".img_box").children(".image").length >= 4
? $(".box").hide()
: $(".box").show();
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
imgArr.push(reader.result);
res = reader.result;
let index = $(".img_box .image svg").last().attr("index", res);
};
}
$("#upload_image").val("");
});
// 提交
$(".btn").click(function () {
let params = {};
$("#phone").val() ? (params.phoneNo = $("#phone").val()) : "";
$("#tex").val() ? (params.msg = $("#tex").val()) : "";
imgArr ? (params.pic1 = imgArr) : "";
imgArr ? (params.pic2 = imgArr) : "";
imgArr ? (params.pic3 = imgArr) : "";
imgArr ? (params.pic4 = imgArr) : "";
// 调用ajax发送数据
// ajax(params);
});
// 删除预览图片
$(".img_box").on("click", "#close", (e) => {
console.log("123", e.target);
let src = $(e.target).attr("data-src");
let index = $(e.target).attr("index");
const images = $(".img_box").find("div");
let id = src.substring(27);
var delBox = document.getElementById(id);
delBox.remove(delBox);
imgArr.splice(imgArr.indexOf(index), 1);
$(".imgNumber").text($(".img_box").children(".image").length + "/4");
// 超过4张不上传
$(".img_box").children(".image").length >= 4
? $(".box").hide()
: $(".box").show();
});
function ajax(data) {
var isLoading = true;
var loadNum = 0;
$.ajax({
type: "POST",
data: data,
url: "",
dataType: "json",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
success: function (d) {
console.log("成功", d);
if (d.result == "000") {
successfn(d);
} else {
console.log(d);
if (typeof errorfn === "function") {
errorfn("success", d);
} else {
// $.toast(d.msg);
}
}
},
error: function (e) {
console.log("失败", e);
if (typeof errorfn === "function") {
errorfn("error", e);
} else {
// toast("请求出错！");
console.log(e);
}
},
});
}
});
</script>
页:
[1]