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); }

包含的数据值

＆＃13;

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

＆＃13;

[xdebug]
zend_extension="/Applications/XAMPP/xamppfiles/lib/php/extensions/no-debug-non-zts-20131226/xdebug.so"
;change no-debug-non-zts-20131226 for your folder
;debug remote
xdebug.remote_enable=on
xdebug.remote_port =9000
xdebug.remote_enable = 1

＆＃13;

我怎样才能做到这一点？

Answer 1

您可以使用$('.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>

Answer 2

使用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-*

如果你必须使用Vanilla Javascript（即没有jQuery），请参考this article

将数据值从HTML传递到JS

2 个答案: