Question

有很多方法可以设置上传按钮的样式。这就是我所拥有的，如果你想使用一个文件上传，那就非常有效：

<div class="file-upload">
  <div class="file-select">
    <div class="file-select-button" id="fileName">foto opladen</div>
    <div class="file-select-name" id="noFile">geen bestand gekozen</div>
    <input type="file" name="chooseFile" id="chooseFile">
  </div>
</div>

和css和js：

<script>
$('#chooseFile').bind('change', function () {
var filename = $("#chooseFile").val();
if (/^\s*$/.test(filename)) {
$(".file-upload").removeClass('active');
$("#noFile").text("No file chosen..."); 
}
else {
$(".file-upload").addClass('active');
$("#noFile").text(filename.replace("C:\\fakepath\\", "")); 
}
});
</script>

<style>
.file-upload{display:block;text-align:center;}
.file-upload .file-select{display:block;color: #34495e;cursor:pointer;height:40px;line-height:40px;text-align:left;background:#fff;overflow:hidden;position:relative;}
.file-upload .file-select .file-select-button{background:#fff;padding:0 10px;display:inline-block;height:40px;line-height:40px;border:1px solid #6b8df2;border-radius: 20px;}
.file-upload .file-select .file-select-name{line-height:40px;display:inline-block;padding:0 10px;}
.file-upload .file-select:hover{border-color:#34495e;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload .file-select:hover .file-select-button{background:#6b8df2;color:#fff;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload.active .file-select{border-color:#6b8df2;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload.active .file-select .file-select-button{background:#6b8df2;color:#FFFFFF;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload .file-select input[type=file]{z-index:100;cursor:pointer;position:absolute;height:100%;width:100%;top:0;left:0;opacity:0;filter:alpha(opacity=0);}
.file-upload .file-select.file-select-disabled{opacity:0.65;}
.file-upload .file-select.file-select-disabled:hover{cursor:default;display:block;border: 2px solid #dce4ec;color: #34495e;cursor:pointer;height:40px;line-height:40px;margin-top:5px;text-align:left;background:#FFFFFF;overflow:hidden;position:relative;}
.file-upload .file-select.file-select-disabled:hover .file-select-button{background:#dce4ec;color:#666666;padding:0 10px;display:inline-block;height:40px;line-height:40px;}
.file-upload .file-select.file-select-disabled:hover .file-select-name{line-height:40px;display:inline-block;padding:0 10px;}
</style>

但是在我的表格上我需要上传八张照片，所以我需要设置八个按钮see image。当使用多个文件上传按钮时，我找不到用于设置css样式的代码。

我也试过这个，给每个输入一个不同的名字= chooseFile，但是也不会有用：

<div class="file-upload">
  <div class="file-select">
    <div class="file-select-button" id="fileName">foto opladen</div>
    <div class="file-select-name" id="noFile">geen bestand gekozen</div>
     <input type="file" name="chooseFile1" id="chooseFile1">
  </div>
</div>

<script>
$('#chooseFile1').bind('change', function () {
var filename = $("#chooseFile1").val();
if (/^\s*$/.test(filename)) {
$(".file-upload").removeClass('active');
$("#noFile").text("No file chosen..."); 
}
else {
$(".file-upload").addClass('active');
$("#noFile").text(filename.replace("C:\\fakepath\\", "")); 
}
});
$('#chooseFile2').bind('change', function () {
var filename = $("#chooseFile2").val();
if (/^\s*$/.test(filename)) {
$(".file-upload").removeClass('active');
$("#noFile").text("No file chosen..."); 
}
else {
$(".file-upload").addClass('active');
$("#noFile").text(filename.replace("C:\\fakepath\\", "")); 
}
});
</script>

有人可以帮帮我吗？感谢。

Answer 1

知道了！

from tkinter import *
import sqlite3
import AddAccount
import RemoveAccount
import LogOnLib
import LoginMenu
import TrainerAccounts


class Records(object):
    def __init__(self, window):
        self.window = window
        window.state("zoomed")
        self.window.title('Trainer Accounts')
        window.update_idletasks()

        h = self.window.winfo_height()
        w = self.window.winfo_width()
        Center_h = h/2
        Center_w = w/2

        self.FrameRecords = Frame(window, bg = "PaleTurquoise1")
        self.FrameRecords.place(x = Center_w , y = Center_h, anchor = "center", width = 1024, height = 300)

        self.btn_Back = Button(self.FrameRecords, text = "Back", bg = "PaleTurquoise1", font =("Arial", "16"), command = self.Back, width = 20)
        self.btn_Back.grid(row = 1, column = 4, columnspan = 5)

        self.connection = sqlite3.connect(r"E:\Program\Accounts.db")
        self.cur = self.connection.cursor()
        self.btn_TrainerID = Label(self.FrameRecords, text = "Trainer ID", bg = "PaleTurquoise1", font =("Arial", "16"), width = 20)
        self.btn_TrainerID.grid(row = 0, column = 1, columnspan = 1)
        self.NameLabel = Label(self.FrameRecords, text = "Name", bg = "PaleTurquoise1", font =("Arial", "16"), width = 20)
        self.NameLabel.grid(row=0, column=0)
        self.showallrecords()



    def showallrecords(self):
        Data = self.readfromdatabase()


        for index, dat in enumerate(Data):
            self.row1 = Button(self.FrameRecords, text=dat[0],font =("Arial", "16"), command = self.account).grid(row=index+1, column=0)
            self.row2 = Label(self.FrameRecords, text=dat[1],font =("Arial", "16")).grid(row=index+1, column=1)




    def readfromdatabase(self):

        self.cur.execute("SELECT * FROM Trainers")
        return self.cur.fetchall()

        self.btn_TrainerID = self.row1
        self.NameLabel = self.row2

    def Back(self):
        self.FrameRecords.place_forget()
        GUI = LoginMenu.Logged(self.window)

    def account(self):
        self.FrameRecords.place_forget()
        GUI = TrainerAccounts.TrainerInfo(self.window, Records)
##########################################################################################################################################################################################
class TrainerInfo(Records):
    def __init__(self, window, Records):



        self.window = window
        window.state("zoomed")
        self.window.title('CHANGEEEE')
        window.update_idletasks()

        h = self.window.winfo_height()
        w = self.window.winfo_width()
        Center_h = h/2
        Center_w = w/2

        self.FrameTrainerInfo = Frame(window, bg = "PaleTurquoise1")
        self.FrameTrainerInfo.place(x = Center_w , y = Center_h, anchor = "center", width = 1024, height = 300)

        self.connection = sqlite3.connect(r"E:\Program\Accounts.db")
        self.cur = self.connection.cursor()
        self.showrecord()

    def showrecord(self):
        Data = self.Information()
        for index, dat in enumerate(Data):
            Label(self.FrameTrainerInfo, text=self.row1,font =("Arial", "16")).grid(row=index+1, column=0)
            Label(self.FrameTrainerInfo, text=self.row2,font =("Arial", "16")).grid(row=index+1, column=1)


    def Information(self):
            self.cur.execute("SELECT * FROM Trainers WHERE row1 = '" + row1 + "'" + "AND row2 = '" + row2 + "'")
            return self.cur.self.all()

和

<script>
$(".custom-upload").each(function() {
var uploadForm = $(this);
var uploadInput = $(this).find('#chooseFile');
$(uploadInput).bind('change', function () {
var filename = $(uploadInput).val();
if (/^\s*$/.test(filename)) {
$(uploadForm).find(".file-upload").removeClass('active');
 $(uploadForm).find("#noFile").text("No file chosen...");
}
else {
 $(uploadForm).find(".file-upload").addClass('active');
 $(uploadForm).find("#noFile").text(filename.replace("C:\\fakepath\\",     
""));
 }
});
});
</script>

只需更改每个新输入的名称（attach8）。完成！

多文件上传时的样式css按钮

1 个答案: