点击 按钮 上传多张图片
功能样式：（与以往不同）刚开始无显示框，仅有添加按钮，点击添加后页面添加一个图片，再次点击继续添加------这里与后台交互用到AJAX处理
直接上代码：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#upBox{
text-align: center;
width:500px;
padding: 20px;
border: 1px solid #666;
margin: auto;
margin-top: 150px;
margin-bottom: 200px;
position: relative;
border-radius: 10px;
}
#inputBox{
width: 100%;
height: 40px;
border: 1px solid cornflowerblue;
color: cornflowerblue;
border-radius: 20px;
position: relative;
text-align: center;
line-height: 40px;
overflow: hidden;
font-size: 16px;
}
#inputBox input{
width: 114%;
height: 40px;
opacity: 0;
cursor: pointer;
position: absolute;
top: 0;
left: -14%;
}
#imgBox{
text-align: left;
}
.imgContainer{
display: inline-block;
width: 32%;
height: 150px;
margin-left: 1%;
border: 1px solid #666666;
position: relative;
margin-top: 30px;
box-sizing: border-box;
}
.imgContainer img{
width: 100%;
height: 150px;
cursor: pointer;
}
.imgContainer p{
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 30px;
background: black;
text-align: center;
line-height: 30px;
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
display: none;
}
.imgContainer:hover p{
display: block;
}
#btn{
outline: none;
width: 100px;
height: 30px;
background: cornflowerblue;
border: 1px solid cornflowerblue;
color: white;
cursor: pointer;
margin-top: 30px;
border-radius: 5px;
}
</style>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</head>
<body>
<div style="width: 100%;height: 100vh;position: relative;">
<div id="upBox">
<div id="inputBox"><input type="file" title="请选择图片" id="file" multiple accept="image/png,image/jpg,image/gif,image/JPEG"/>点击选择图片</div>
<div id="imgBox">
</div>
<button id="btn">上传</button>
</div>
</div>
<script src="js/uploadImg.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
imgUpload({
inputId:'file', //input框id
imgBox:'imgBox', //图片容器id
buttonId:'btn', //提交按钮id
upUrl:'', //提交地址
data:'file1' //参数名
})
</script>
</body>
</html>
ＪＳ：
var imgSrc = []; //图片路径
var imgFile = []; //文件流
var imgName = []; //图片名字
//选择图片
function imgUpload(obj) {
var oInput = '#' + obj.inputId;
var imgBox = '#' + obj.imgBox;
var btn = '#' + obj.buttonId;
$(oInput).on("change", function() {
var fileImg = $(oInput)[0];
var fileList = fileImg.files;
for(var i = 0; i < fileList.length; i++) {
var imgSrcI = getObjectURL(fileList[i]);
imgName.push(fileList[i].name);
imgSrc.push(imgSrcI);
imgFile.push(fileList[i]);
}
addNewContent(imgBox);
})
$(btn).on('click', function() {
var data = new Object;
data[obj.data] = imgFile;
submitPicture(obj.upUrl, data);
})
}
//图片展示
function addNewContent(obj) {
$(imgBox).html("");
for(var a = 0; a < imgSrc.length; a++) {
var oldBox = $(obj).html();
$(obj).html(oldBox + '<div class="imgContainer"><img title=' + imgName[a] + ' alt=' + imgName[a] + ' src=' + imgSrc[a] + ' onclick="imgDisplay(this)"><p onclick="removeImg(this,' + a + ')" class="imgDelete">删除</p></div>');
}
}
//删除
function removeImg(obj, index) {
imgSrc.splice(index, 1);
imgFile.splice(index, 1);
imgName.splice(index, 1);
var boxId = "#" + $(obj).parent('.imgContainer').parent().attr("id");
addNewContent(boxId);
}
//上传(将文件流数组传到后台)
function submitPicture(url,data) {
console.log(data);
alert('请打开控制台查看传递参数！');
if(url&&data){
$.ajax({
type: "post",
url: url,
async: true,
data: data,
traditional: true,
success: function(dat) {
// console.log(dat);
}
});
}
}
//图片灯箱
function imgDisplay(obj) {
var src = $(obj).attr("src");
var imgHtml = '<div style="width: 100%;height: 100vh;overflow: auto;background: rgba(0,0,0,0.5);text-align: center;position: fixed;top: 0;left: 0;z-index: 1000;"><img src=' + src + ' style="margin-top: 100px;width: 70%;margin-bottom: 100px;"/><p style="font-size: 50px;position: fixed;top: 30px;right: 30px;color: white;cursor: pointer;" onclick="closePicture(this)">×</p></div>'
$('body').append(imgHtml);
}
//关闭
function closePicture(obj) {
$(obj).parent("div").remove();
}
//图片预览路径
function getObjectURL(file) {
var url = null;
if(window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if(window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if(window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
ｊＱｕｅｒｙ版本可去官网下载
。
相关推荐
2. **触发文件选择**：当用户点击按钮时，我们需要调用浏览器的文件选择API，让用户选择他们想要上传的图片。这通常可以通过监听按钮的点击事件并调用`input[type=file]`元素的`click`事件来实现。 3. **处理多图...
在ASP.NET中，上传多张图片是一项常见的功能需求，尤其在构建交互性强的Web应用程序时。这个场景下，用户可以通过点击一个按钮来添加多个图片上传控件，以便一次性上传多张图片。以下将详细讲解如何实现这一功能。 ...
在PHP CMS v9系统中，用户可能会遇到一个棘手的问题：后台上传图片的按钮变得无法点击。这个问题主要是由于现代浏览器逐渐淘汰对Flash的支持所引起的。Flash曾是网页中用于多媒体内容展示的重要技术，但因其安全性和...
- 事件驱动编程：点击按钮触发图片预览或上传操作，按钮Click事件是关键。 7. 数据持久化： - 如果需要保存用户选择的图片列表，可以使用XML、JSON或SQLite数据库进行数据持久化。 8. 网络通信： - 使用...
在实际应用中，还需要考虑上传图片到服务器的部分。这通常涉及到使用Ajax（比如jQuery的`$.ajax`或Fetch API）来发送HTTP请求，同时可能需要处理文件的二进制数据。另外，为了优化用户体验，可能还会加入进度条、...
在它的4.1.11版本中，存在一个与Flash相关的问题，即多图上传按钮无法显示且无法通过Flash进行文件上传。由于Adobe公司在2020年底已经停止对Flash Player的支持，这个问题对于依赖Flash的KindEditor来说，确实是一个...
"一次性上传多张图片"的功能大大提升了用户体验，因为它减少了用户多次点击上传按钮的繁琐过程。C#作为.NET框架的主要编程语言，提供了丰富的库和API来支持这种功能的实现。下面我们将深入探讨如何在C#中实现一次性...
批量上传图片，可一次性选择不超过20张图片，选择好后可以删除其中不想上传的图片，点击“开始上传”后，即可将图片上传到服务器，点击“全部插入”可把图片显示在前台的页面中。 http://bbs.ah580.com
在JavaScript中，异步上传多张图片是一种常见的需求，特别是在网页应用中，用户可能需要上传照片作为个人资料、产品图片等。本篇文章将详细介绍如何使用一个特定的js异步上传多张图片插件，帮助开发者实现这一功能。...
在传统的文件上传方式中，用户通常需要点击按钮选择文件，然后再次点击上传按钮才能发起上传请求。而这个插件通过整合这两个步骤，极大地简化了上传流程，提升了用户体验。 Ajax技术的运用使得文件上传能够在后台...
首先，批量上传的核心在于用户可以选择多张图片，并且这些图片会逐个上传至服务器。在前端HTML部分，可以看到一个包含文件输入控件（`<input type="file">`）的表格结构，用户可以点击“增加”按钮来添加更多的文件...
本文将详细讲解如何实现“android 拍照或从本地相册多次添加多张图片”的功能，这涉及到Android的多媒体访问、意图（Intent）使用以及图片处理等多个知识点。 首先，我们需要理解Android的权限管理。在Android 6.0...
在.NET开发环境中，我们经常需要实现用户通过点击一个图像（img）按钮来上传图片的功能。这个功能对于网页或应用程序的交互性至关重要，因为它提供了一种直观且用户友好的方式来处理图像上传。以下是对该主题的详细...
批量上传图片，可一次性选择不超过20张图片，可删除其中不想上传的图片，点击“开始上传”后，即可将图片上传到服务器，点击“全部插入”即可将图片显示在前台页面中。有益初学者，对批量上传文件及图片加深理解并...
- 用户通过点击`<input type="file">`可以选择多张图片。 - `@change`事件监听文件选择，调用`handleFileChange`方法。 - `handleFileChange`将选中的文件传递给`readFile`方法，逐个读取并生成预览URL。 - `...
- 用户在前端选择多张图片，点击上传按钮。 - JavaScript截取文件信息，预览图片，并发送Ajax请求到后端接口。 - 后端接收到请求后，验证文件合法性，然后保存图片，返回保存成功的图片信息。 - 前端接收到返回...
版本4.1.12解决了之前版本中Flash批量上传图片按钮不显示的问题，并且增加了对video视频的支持，使得编辑器更加完善和适应现代网页的需求。 在Flash批量上传图片功能上，KindEditor 4.1.12修复了按钮不显示的bug，...
在开发Web应用时，有时我们需要实现用户上传多张图片的功能，这在论坛、博客、电商网站等场景中非常常见。ThinkPHP是一个流行的PHP框架，它提供了丰富的功能和强大的支持，帮助开发者快速构建复杂的Web应用。而...
这可以通过`editor.addButton`方法完成，同时定义按钮的回调函数，该函数将在用户点击按钮时执行。 ```javascript editor.addButton('bulk_image_upload', { text: '批量上传', icon: false, onclick: function...
在本教程中，我们将探讨如何将传统的文字式上传按钮转化为具有视觉吸引力、可点击图片的上传组件，如同微博中的图片上传按钮。 首先，我们需要了解基本的HTML和CSS知识。上传按钮通常由`<input type="file">`标签...