javascript - 如何选择多张图片并提交
问题描述
这个想法是网页中有一些颜色样本,人们可以选择多种颜色并提交。重要的是我们知道人们提交了哪些颜色样本以及谁提交了。到目前为止,我已经找到了一个选择多个彩色图像的解决方案(代码如下),但是如何使用联系表 7 提交选择的图像?或其他方法,只要我们可以收集人们填写的联系信息和他们选择的图像。
以下是选择多个图像的解决方案
ul {
list-style-type: none;
}
li {
display: inline-block;
}
input[type="checkbox"][id^="cb"] {
display: none;
}
label {
border: 1px solid #fff;
padding: 10px;
display: block;
position: relative;
margin: 10px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label::before {
background-color: white;
color: white;
content: " ";
display: block;
border-radius: 50%;
border: 1px solid grey;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
}
label img {
height: 100px;
width: 100px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked+label {
border-color: #ddd;
}
:checked+label::before {
content: "✓";
background-color: grey;
transform: scale(1);
}
:checked+label img {
transform: scale(0.9);
box-shadow: 0 0 5px #333;
z-index: -1;
}
<ul>
<li><input type="checkbox" id="cb1" />
<label for="cb1"><img src="https://picsum.photos/seed/1/100" /></label>
</li>
<li><input type="checkbox" id="cb2" />
<label for="cb2"><img src="https://picsum.photos/seed/2/100" /></label>
</li>
<li><input type="checkbox" id="cb3" />
<label for="cb3"><img src="https://picsum.photos/seed/3/100" /></label>
</li>
<li><input type="checkbox" id="cb4" />
<label for="cb4"><img src="https://picsum.photos/seed/4/100" /></label>
</li>
</ul>
解决方案
这是适合您的 jQuery 版本。我认为这是更简单的事情。
$(function() {
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#gallery-photo-add').on('change', function() {
imagesPreview(this, 'div.gallery');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" multiple id="gallery-photo-add">
<div class="gallery"></div>
推荐阅读
- java - Java Thread join() 与睡眠间隔导致问题
- php - 如何在 php oop {$this 不起作用}中获取父函数到子函数
- java - 如何在 Spring Boot 中创建自定义注解?
- node.js - 不支持的投影选项:Azure CosmosDb 上的 $concat
- python - 为什么可以为具有连接的元组分配新值?
- java - 如何使用 Gradle Proguard 插件作为 Maven 存储库依赖项?(不引用本地文件夹。)
- elasticsearch - Elastica:Elastica 中的 IN 等效运算符
- c - C - strcpy 与赋值
- jquery - Jquery-Break setInterval 并重置为其原始位置
- javascript - 在 JavaScript 中将对象推入数组的内部数组