我尝试了不同的方法，但我总是得到第一个值
HTML
<i for="imgupload" class="material-icons imageUploadIcon">camera_alt</i>
<input id="imgupload" type="file" data-img-id="0" accept="image/*" style="display: none;">
<i for="imgupload" class="material-icons imageUploadIcon">camera_alt</i>
<input id="imgupload" type="file" data-img-id="1" accept="image/*" style="display: none;">
<i for="imgupload" class="material-icons imageUploadIcon">camera_alt</i>
<input id="imgupload" type="file" data-img-id="2" accept="image/*" style="display: none;">
<i for="imgupload" class="material-icons imageUploadIcon">camera_alt</i>
<input id="imgupload" type="file" data-img-id="3" accept="image/*" style="display: none;">
<i for="imgupload" class="material-icons imageUploadIcon">camera_alt</i>
<input id="imgupload" type="file" data-img-id="4" accept="image/*" style="display: none;">
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) {
}
});
});
});
控制台日志在每次点击时打印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传递到那里；您可以在不久后调用点击上传表单(如上面的示例所示(；同样，它是概念性的(也是一种不同的方法(，但效果很好。
--在我们已经得到img id之后，修改了等待文件字段更改的代码；一旦文件字段输入被更改(文件被选中(，AJAX将发布表单数据来上传创建的表单的内容。我还添加了一个布尔真/假检查，以确保当我们清除下一个图像的数据时，它不会触发空白数据的假阳性上传；当你试图执行脚本时，你会明白我的意思；试试看。
您没有得到id，因为您已经隐藏了元素。尝试删除一个显示：none并选中。
`https://jsfiddle.net/xpvt214o/436281/`