將數據值從HTML傳遞給JS

我正在顯示多個表單並需要傳遞一個值，以便我知道哪個上傳的項目屬於哪個表單。將數據值從HTML傳遞給JS

我需要從我的HTML表單傳遞一個數據值到一個jQuery腳本。

我有下面的代碼 - 你可以看到我已經列爲data-uploadValue="some-value"以及在腳本{{ data-uploadValue}}

function uploadFile() { 
 
    var file = _("file1").files[0]; 
 
    // alert(file.name+" | "+file.size+" | "+file.type); 
 
    var formdata = new FormData(); 
 
    formdata.append("file1", file); 
 
    var ajax = new XMLHttpRequest(); 
 
    ajax.upload.addEventListener("progress", progressHandler, false); 
 
    ajax.addEventListener("load", completeHandler, false); 
 
    ajax.addEventListener("error", errorHandler, false); 
 
    ajax.addEventListener("abort", abortHandler, false); 
 
    ajax.open("POST", "/upload/{{ data-uploadValue }}"); // 
 
    ajax.send(formdata); 
 
}

<form id="upload_form" enctype="multipart/form-data" method="post"> 
 
    <div class="file has-name is-fullwidth is-info"> 
 
    <label class="file-label"> 
 
     <input class="file-input" type="file" name="file1" id="file1" value="test_value" data-uploadValue="some-value" onchange="uploadFile()"><br> 
 
     <span class="file-cta"> 
 
      <span class="file-icon"> 
 
      <i class="fa fa-upload"></i> 
 
      </span> 
 
      <span class="file-label"> 
 
      Choose a file… 
 
      </span> 
 
     </span> 
 
     <span class="file-name"> 
 
      <div style="color:red;" id="status"></div> 
 
      Supported file types: .png, .jpg, .jpeg and .gif 
 
     </span> 
 
     </label> 
 
    <div style="display:none"> 
 
     <p id="loaded_n_total"></p> 
 
     <progress id="progressBar" class="progress" value="0" max="100" style="width:300px;"></progress></div> 
 
    </div> 
 
</form>

數據值我怎樣才能做到這一點？

來源

2017-09-25 Adders

您可以通過使用$('.file-input').data('uploadValue');或$('.file-input').attr('data-uploadValue');

編輯得到一個HTML元素的數據屬性

你可以試試元素傳遞給函數this然後在功能使用.getAttribute("data-uploadValue")。這會給你調用該函數的元素的數據屬性。

function uploadFile(element) { 
 
    var file = _("file1").files[0]; 
 
    // alert(file.name+" | "+file.size+" | "+file.type); 
 
    var formdata = new FormData(); 
 
    formdata.append("file1", file); 
 
    var ajax = new XMLHttpRequest(); 
 
    var uploadValue = element.getAttribute("data-uploadValue"); 
 
    ajax.upload.addEventListener("progress", progressHandler, false); 
 
    ajax.addEventListener("load", completeHandler, false); 
 
    ajax.addEventListener("error", errorHandler, false); 
 
    ajax.addEventListener("abort", abortHandler, false); 
 
    ajax.open("POST", "/upload/" + uploadValue); // 
 
    ajax.send(formdata); 
 
}

<form id="upload_form" enctype="multipart/form-data" method="post"> 
 
    <div class="file has-name is-fullwidth is-info"> 
 
    <label class="file-label"> 
 
     <input class="file-input" type="file" name="file1" id="file1" value="test_value" data-uploadValue="some-value" onchange="uploadFile(this)"><br> 
 
     <span class="file-cta"> 
 
      <span class="file-icon"> 
 
      <i class="fa fa-upload"></i> 
 
      </span> 
 
      <span class="file-label"> 
 
      Choose a file… 
 
      </span> 
 
     </span> 
 
     <span class="file-name"> 
 
      <div style="color:red;" id="status"></div> 
 
      Supported file types: .png, .jpg, .jpeg and .gif 
 
     </span> 
 
     </label> 
 
    <div style="display:none"> 
 
     <p id="loaded_n_total"></p> 
 
     <progress id="progressBar" class="progress" value="0" max="100" style="width:300px;"></progress></div> 
 
    </div> 
 
</form>

來源

2017-09-25 19:57:08 WizardCoder

感謝。它似乎只適用於其中一種形式 - 正如我所說的，我有多個，都是一樣的，只是具有不同的數據值 – Adders

@Adders我更新了我的答案。 – WizardCoder

完美地工作。謝謝 - 現在只需要瞭解它！ :) – Adders

使用jQuery它是超級容易。

你可以使用任何選擇器來選擇一些東西，你可以調用$(".class").data()方法。

$("[data-attr]").data() => returns js object

筆記，您可以使用特定的屬性來選擇爲好，省略括號。

$("[data-action=getData]").data() => returns js object

<div id="id" data-key="value"></div>

$("#id").data().key => returns the value of the data-*

請參考this article如果你有使用香草的Javascript（即沒有jQuery的）

來源

2017-09-25 20:50:52 Christian4423

將數據值從HTML傳遞給JS

回答

相關問題