Question

我是javascript的新手，在过去几天我堆叠，我自己找不到解决方案。我有一个表从mysql中拖动一些数据并在我的网站上显示它们。该表由三个列（＆＃39; id＆＃39;，Name，Surname）组成。我添加了另一个由按钮组成的柱子。该表看起来像这样：

该表的源代码如下：

function user_clients_table_storagefolder() {

   $con = mysql_connect("localhost","root",'');
   if(!$con){

   die("Cannot Connect" . mysql_error());

   }
    mysql_select_db("client_app",$con);
    $get_user_clients = "SELECT `ID`,`Name`,`SurName`,`storagefolder` FROM `clients`  ";
   $clients = mysql_query($get_user_clients,$con);

   echo "<table class=table table-condensed>
   <thead>
   <tr>   
   <th>ID</th>
   <th>Name</th>
   <th>SurName</th>
   <th>Recipient</th>
   </tr>
   </thead>";
   while($record = mysql_fetch_array($clients)){
    echo "<action=pushnotification.php method=post>";
    echo "<tr>";
    echo "<td>".$record['ID']." </td>";
    echo "<td>".$record['Name']." </td>";
    echo "<td>".$record['SurName']." </td>";
    echo "<td>"."<button   value=".$record['Name']." id=contact>Upload File</button>"." </td>";
    echo "</tr>";

     }

echo "</table>";     
mysql_close();

正如您在源代码中看到的，我为每个按钮提供了不同的值（例如，第一个按钮的值为= Mike）

当我点击一个按钮时，会出现一个上传表格，要求用户上传文件：表格如下：

以下源代码对此进行了详细介绍：

1＃表示不同的源代码：

<script>

$(function() {

  // contact form animations
  $('#contact').click(function() {
    $('#contactForm').fadeToggle();
  })
  $(document).mouseup(function (e) {
    var container = $("#contactForm");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.fadeOut();
    }
  });

});

</script>

2＃表单内容的源代码

<div id="contactForm" >
                  <p><h4><font color="white"><i>First Choose the clients and then the file which will be uploaded in order to proced</i></font></h4></2>
                  <p>&nbsp;</p>
                 <input type="file" class="upload" name="onstorage" id="upload_file" size="50" name="icon" onchange="loadFile(this);" >
                  <hr>
                  <div id="myProgress">
                      <div id="myBar"></div>
                  </div>
                  </div>

loadFile函数的源代码如下：

function loadFile(input) {

        //Step 1 : Defining element to show the progress
        var elem = document.getElementById("myBar");    
        var filetoUpload=input.files[0];

        //Step 2 : Initializing the reference of database with the filename
        var storageRef = firebase.storage().ref(`files/${filetoUpload.name}`);


        //Step 3 : Uploading file
         var task = storageRef.put(filetoUpload);

         //Step 4 : Database Storage Reference


        //Step 4 : sata_changed Event
         // state_changed events occures when file is getting uploaded 
         //(Note : when we want to show the progress what's the uploading status that time we will use this function.)
         task.on('state_changed',
            function progress(snapshot){
                var percentage = snapshot.bytesTransferred / snapshot.totalBytes * 100;
                //uploader.value = percentage;
                 elem.style.width = parseInt(percentage) + '%'; 
                 elem.innerHTML=parseInt(percentage)+'%';
            },
            function error(err){

            },
            function complete(){
                var downloadURL = task.snapshot.downloadURL;
                // this is the url i have to store in the Database

                 var rootRef = firebase.database().ref().child('files');

                rootRef.push({
                  url:downloadURL,
                  fullPath:(`files/${filetoUpload.name}`),
                  created: `${new Date().toISOString().split('T')[0]}`
                   });



            }
        ); 
}

你可以看到我每次选择一个文件时都会调用一个loadfile函数并传递我上传的输入。我想要做的是传递我点击的按钮的值与输入。这可能吗？有人可以帮助我吗？

表示感谢

Answer 1

向loadFile函数发送第二个参数。 F.E：

loadFile(this, document.getElementById('ButtonId'))

或

loadFile(this, document.getElementById('ButtonId').value)

第二个示例发送值，第一个发送DOM对象。

动态执行：

如果你有多个按钮添加一个onClick eventListener并在onClick事件发生时为它们添加一个id，那么你可以动态地使用这个例子。

<button class="buttonlistener" onClick="this.setAttribute('id', 'touched');" value"whatever">

回到loadFile调用：

loadFile(this, document.getElementById('touched').value)

Answer 2

你的第二个剧本

<script>
var contactName; //prepare var to save contact name/ PLACE outside document ready
$(function() { //document ready begin
// contact form animations
// $('#contact').click(function() { wrong. id is spesific. class is general. dont ever use id on multiple element. you can use class instead.
$('button[id="contact"]').click(function() {//selector to get "ALL" button with id=contact . if you use $('#contact') , only first element of id=contact can be triggered.
    contactName = $(this).val(); //set var contactName to value of the pressed button
    $('#contactForm').fadeToggle();
});
...
}); //closed document ready
</script>

你的第四个剧本

 ...
function complete(){
    var downloadURL = task.snapshot.downloadURL;
    // this is the url i have to store in the Database

     var rootRef = firebase.database().ref().child('files');

    rootRef.push({
      url:downloadURL,
      name:contactName, //send contact name here.
      fullPath:(`files/${filetoUpload.name}`),
      created: `${new Date().toISOString().split('T')[0]}`
       });



}
...

在javascript函数中传递按钮值和上传文件

2 个答案: