思路：
将照片转base64传后台
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>多张照片上传</title>
<style type="text/css">
/*选择图片框样式*/
#div_imgfile {
width: 130px;
height: 75px;
text-align: center;
line-height: 75px;
font-family: 微软雅黑;
font-size: 16px;
box-sizing: border-box;
border: 2px solid #808080;
cursor: pointer;
}
/*文本框input file隐藏*/
.imgfile {
display: none;
}
/*图片预览容器样式*/
#div_imglook {
margin-top: 20px;
background-color: #FFEFD5;
}
/*单个图片预览模块样式*/
.lookimg {
width: 130px;
height: 130px;
box-sizing: border-box;
border: 1px solid #808080;
float: left;
margin-right: 10px;
position: relative;
}
/*删除按钮样式*/
.lookimg_delBtn {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #808080;
opacity: 0.8;
color: white;
font-size: 16px;
font-family: 微软雅黑;
display: none;
cursor: pointer;
}
/*上传进度条样式*/
.lookimg_progress {
position: absolute;
bottom: 15px;
left: 0px;
width: 100%;
height: 20px;
background-color: #e0e0e0;
box-sizing: border-box;
border: 1px solid black;
display: none;
text-align: center;
line-height: 20px;
font-size: 14px;
}
/*删除按钮移入移出效果*/
.lookimg_delBtn:hover {
opacity: 1;
}
.lookimg img {
width: 100%;
height: 100%;
}
.lookimg_progress div {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 0px;
background-color: #e9cc2e;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
//照片大小限制1M
var imgSize = 1;
//照片数量限制3张
var imgCount = 3;
//上传图片张数记录
var upImgCount = 0;
$(function(){
//打开选择文本框，创建file文本框
$("#div_imgfile").click(function(){
//判断照片数量
if($(".lookimg").length >= imgCount){
alert("一次最多上传" + imgCount + "张图片");
return;
}
//创建一个input
var carFile = document.createElement("input");
if ($(".imgfile").length <= $(".lookimg").length) {
carFile.setAttribute("type", "file");
carFile.setAttribute("class", "imgfile");
carFile.setAttribute("accept", ".png,.jpg,.jpeg");
carFile.setAttribute("num", upImgCount);
$("#div_imgfile").after(carFile);
}else{
carFile = $(".imgfile").eq(0).get(0);
}
return $(carFile).click();
});
//绑定change事件，将照片回显页面
$(document).on("change", ".imgfile", function () {
//判断是否有照片
if ($(this).val().length > 0) {
//判断照片格式
var imgFormat = $(this).val().substr($(this).val().length - 3, 3);
if (imgFormat != "png" && imgFormat != "jpg" && imgFormat != "peg") {
alert("照片格式不正确！！！");
return;
}
//判断图片是否过大，当前设置1MB,获取file文件对象
var file = this.files[0];
if (file.size > (imgSize * 1024 * 1024)) {
alert("图片大小不能超过" + imgSize + "MB");
$(this).val("");
return;
}
//创建预览外层
var preDiv = document.createElement("div");
preDiv.setAttribute("class", "lookimg");
//创建内层img对象
var preView = document.createElement("img");
$(preDiv).append(preView);
//创建删除按钮
var imgDel = document.createElement("div");
imgDel.setAttribute("class", "lookimg_delBtn");
imgDel.innerHTML = "移除";
$(preDiv).append(imgDel);
//创建进度条
var imgProgress = document.createElement("div");
imgProgress.setAttribute("class", "lookimg_progress");
$(imgProgress).append(document.createElement("div"));
$(preDiv).append(imgProgress);
//记录此对象对应编号
preDiv.setAttribute("num", $(this).attr("num"));
//对象注入界面
$("#div_imglook").append(preDiv);
//编号增长防重复
upImgCount++;
//预览功能 start
var reader = new FileReader();//创建读取对象
reader.onloadend = function () {
preView.src = reader.result;//读取加载，将图片编码绑定到元素
}
if (file) {//如果对象正确
reader.readAsDataURL(file);//获取图片编码
} else {
preview.src = "";//返回空值
}
//预览功能 end
}else{
alert("请选择照片");
}
});
//删除绑定click事件
$(document).on("click", ".lookimg_delBtn", function () {
$(".imgfile[num=" + $(this).parent().attr("num") + "]").remove();//移除图片file
$(this).parent().remove();//移除图片显示
});
//删除按钮绑定移入移出效果
$(document).on("mouseover", ".lookimg", function () {
$(this).children(".lookimg_delBtn").eq(0).css("display", "block");
});
$(document).on("mouseout", ".lookimg", function () {
$(this).children(".lookimg_delBtn").eq(0).css("display", "none");
});
});
//传后台
function submitForm(){
$(".lookimg > img").each(function(){
console.log($(this).attr("src"));
});
}
</script>
</head>
<body>
<!-- 图片预览 -->
<div id="div_imglook">
</div>
<button id="div_imgfile">选择照片</button>
</br>
<button onclick="submitForm()">提交</button>
</body>
</html>
相关推荐
本示例项目 "uniapp多张图片上传.rar" 提供了一个关于如何在 uniapp 中实现多张图片上传的实例，下面我们将详细探讨这个知识点。 首先，`main.js` 是应用的主入口文件，通常用于配置全局变量和挂载根 Vue 实例。在...
总的来说，实现JS移动端/H5同时选择多张图片上传并使用canvas压缩图片，主要涉及HTML5的`<input type="file">`、FileReader API、Canvas API和异步上传技术。通过这些技术，我们可以为用户提供高效、友好的图片上传...
在我们的多张图片上传例子中，Uploadify将扮演关键角色，提供用户友好的文件选择和上传体验。 实现多张图片上传的第一步是**集成uploadify**到MVC项目中。这包括在HTML页面中引入uploadify的CSS和JavaScript文件，...
为了支持多张图片上传，我们可以使用多个FileUpload控件，或者利用HTML5的multiple属性允许用户一次选择多个文件。 ```html 上传图片" OnClick="UploadButton_Click" /> ``` 接下来，我们需要在后台处理文件上传...
在ASP.NET中实现多张图片上传是一项常见的需求，比如在用户个人资料编辑、产品展示或社交媒体平台等场景。下面将详细介绍如何在ASP.NET中实现多张图片的上传功能。 首先，我们需要在HTML页面上设置一个可以供用户...
4. **FormData对象**：在上传多张图片时，通常会用到FormData对象，它可以将文件和表单数据打包成一个HTTP请求体，便于通过Ajax方式发送到服务器。jQuery的$.ajax或$.fileUpload方法可以方便地处理这种类型的请求。 ...
在IT领域，多张图片上传是一项常见的功能，尤其在社交媒体、电子商务、图像分享等网站上。这个功能使得用户能够一次性上传多个图像文件，极大地提高了用户体验。在这个场景中，我们将主要探讨如何实现Java环境下多张...
在Android应用开发中，模仿淘宝评论多张图片上传的功能是一个常见的需求，这涉及到用户交互、图片处理、数据存储等多个方面。下面将详细讲解这个过程中的关键知识点。 首先，我们需要理解淘宝评论系统的基本架构。...
本文将详细讲解如何在iOS中实现单张图片上传与多张图片上传，帮助开发者解决这一难题。 首先，我们要理解的是，图片上传的基本流程通常包括选择图片、处理图片（如压缩、裁剪）、构建请求参数、发送HTTP请求以及...
"多张图片上传插件"就是为了满足这种需求而设计的前端工具，它允许用户一次性选择并上传多张图片，提供了类似微信或QQ说说发布图片的用户体验。这种功能大大提升了用户交互性和操作便捷性。 在实现多张图片上传时，...
要上传多张照片，首先需要在用户界面上创建一个选择图片的机制，这通常可以通过Intent的ACTION_PICK或者ACTION_GET_CONTENT来实现，让用户从相册或相机中选择多张图片。获取到图片的Uri后，我们可以通过...
如果是POST请求，还需在请求体中携带其他参数，但在这个场景下，描述提到的是"不带值的多张照片上传"，意味着可能只上传图片而没有额外的数据。 6. 异步处理： 由于上传操作可能耗时较长，应避免在主线程中执行，...
在Java编程环境中，图片上传功能是一项常见的需求，尤其在开发Web应用或移动应用时。本DEMO主要展示了如何实现单张或多张图片文件的上传功能。以下将详细讲解涉及的知识点。 1. **文件I/O操作**：在Java中，进行...
在ASP.NET中实现多张图片上传功能是一项常见的需求，尤其对于构建包含图像展示或上传功能的网站至关重要。本文将深入探讨如何使用FileUpload控件来实现这一功能，并结合描述中的内容，提供一个详尽的步骤解析。 ...
Vue.js 提供了多种方式来实现多张图片上传的功能。下面我们将详细探讨如何在 Vue.js 中实现这一功能。 首先，我们需要理解图片上传的基本流程： 1. **选择图片**：用户通过HTML的`<input type="file">`标签选择...
这个“HTML5多张图片上传删除代码.zip”文件应该包含了一个实现这一功能的源码示例。下面将详细介绍HTML5中用于图片上传和删除的关键技术。 首先，HTML5中的`<input type="file">`元素允许用户选择本地文件。通过...
这个压缩包文件“安卓图片多选相关-选择多张照片上传.rar”似乎包含了一个实现这一功能的源码示例。由于无法直接运行和验证所有内容，下面将根据提供的信息和一般的开发实践来详细解释相关的知识点。 1. **多图选择...
【Android高级应用源码-选择多张照片上传.zip】是一个包含Android应用开发中涉及的多图选择和上传功能的源代码资源。这个压缩包可能是为了帮助开发者理解和实现类似功能而提供的示例或教程。源码分析是提升Android...
"多张图片同时上传，仿QQ更新图片上传进度"这个主题聚焦于如何实现类似QQ的批量图片上传，并实时显示每张图片的上传进度。在这个过程中，我们需要涉及以下几个关键知识点： 1. **前端上传组件**：首先，前端需要一...