时间戳

首页 > 解决方案 > 使用 PHP 和 jQuery 上传多个图像

jquery - 使用 PHP 和 jQuery 上传多个图像

问题描述

我有下面的代码可以完美运行并上传多个图像。它垂直显示，所以我试图让它水平显示。

这是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;
}

我希望输出水平显示，而不是像这样垂直显示。 在此处输入图像描述

标签： jqueryhtml

解决方案

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

在此解决方案中，所有filedivs 都放在files_container显示为的 a 中flex。

HTML：

<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"/>

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

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

最后是Javascript：

$('#add_more').click(function() {
    if (max < 2) {
        $("#files_container").append(
            $("<div>", {'class':'filediv'}).fadeIn('slow').append(
                $("<input>", {'class': 'file', name: 'file[]', type: 'file'})
            )
        );
        max++;
    }
});

祝你好运！

推荐阅读