我在做项目中遇到了一个上传两个身份证头像得问题,当我点击得时候居然发现上一个点击事件中得函数触发了。后来才注意到由于我之前点击了得,所以第一个点击事件之后得函数如果在下一个点击事件中存在得话,这样就冲突了,所以我们需要清楚点击事件即可,我写的代码如下:以及为了防止自己忘记得笔记:
注意一下点击事件,当下一个点击事件中如果包含了上一个点击中相同的事件,那么上一个事件还是会出发的,因为上一个点击事件已经点击过了,后来的函数还是会触发,比如包含了一个第二个点击事件中相同的事件,其实本质还是因为函数的逻辑。
工作代码:
$(function() {
$('.picFrist').click(function() {
$('.big_box').toggle();
});
$('.picLast').click(function() {
$('.big_box').toggle();
});
$('.del').click(function() {
$('.big_box').toggle();
})
$('.up_top').click(function() {
console.log(789);
$('.top_id_pic_one, .top_id_pic_two').toggle();
console.log(456);
$('.big_box').toggle();
$('.choose_toggleBox').click(function() {
$('.choose_toggleBox').off('click')
$('#choose_file').trigger("click");
})
$('.choose_pic').click(function() {
$('.choose_pic').off('click')
$('#choose_file_capture').trigger("click");
})
$('#choose_file').change(function() {
let file = $("#choose_file")[0].files[0];
console.log($("#choose_file")[0]);
let formDatas = new FormData();
formDatas.append('file', file);
console.log(file)
$.ajax({
url: 'http://mobile.btcnews.online/index.php/api/Headsculpture/get_path',
type: 'post',
processData: false,
contentType: false,
data: formDatas,
dataType: "json",
success: function(data, id) {
console.log(data, id)
Api.doPost("Headsculpture/upload_Headsculpture", { path: data.url, id: '1' }, function(res) {
console.log(data.url)
console.log(res)
let img_url = data.url;
$('.up_top').css('background', `url(http://mobile.btcnews.online/public${img_url})`)
})
}
})
})
$('#choose_file_capture').change(function() {
let file = $("#choose_file_capture")[0].files[0];
console.log($("#choose_file_capture")[0]);
let formDatas = new FormData();
formDatas.append('file', file);
console.log(file)
$.ajax({
url: 'http://mobile.btcnews.online/index.php/api/Headsculpture/get_path',
type: 'post',
processData: false,
contentType: false,
data: formDatas,
dataType: "json",
success: function(data, id) {
console.log(data, id)
Api.doPost("Headsculpture/upload_Headsculpture", { path: data.url, id: '1' }, function(res) {
console.log(data.url)
console.log(res)
let img_url = data.url;
$('.up_top').css('background', `url(http://mobile.btcnews.online/public${img_url})`)
})
}
})
})
})
$('.up_down').click(function() {
$('.down_id_pic_one, .down_id_pic_two').toggle();
$('.big_box').toggle();
$('.choose_toggleBox').click(function() {
$('.choose_toggleBox').off('click')
$('#choose_file_2').trigger("click");
})
$('.choose_pic').click(function() {
$('.choose_pic').off('click')
$('#choose_file_capture_2').trigger("click");
})
$('#choose_file_2').change(function() {
let file = $("#choose_file_2")[0].files[0];
console.log($("#choose_file_2")[0]);
let formDatas = new FormData();
formDatas.append('file', file);
console.log(file)
$.ajax({
url: 'http://mobile.btcnews.online/index.php/api/Headsculpture/get_path',
type: 'post',
processData: false,
contentType: false,
data: formDatas,
dataType: "json",
success: function(data, id) {
console.log(data, id)
Api.doPost("Headsculpture/upload_Headsculpture", { path: data.url, id: '1' }, function(res) {
console.log(data.url)
console.log(res)
let img_url = data.url;
$('.up_down').css('background', `url(http://mobile.btcnews.online/public${img_url})`)
})
}
})
})
$('#choose_file_capture_2').change(function() {
let file = $("#choose_file_capture_2")[0].files[0];
console.log($("#choose_file_capture_2")[0]);
let formDatas = new FormData();
formDatas.append('file', file);
console.log(file)
$.ajax({
url: 'http://mobile.btcnews.online/index.php/api/Headsculpture/get_path',
type: 'post',
processData: false,
contentType: false,
data: formDatas,
dataType: "json",
success: function(data, id) {
console.log(data, id)
Api.doPost("Headsculpture/upload_Headsculpture", { path: data.url, id: '1' }, function(res) {
console.log(data.url)
console.log(res)
let img_url = data.url;
$('.up_down').css('background', `url(http://mobile.btcnews.online/public${img_url})`)
})
}
})
})
})
function getUrl(input_file) {
var src;
var oFReader = new FileReader();
var file = input_file;
oFReader.readAsDataURL(file);
oFReader.onloadend = function(oFRevent) {
src = oFRevent.target.result;
return src;
}
}
$('.exit').on('click', function() {
history.back(-1);
})
})