带预览的多图像上传器
Multiple Image Uploader with Preview
我创建了图片上传器，但它无法正常工作。我无法理解我哪里出错了。
我的图片上传器的JSFIDDLE如下：
我面临的问题是当我点击选择文件和 select 多个文件并打开它时，我希望它显示我 select 编辑的所有图像的预览它工作正常，但是当我点击删除按钮时，它只会删除预览，这意味着如果我提交文件，即使我已经删除的文件也会被上传。另一方面，我必须单击“添加更多图片”按钮来创建一个与上面相同的上传器，但是当我添加多张图片时，它不会显示任何预览，所以我什至不能 select 或删除我已经 select错误编辑。谁能找到我哪里出错了。我也需要添加更多图像按钮，这样如果我们忘记添加一些图像或图像在不同的目录中，我们可以再调用一个输入类型文件，它应该与以前的功能相同。
所以，你做了一些奇怪的事情（比如使用一个全局变量和一个分配给它的整数，我假设你用来跟踪你的对象）。
我已经清理了你发生的事情，并删除了一些多余的功能。本质上，您需要更好地利用 JavaScript FileReader() 函数。你需要仔细看看你的按钮；因为我没有为你修好它们。 ;)
您需要做的是遍历 this.files 数组，并使用 FileReader() 函数显示结果。代码如下。
$('#add_more').click(function() {
"use strict";
$(this).before($("<div/>", {
id: 'filediv'
}).fadeIn('slow').append(
$("<input/>", {
name: 'file[]',
type: 'file',
id: 'file',
multiple: 'multiple',
accept: 'image/*'
})
));
});
$('#upload').click(function(e) {
"use strict";
e.preventDefault();
if (window.filesToUpload.length === 0 || typeof window.filesToUpload === "undefined") {
alert("No files are selected.");
return false;
}
// Now, upload the files below...
// https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Handling_the_upload_process_for_a_file.2C_asynchronously
});
function deletePreview(ele, i) {
"use strict";
try {
$(ele).parent().remove();
window.filesToUpload.splice(i, 1);
} catch (e) {
console.log(e.message);
}
}
$("#file").on('change', function() {
"use strict";
// create an empty array for the files to reside.
window.filesToUpload = [];
if (this.files.length >= 1) {
$("[id^=previewImg]").remove();
$.each(this.files, function(i, img) {
var reader = new FileReader(),
newElement = $("<div id='previewImg" + i + "' class='abcd'><img /></div>"),
deleteBtn = $("<span class='delete' onClick='deletePreview(this, " + i + ")'>delete</span>").prependTo(newElement),
preview = newElement.find("img");
reader.onloadend = function() {
preview.attr("src", reader.result);
preview.attr("alt", img.name);
};
try {
window.filesToUpload.push(document.getElementById("file").files[i]);
} catch (e) {
console.log(e.message);
}
if (img) {
reader.readAsDataURL(img);
} else {
preview.src = "";
}
newElement.appendTo("#filediv");
});
}
});
#formdiv {
text-align: center;
}
#file {
color: green;
padding: 5px;
border: 1px dashed #123456;
background-color: #f9ffe5;
}
#img {
width: 17px;
border: none;
height: 17px;
margin-left: -20px;
margin-bottom: 191px;
}
.upload {
width: 100%;
height: 30px;
}
.abcd {
text-align: center;
position: relative;
}
.abcd img {
height: 200px;
width: 200px;
padding: 5px;
border: 1px solid rgb(232, 222, 189);
}
.delete {
color: red;
font-weight: bold;
position: absolute;
top: 0;
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="formdiv">
<div id="filediv">
<input type="file" id="file" name="files[]" multiple="multiple" accept="image/*" title="Select Images To Be Uploaded">
<br>
</div>
<input type="button" id="add_more" class="upload" value="Add More Images" />
<input type="submit" name="submit" value="Add Product" class="upload" id="upload" title="Add Product To The Inventory">
</div>
这是我第一次为 Whosebug 做贡献。我希望这可以帮助别人。我对网络开发还很陌生。但是，如果有人可以将 javascript 代码变成一个循环，我将不胜感激。下面的代码可以使用它们唯一的 name="name";
轻松地将多个图像上传到服务器
function showPreviewOne(event){
if(event.target.files.length > 0){
let src = URL.createObjectURL(event.target.files[0]);
let preview = document.getElementById("file-ip-1-preview");
preview.src = src;
preview.style.display = "block";
}
}
function myImgRemoveFunctionOne() {
document.getElementById("file-ip-1-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
}
/* **************************************************************************************** */
function showPreviewTwo(event){
if(event.target.files.length > 0){
let src = URL.createObjectURL(event.target.files[0]);
let preview = document.getElementById("file-ip-2-preview");
preview.src = src;
preview.style.display = "block";
}
}
function myImgRemoveFunctionTwo() {
document.getElementById("file-ip-2-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
}
/* **************************************************************************************************** */
function showPreviewThree(event){
if(event.target.files.length > 0){
let src = URL.createObjectURL(event.target.files[0]);
let preview = document.getElementById("file-ip-3-preview");
preview.src = src;
preview.style.display = "block";
}
}
function myImgRemoveFunctionThree() {
document.getElementById("file-ip-3-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
}
/* **************************************************************************************************** */
function showPreviewFour(event){
if(event.target.files.length > 0){
let src = URL.createObjectURL(event.target.files[0]);
let preview = document.getElementById("file-ip-4-preview");
preview.src = src;
preview.style.display = "block";
}
}
function myImgRemoveFunctionFour() {
document.getElementById("file-ip-4-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
}
/* **************************************************************************************** */
function showPreviewFive(event){
if(event.target.files.length > 0){
let src = URL.createObjectURL(event.target.files[0]);
let preview = document.getElementById("file-ip-5-preview");
preview.src = src;
preview.style.display = "block";
}
}
function myImgRemoveFunctionFive() {
document.getElementById("file-ip-5-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
}
/* **************************************************************************************************** */
function showPreviewSix(event){
if(event.target.files.length > 0){
let src = URL.createObjectURL(event.target.files[0]);
let preview = document.getElementById("file-ip-6-preview");
preview.src = src;
preview.style.display = "block";
}
}
function myImgRemoveFunctionSix() {
document.getElementById("file-ip-6-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
}
/* **************************************************************************************************** */
body {
margin:0px;
padding:0px;
background:#f1f1f1;
}
.image-upload-one{
grid-area: img-u-one;
display: flex;
justify-content: center;
}
.image-upload-two{
grid-area: img-u-two;
display: flex;
justify-content: center;
}
.image-upload-three{
grid-area: img-u-three;
display: flex;
justify-content: center;
}
.image-upload-four{
grid-area: img-u-four;
display: flex;
justify-content: center;
}
.image-upload-five{
grid-area: img-u-five;
display: flex;
justify-content: center;
}
.image-upload-six{
grid-area: img-u-six;
display: flex;
justify-content: center;
}
.image-upload-container{
display: grid;
grid-template-areas: 'img-u-one img-u-two img-u-three img-u-four img-u-five img-u-six';
}
.center {
display:inline;
margin: 3px;
}
.form-input {
width:100px;
padding:3px;
background:#fff;
border:2px dashed dodgerblue;
}
.form-input input {
display:none;
}
.form-input label {
display:block;
width:100px;
height: auto;
max-height: 100px;
background:#333;
border-radius:10px;
cursor:pointer;
}
.form-input img {
width:100px;
height: 100px;
margin: 2px;
opacity: .4;
}
.imgRemove{
position: relative;
bottom: 114px;
left: 68%;
background-color: transparent;
border: none;
font-size: 30px;
outline: none;
}
.imgRemove::after{
content: ' BA';
color: #fff;
font-weight: 900;
border-radius: 8px;
cursor: pointer;
}
.small{
color: firebrick;
font-size:15px;
}
@media only screen and (max-width: 700px){
.image-upload-container{
grid-template-areas: 'img-u-one img-u-two img-u-three'
'img-u-four img-u-five img-u-six';
}
}
<div class="image-upload-container">
<div class="image-upload-one">
<div class="center">
<div class="form-input">
<label for="file-ip-1">
<img id="file-ip-1-preview" src="https://i.ibb.co/ZVFsg37/default.png">
<button type="button" class="imgRemove" onclick="myImgRemoveFunctionOne()"></button>
</label>
<input type="file" name="img_one" id="file-ip-1" accept="image/*" onchange="showPreviewOne(event);">
</div>
<small class="small">Use the ↺ icon to reset the image</small>
</div>
</div>
<!-- ************************************************************************************************************ -->
<div class="image-upload-two">
<div class="center">
<div class="form-input">
<label for="file-ip-2">
<img id="file-ip-2-preview" src="https://i.ibb.co/ZVFsg37/default.png">
<button type="button" class="imgRemove" onclick="myImgRemoveFunctionTwo()"></button>
</label>
<input type="file" name="img_two" id="file-ip-2" accept="image/*" onchange="showPreviewTwo(event);">
</div>
<small class="small">Use the ↺ icon to reset the image</small>
</div>
</div>
<!-- ************************************************************************************************************ -->
<div class="image-upload-three">
<div class="center">
<div class="form-input">
<label for="file-ip-3">
<img id="file-ip-3-preview" src="https://i.ibb.co/ZVFsg37/default.png">
<button type="button" class="imgRemove" onclick="myImgRemoveFunctionThree()"></button>
</label>
<input type="file" name="img_three" id="file-ip-3" accept="image/*" onchange="showPreviewThree(event);">
</div>
<small class="small">Use the ↺ icon to reset the image</small>
</div>
</div>
<!-- *********************************************************************************************************** -->
<div class="image-upload-four">
<div class="center">
<div class="form-input">
<label for="file-ip-4">
<img id="file-ip-4-preview" src="https://i.ibb.co/ZVFsg37/default.png">
<button type="button" class="imgRemove" onclick="myImgRemoveFunctionFour()"></button>
</label>
<input type="file" name="img_four" id="file-ip-4" accept="image/*" onchange="showPreviewFour(event);">
</div>
<small class="small">Use the ↺ icon to reset the image</small>
</div>
</div>
<!-- ************************************************************************************************************ -->
<div class="image-upload-five">
<div class="center">
<div class="form-input">
<label for="file-ip-5">
<img id="file-ip-5-preview" src="https://i.ibb.co/ZVFsg37/default.png">
<button type="button" class="imgRemove" onclick="myImgRemoveFunctionFive()"></button>
</label>
<input type="file" name="img_five" id="file-ip-5" accept="image/*" onchange="showPreviewFive(event);">
</div>
<small class="small">Use the ↺ icon to reset the image</small>
</div>
</div>
<!-- ************************************************************************************************************ -->
<div class="image-upload-six">
<div class="center">
<div class="form-input">
<label for="file-ip-6">
<img id="file-ip-6-preview" src="https://i.ibb.co/ZVFsg37/default.png">
<button type="button" class="imgRemove" onclick="myImgRemoveFunctionSix()"></button>
</label>
<input type="file" name="img_six" id="file-ip-6" accept="image/*" onchange="showPreviewSix(event);">
</div>
<small class="small">Use the ↺ icon to reset the image</small>
</div>
</div>
<!-- ************************************************************************************************************** -->
</div>
我创建了图片上传器，但它无法正常工作。我无法理解我哪里出错了。
我的图片上传器的JSFIDDLE如下：
我面临的问题是当我点击选择文件和 select 多个文件并打开它时，我希望它显示我 select 编辑的所有图像的预览它工作正常，但是当我点击删除按钮时，它只会删除预览，这意味着如果我提交文件，即使我已经删除的文件也会被上传。另一方面，我必须单击“添加更多图片”按钮来创建一个与上面相同的上传器，但是当我添加多张图片时，它不会显示任何预览，所以我什至不能 select 或删除我已经 select错误编辑。谁能找到我哪里出错了。我也需要添加更多图像按钮，这样如果我们忘记添加一些图像或图像在不同的目录中，我们可以再调用一个输入类型文件，它应该与以前的功能相同。
所以，你做了一些奇怪的事情（比如使用一个全局变量和一个分配给它的整数，我假设你用来跟踪你的对象）。
我已经清理了你发生的事情，并删除了一些多余的功能。本质上，您需要更好地利用 JavaScript FileReader() 函数。你需要仔细看看你的按钮；因为我没有为你修好它们。 ;)
您需要做的是遍历 this.files 数组，并使用 FileReader() 函数显示结果。代码如下。
$('#add_more').click(function() {
"use strict";
$(this).before($("<div/>", {
id: 'filediv'
}).fadeIn('slow').append(
$("<input/>", {
name: 'file[]',
type: 'file',
id: 'file',
multiple: 'multiple',
accept: 'image/*'
})
));
});
$('#upload').click(function(e) {
"use strict";
e.preventDefault();
if (window.filesToUpload.length === 0 || typeof window.filesToUpload === "undefined") {
alert("No files are selected.");
return false;
}
// Now, upload the files below...
// https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Handling_the_upload_process_for_a_file.2C_asynchronously
});
function deletePreview(ele, i) {
"use strict";
try {
$(ele).parent().remove();
window.filesToUpload.splice(i, 1);
} catch (e) {
console.log(e.message);
}
}
$("#file").on('change', function() {
"use strict";
// create an empty array for the files to reside.
window.filesToUpload = [];
if (this.files.length >= 1) {
$("[id^=previewImg]").remove();
$.each(this.files, function(i, img) {
var reader = new FileReader(),
newElement = $("<div id='previewImg" + i + "' class='abcd'><img /></div>"),
deleteBtn = $("<span class='delete' onClick='deletePreview(this, " + i + ")'>delete</span>").prependTo(newElement),
preview = newElement.find("img");
reader.onloadend = function() {
preview.attr("src", reader.result);
preview.attr("alt", img.name);
};
try {
window.filesToUpload.push(document.getElementById("file").files[i]);
} catch (e) {
console.log(e.message);
}
if (img) {
reader.readAsDataURL(img);
} else {
preview.src = "";
}
newElement.appendTo("#filediv");
});
}
});
#formdiv {
text-align: center;
}
#file {
color: green;
padding: 5px;
border: 1px dashed #123456;
background-color: #f9ffe5;
}
#img {
width: 17px;
border: none;
height: 17px;
margin-left: -20px;
margin-bottom: 191px;
}
.upload {
width: 100%;
height: 30px;
}
.abcd {
text-align: center;
position: relative;
}
.abcd img {
height: 200px;
width: 200px;
padding: 5px;
border: 1px solid rgb(232, 222, 189);
}
.delete {
color: red;
font-weight: bold;
position: absolute;
top: 0;
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="formdiv">
<div id="filediv">
<input type="file" id="file" name="files[]" multiple="multiple" accept="image/*" title="Select Images To Be Uploaded">
<br>
</div>
<input type="button" id="add_more" class="upload" value="Add More Images" />
<input type="submit" name="submit" value="Add Product" class="upload" id="upload" title="Add Product To The Inventory">
</div>
这是我第一次为 Whosebug 做贡献。我希望这可以帮助别人。我对网络开发还很陌生。但是，如果有人可以将 javascript 代码变成一个循环，我将不胜感激。下面的代码可以使用它们唯一的 name="name";
轻松地将多个图像上传到服务器function showPreviewOne(event){
if(event.target.files.length > 0){
let src = URL.createObjectURL(event.target.files[0]);
let preview = document.getElementById("file-ip-1-preview");
preview.src = src;
preview.style.display = "block";
}
}
function myImgRemoveFunctionOne() {
document.getElementById("file-ip-1-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
}
/* **************************************************************************************** */
function showPreviewTwo(event){
if(event.target.files.length > 0){
let src = URL.createObjectURL(event.target.files[0]);
let preview = document.getElementById("file-ip-2-preview");
preview.src = src;
preview.style.display = "block";
}
}
function myImgRemoveFunctionTwo() {
document.getElementById("file-ip-2-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
}
/* **************************************************************************************************** */
function showPreviewThree(event){
if(event.target.files.length > 0){
let src = URL.createObjectURL(event.target.files[0]);
let preview = document.getElementById("file-ip-3-preview");
preview.src = src;
preview.style.display = "block";
}
}
function myImgRemoveFunctionThree() {
document.getElementById("file-ip-3-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
}
/* **************************************************************************************************** */
function showPreviewFour(event){
if(event.target.files.length > 0){
let src = URL.createObjectURL(event.target.files[0]);
let preview = document.getElementById("file-ip-4-preview");
preview.src = src;
preview.style.display = "block";
}
}
function myImgRemoveFunctionFour() {
document.getElementById("file-ip-4-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
}
/* **************************************************************************************** */
function showPreviewFive(event){
if(event.target.files.length > 0){
let src = URL.createObjectURL(event.target.files[0]);
let preview = document.getElementById("file-ip-5-preview");
preview.src = src;
preview.style.display = "block";
}
}
function myImgRemoveFunctionFive() {
document.getElementById("file-ip-5-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
}
/* **************************************************************************************************** */
function showPreviewSix(event){
if(event.target.files.length > 0){
let src = URL.createObjectURL(event.target.files[0]);
let preview = document.getElementById("file-ip-6-preview");
preview.src = src;
preview.style.display = "block";
}
}
function myImgRemoveFunctionSix() {
document.getElementById("file-ip-6-preview").src = "https://i.ibb.co/ZVFsg37/default.png";
}
/* **************************************************************************************************** */
body {
margin:0px;
padding:0px;
background:#f1f1f1;
}
.image-upload-one{
grid-area: img-u-one;
display: flex;
justify-content: center;
}
.image-upload-two{
grid-area: img-u-two;
display: flex;
justify-content: center;
}
.image-upload-three{
grid-area: img-u-three;
display: flex;
justify-content: center;
}
.image-upload-four{
grid-area: img-u-four;
display: flex;
justify-content: center;
}
.image-upload-five{
grid-area: img-u-five;
display: flex;
justify-content: center;
}
.image-upload-six{
grid-area: img-u-six;
display: flex;
justify-content: center;
}
.image-upload-container{
display: grid;
grid-template-areas: 'img-u-one img-u-two img-u-three img-u-four img-u-five img-u-six';
}
.center {
display:inline;
margin: 3px;
}
.form-input {
width:100px;
padding:3px;
background:#fff;
border:2px dashed dodgerblue;
}
.form-input input {
display:none;
}
.form-input label {
display:block;
width:100px;
height: auto;
max-height: 100px;
background:#333;
border-radius:10px;
cursor:pointer;
}
.form-input img {
width:100px;
height: 100px;
margin: 2px;
opacity: .4;
}
.imgRemove{
position: relative;
bottom: 114px;
left: 68%;
background-color: transparent;
border: none;
font-size: 30px;
outline: none;
}
.imgRemove::after{
content: ' BA';
color: #fff;
font-weight: 900;
border-radius: 8px;
cursor: pointer;
}
.small{
color: firebrick;
font-size:15px;
}
@media only screen and (max-width: 700px){
.image-upload-container{
grid-template-areas: 'img-u-one img-u-two img-u-three'
'img-u-four img-u-five img-u-six';
}
}
<div class="image-upload-container">
<div class="image-upload-one">
<div class="center">
<div class="form-input">
<label for="file-ip-1">
<img id="file-ip-1-preview" src="https://i.ibb.co/ZVFsg37/default.png">
<button type="button" class="imgRemove" onclick="myImgRemoveFunctionOne()"></button>
</label>
<input type="file" name="img_one" id="file-ip-1" accept="image/*" onchange="showPreviewOne(event);">
</div>
<small class="small">Use the ↺ icon to reset the image</small>
</div>
</div>
<!-- ************************************************************************************************************ -->
<div class="image-upload-two">
<div class="center">
<div class="form-input">
<label for="file-ip-2">
<img id="file-ip-2-preview" src="https://i.ibb.co/ZVFsg37/default.png">
<button type="button" class="imgRemove" onclick="myImgRemoveFunctionTwo()"></button>
</label>
<input type="file" name="img_two" id="file-ip-2" accept="image/*" onchange="showPreviewTwo(event);">
</div>
<small class="small">Use the ↺ icon to reset the image</small>
</div>
</div>
<!-- ************************************************************************************************************ -->
<div class="image-upload-three">
<div class="center">
<div class="form-input">
<label for="file-ip-3">
<img id="file-ip-3-preview" src="https://i.ibb.co/ZVFsg37/default.png">
<button type="button" class="imgRemove" onclick="myImgRemoveFunctionThree()"></button>
</label>
<input type="file" name="img_three" id="file-ip-3" accept="image/*" onchange="showPreviewThree(event);">
</div>
<small class="small">Use the ↺ icon to reset the image</small>
</div>
</div>
<!-- *********************************************************************************************************** -->
<div class="image-upload-four">
<div class="center">
<div class="form-input">
<label for="file-ip-4">
<img id="file-ip-4-preview" src="https://i.ibb.co/ZVFsg37/default.png">
<button type="button" class="imgRemove" onclick="myImgRemoveFunctionFour()"></button>
</label>
<input type="file" name="img_four" id="file-ip-4" accept="image/*" onchange="showPreviewFour(event);">
</div>
<small class="small">Use the ↺ icon to reset the image</small>
</div>
</div>
<!-- ************************************************************************************************************ -->
<div class="image-upload-five">
<div class="center">
<div class="form-input">
<label for="file-ip-5">
<img id="file-ip-5-preview" src="https://i.ibb.co/ZVFsg37/default.png">
<button type="button" class="imgRemove" onclick="myImgRemoveFunctionFive()"></button>
</label>
<input type="file" name="img_five" id="file-ip-5" accept="image/*" onchange="showPreviewFive(event);">
</div>
<small class="small">Use the ↺ icon to reset the image</small>
</div>
</div>
<!-- ************************************************************************************************************ -->
<div class="image-upload-six">
<div class="center">
<div class="form-input">
<label for="file-ip-6">
<img id="file-ip-6-preview" src="https://i.ibb.co/ZVFsg37/default.png">
<button type="button" class="imgRemove" onclick="myImgRemoveFunctionSix()"></button>
</label>
<input type="file" name="img_six" id="file-ip-6" accept="image/*" onchange="showPreviewSix(event);">
</div>
<small class="small">Use the ↺ icon to reset the image</small>
</div>
</div>
<!-- ************************************************************************************************************** -->
</div>