html:
<img id="uploadImage" onclick='uploadImageFunction()' src="path_to_image.jpg" alt="Upload Image">
jquery:
function uploadImageFunction() {
var fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.onchange = function() {
// 处理用户选择的文件,例如读取文件内容并发送到服务器
var file = fileInput.files[0];
// ... 处理文件 ...
//验证文件格式
var allowedExtensions = /(\.png|\.jpg|\.jpeg|\.gif)$/i; // 定义允许的扩展名正则表达式
var formData = new FormData(); // 创建一个 FormData 对象
formData.append('file', file); // 将文件添加到 FormData 对象中
if (!allowedExtensions.exec(file.name)) {
alert('请上传PNG、JPG、JPEG或GIF格式的图片!');
return false; // 如果格式不正确,阻止后续操作
}
// ... 处理文件 ...
$.ajax({
url: '/fileInput', // 服务器端处理文件上传的脚本地址
type: 'POST',
data: formData,
processData: false, // 告诉 jQuery 不要处理发送的数据
contentType: false, // 告诉 jQuery 不要设置内容类型头信息
success: function(data) {
// 上传成功后的回调函数,data 是服务器返回的数据
console.log('上传成功');
console.log(data);
},
error: function(jqXHR, textStatus, errorThrown) {
// 上传失败后的回调函数,jqXHR 是 XMLHttpRequest 对象,textStatus 是请求状态,errorThrown 是异常信息
console.log('上传失败');
console.log(textStatus);
console.log(errorThrown);
}
});
}; fileInput.click(); // 模拟点击,打开文件选择对话框 }