我能'；无法从输入文件jQuery HTML获取数据img id，我做错了什么？_Jquery_Html

我能'；无法从输入文件jQuery HTML获取数据img id，我做错了什么？

jquery html

我能'；无法从输入文件jQuery HTML获取数据img id，我做错了什么？,jquery,html,Jquery,Html,我尝试过不同的方法，但我总是得到第一个值 HTML camera\u alt 摄像机高度摄像机高度摄像机高度摄像机高度 jQuery $(function(){ $("#imgupload").on('click', function(ev){ ev.preventDefault(); var imgid = $(this).data('img-id'); console.log(imgid); var imag

我尝试过不同的方法，但我总是得到第一个值

HTML

camera\u alt
摄像机高度
摄像机高度
摄像机高度
摄像机高度

jQuery

$(function(){
      $("#imgupload").on('click', function(ev){
        ev.preventDefault();
        var imgid = $(this).data('img-id');
        console.log(imgid);
        var image = $('#imgupload')[0].files[0];
        var uid = <?php echo $_GET['user']; ?>;
        var fd = new FormData();
        fd.append('image',image);
        fd.append('uid', uid);
        fd.append('imgid', imgid);
            $.ajax({
                type: "POST",
                url: "php/usrIMG.php",
                data: fd,
                processData: false,
                contentType: false,
                success: function (data) {

                }
            });
      });
    });

$（函数（）{
$（“#imgupload”）。在（'click'，函数（ev）{
ev.preventDefault（）；
var imgid=$（this）.data（'img-id'）；
console.log（imgid）；
var image=$（'#imgupload'）[0]。文件[0]；
变量uid=；
var fd=新FormData（）；
fd.append（'image'，image）；
fd.append（'uid'，uid）；
fd.append（'imgid'，imgid）；
$.ajax({
类型：“POST”，
url:“php/usrIMG.php”，
数据：fd，
processData:false，
contentType:false，
成功：功能（数据）{
}
});
});
});

控制台日志在每次单击时打印0

试试这种方法：

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Roboto+Mono:400,500|Material+Icons" />
      <title>Ilan's Test</title>
   </head>
   <body>
      Icon for Image ID #0:
      <br>
      <i for="imgupload" data-img-id="0" class="material-icons imguploadicon">camera_alt</i>
      <hr>
      Icon for Image ID #1:
      <br>
      <i for="imgupload" data-img-id="1" class="material-icons imguploadicon">camera_alt</i>
      <hr>
      Icon for Image ID #2:
      <br>
      <i for="imgupload" data-img-id="2" class="material-icons imguploadicon">camera_alt</i>
      <hr>
      <input id="imgupload" type="file" accept="image/*" style="display: none;">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
      <script>
         $(".imguploadicon").on('click', function(){
            var readyflag = true;
                if (readyflag == true){
                var uid = <?php echo $_GET['user']; ?>;
                var imgid = $(this).data('img-id');
                console.log('the image id for this click is: ' + imgid);
                 $('#imgupload').click();
                 $("#imgupload").change(function (){
                   var filename = $(this).val();
                   console.log('the file name for the upload is: ' + filename + ' (img id: ' + imgid + ')');
                    var fd = new FormData();
                    fd.append('image',image);
                    fd.append('uid', uid);
                    fd.append('imgid', imgid);
                    $.ajax({
                        type: "POST",
                        url: "php/usrIMG.php",
                        data: fd,
                        processData: false,
                        contentType: false,
                        success: function (data) {
                            console.log("data was uploaded!");
                            readyflag = false;
                            imgid = '';
                            image = '';
                        }
                    });
                });
             }
         });

      </script>
   </body>
</html>


宜兰试验
图像ID#0的图标：


摄像机高度

图像ID#1的图标：


摄像机高度

图像ID#2的图标：


摄像机高度

$（.imguploadicon”）。在（'click'，function（）上{
var readyflag=true；
if（readyflag==true）{
变量uid=；
var imgid=$（this）.data（'img-id'）；
log（'此单击的图像id为：'+imgid）；
$（'imgupload'）。单击（）；
$（“#imgupload”）。更改（函数（）{
var filename=$（this.val（）；
log（'上载的文件名为：'+filename+'（img id:'+imgid+'））；
var fd=新FormData（）；
fd.append（'image'，image）；
fd.append（'uid'，uid）；
fd.append（'imgid'，imgid）；
$.ajax({
类型：“POST”，
url:“php/usrIMG.php”，
数据：fd，
processData:false，
contentType:false，
成功：功能（数据）{
log（“数据已上载！”）；
readyflag=false；
imgid=''；
图像=''；
}
});
});
}
});

与其试图从输入中获取它，不如调用调用触发器类（在本例中为图标）的函数，并将图像id传递给它；您可以在不久之后调用click来上传表单（如上面的示例所示）；同样，它是概念性的（和一种不同的方法），但效果相当好

--在我们已经获得img id后，修改代码以等待文件字段的更改；一旦更改了文件字段输入（选择了文件），AJAX将发布formdata以上载所创建表单的内容。我还添加了布尔真/假检查，以确保在清除下一幅图像的数据时，不会触发空白数据的假阳性上传；当您尝试执行脚本时，您将了解我的意思；试试看。

您无法获得id，因为您已经隐藏了元素。尝试删除一个显示：无并选中

`https://jsfiddle.net/xpvt214o/436281/`

ID必须是unique@j08691id是唯一的，但是jquery$（this）.data（'img-id'）；这将始终获取第一个id，即0，而不是您可以使用以下内容的id：1。分配类并使用$（“.classname”）附加单击事件。2.将所有输入放在一个div中并使用$（“#DIVID”）。查找（“输入”）。在（“单击”）上尝试

$（this.attr（'data-img-id'）

您使用ID

imgupload

五次。那有多独特？太棒了！rock on现在有一个问题，因为ajax不支持post jquery。on（'click'）也不支持。on（'change'）是不是与您在问题中提出的代码片段相同？请用您最新的代码更新它。在（'click'）上，它不显示选择图像，只运行php文件。在（'change'）上，它显示选择图像，但ajax没有在php上发布php文件。修改后的代码段，请尝试。

`https://jsfiddle.net/xpvt214o/436281/`