我创建了一个Image Uploader，但它无法正常工作。我无法理解我哪里出错了。
我的图片上传器的JSFIDDLE如下：
我面临的问题是，当我点击选择文件并选择多个文件并打开它时，我希望它显示我选择的所有图像的预览并且它正常工作但是当我点击删除按钮时它只删除预览，这意味着如果我提交文件，即使我已删除的文件也会上传。另一方面，我必须单击添加更多图像按钮以创建一个与上面相同的上传器，但是当我添加多个图像时它不显示任何预览，所以我甚至无法选择或删除我错误选择的图像。任何人都可以找到我错在哪里。我还需要添加更多图像按钮，这样如果我们忘记添加一些图像或图像在不同的目录中，我们可以调用另外一个输入类型文件，它应该与之前的功能相同。
答案 0 :(得分：2)
所以，你做了一些奇怪的事情（比如使用一个分配了整数的全局变量，假设你用它来跟踪你的对象）。
我已经清理了你发生的事情，并删除了一些冗余功能。基本上，您需要更好地利用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>
答案 1 :(得分：0)
这是我第一次为StackOverflow做贡献。我希望这可以帮助别人。我是Web开发的新手。但是，如果有人可以将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: ' \21BA';
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>