HTMLからJSへのデータ値の受け渡し

Question

複数のフォームが表示されているので、アップロードされたアイテムがどのフォームに属しているかを知るために値を渡す必要があります。

私のHTMLフォームからjqueryスクリプトにデータ値を渡す必要があります。

私は、次のコードを持っている - あなたは私が{{ 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>

どのように私はこれを達成することができますようdata-uploadValue="some-value"だけでなく、スクリプト内に含ましたデータ値を見ることができますか？

Answer 1

あなたはthisと機能に要素を渡して試してみて、その関数の使用.getAttribute("data-uploadValue")にすることができます$('.file-input').data('uploadValue');または$('.file-input').attr('data-uploadValue');

EDIT

を使用してhtml要素のデータ属性を取得することができます。それはあなたに関数を呼び出した要素のデータ属性を与えるでしょう。 jQueryのを使用して

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>

Answer 2

それは超簡単です。

任意のセレクタを使用して何かを選択することができます。$(".class").data()メソッドを呼び出します。

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

ノートには、括弧を省略、同様のセレクタのための特定の属性を使用することができます。あなたはバニラJavascriptを（すなわち、無jQueryの）