[英]Ajax call from click event issue
查看下面的 HTML 代码:
<div class="user-avatar-wrapper">
<img class="profile-pic" src="/placeholder.png" alt="" />
<div class="upload-button"></div>
<input class="file-upload" type="file" accept="image/*"/>
</div>
现在我想触发文件上传并在点击.upload-button
时调用 ajax 。
这就是我在 jQuery 中尝试的方法,
$(document).on('click', '.upload-button', function(e) {
e.preventDefault();
//$(".file-upload").click();
$(this).next().trigger('click', function() {
var $data = { 'title': 'Title', 'file': 'myfile' };
$.ajax({
type: 'POST',
url: 'upload.php',
data: $data,
success: function(response) {
},
error: function(response) {},
});
});
});
但是,这段代码对我不起作用。 这意味着它没有发送 ajax 请求。
希望有人可以帮助我。
我认为您将触发器与事件处理程序混为一谈。
当您单击 div 时,您应该触发对文件输入的单击,但您不会在那里传递回调。
您想为文件输入设置更改处理程序,以便在使用change
事件处理程序选择文件时发出 ajax 请求。
$(document).on('change', '.file-upload', function(e){ var data = new FormData(); data.append('title', 'Title'); data.append('file', this.files[0]); $.ajax({ type: 'POST', url: 'upload.php', data: data, processData: false, contentType: false, success: function(response) { }, error: function(response) {}, }); }); $(document).on('click', '.upload-button', function(e) { $(".file-upload").click(); });
.upload-button{ cursor:pointer; }.file-upload{ opacity:0.01 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="user-avatar-wrapper"> <img class="profile-pic" src="/placeholder.png" alt="" /> <div class="upload-button">↑</div> <input class="file-upload" type="file" accept="image/*"/> </div>
您的 div 为空且不存在运行 function 尝试以下代码:
<div class="upload-button"> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.