Question

我下面的代码可以完美运行并上传多张图片。它垂直显示，所以我试图使其水平显示。

这是html代码

<form enctype="multipart/form-data" action="" method="post">                   
<div id="filediv"><input name="file[]" type="file" id="file"/></div><br/>
 <input type="button" id="add_more" class="upload" value="Add More Files"/>

这是我的Javascript代码

$('#add_more').click(function() {
        if (max< 2) {

        $(this).before($("<div/>", {id: 'filediv'}).fadeIn('slow').append(
                $("<input/>", {name: 'file[]', type: 'file', id: 'file'}),        
                $("<br/><br/>")
                ));
    max++;
}
  });

我的CSS代码

.upload{
    background-color:#ff0000;
    border:1px solid #ff0000;
    color:#fff;
    border-radius:5px;
    padding:10px;
    text-shadow:1px 1px 0px green;
    box-shadow: 2px 2px 15px rgba(0,0,0, .75);
}
.upload:hover{
    cursor:pointer;
    background:#c20b0b;
    border:1px solid #c20b0b;
    box-shadow: 0px 0px 5px rgba(0,0,0, .75);
}
#file{
    color:green;
    padding:5px; border:1px dashed #123456;
    background-color: #f9ffe5;
}
#upload{
    margin-left: 45px;
}

#noerror{
    color:green;
    text-align: left;
}
#error{
    color:red;
    text-align: left;
}
#img{ 
    width: 17px;
    border: none; 
    height:17px;
    margin-left: -20px;
    margin-bottom: 91px;
}

.abcd{
    text-align: center;
}

.abcd img{
    height:100px;
    width:100px;
    padding: 5px;
    border: 1px solid rgb(232, 222, 189);
}
b{
    color:red;
}

我希望输出显示为水平，而不是垂直显示。 enter image description here

Answer 1

这是一个解决方案：首先请记住，您不能有多个带有相同id的标签，因此我将filediv改为class。 id='file'也是如此。

在此解决方案中，所有filediv都放在显示为files_container的{{1}}中。

HTML：

flex

在您的CSS中进行以下添加和更改：

<form enctype="multipart/form-data" action="" method="post"></form>
<div id="files_container">
    <div class="filediv">
        <input class="file" name="file[]" type="file">
    </div>
</div>
<input type="button" id="add_more" class="upload" value="Add More Files"/>

最后是Javascript：

#files_container {
    display:flex;
    justify-content:center;
}
.file{
    color:green;
    padding:5px;
    margin:5px;
    border:1px dashed #123456;
    background-color: #f9ffe5;
}

祝你好运！

使用PHP和jQuery上传多个图像

1 个答案: