我有xmlhttprequest文件上传。问题是该函数不止一次运行。 这是我触发fileUpload函数的部分:
$('.edit-pic').click(function() {
if ($('#btnSubmit').val() == 'Edit') {
return false;
}
else if ($(this).prop('id') == 'profilePic') {
uploadFile('profilePic');
}
else if ($(this).prop('id') == 'content') {
uploadFile('coverPic');
}
});
这是fileUpload函数:
function uploadFile(imageType) {
$('#the-file').click();
$('#the-file').change(function() {
var fileInput = $('#the-file');
var uri = 'upload.php';
var formData = new FormData();
var file = fileInput[0].files[0];
var xhr = new XMLHttpRequest();
formData.append("the-file", file);
xhr.upload.addEventListener('progress', onprogressHandler, false);
xhr.open('POST', uri, true);
xhr.setRequestHeader('X-File-Name', file.name + '&' + imageType);
xhr.onload = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.response);
if (response.imageType == 'coverPic') {
$('#content').css('background-image', 'url("' + response.tempUrl + '")'); }
else if (response.imageType == 'profilePic') {
$('#profilePic').prop('src', response.tempUrl);
}
}
};
function onprogressHandler(e) {
var percent = e.loaded / e.total * 100;
console.log('Upload progress: ' + percent + '%');
}
xhr.send(formData);
});
}
;
这就是我在php文件中的内容:
if (!file_exists($_FILES["the-file"]["name"])) {
$fileName = $_SERVER['HTTP_X_FILE_NAME'];
$fileType = $_FILES['the-file']['type'];
$fileContent = file_get_contents($_FILES['the-file']['tmp_name']);
$dataUrl = 'data:' . $fileType . ';base64,' . base64_encode($fileContent);
$tempUrl = "";
list($fileName, $imageType) = explode('&', $fileName);
if ($imageType == 'profilePic') {
move_uploaded_file($_FILES['the-file']['tmp_name'], "temp/profile/" . $_FILES['the-file']['name']);
$tempUrl = "temp/profile/" . $_FILES['the-file']['name'];
} else if ($imageType == 'coverPic') {
move_uploaded_file($_FILES['the-file']['tmp_name'], "temp/cover/" . $_FILES['the-file']['name']);
$tempUrl = "temp/cover/" . $_FILES['the-file']['name'];
}
$json = json_encode(array(
'name' => $fileName,
'type' => $fileType,
'dataUrl' => $dataUrl,
'tempUrl' => $tempUrl,
'imageType' => $imageType
));
echo $json;
我的问题是,每次上传新图片时,该功能都会在我点击文件上传时运行多次。如果我点击它4次进行测试,它会运行4次,并将两个配置文件的img src和封面图片更改为我选择的最后一张图片。我尝试返回false,event.PreventDefault等。此时我对任何建议持开放态度。 抱歉格式,这里有很多代码。
答案 0 :(得分:0)
您是否尝试将事件作为参数传递给click()?
$('.edit-pic').click(function( e ) {
e.preventDefault();
if ($('#btnSubmit').val() == 'Edit') {
return false;
}
else if ($(this).prop('id') == 'profilePic') {
uploadFile('profilePic');
}
else if ($(this).prop('id') == 'content') {
uploadFile('coverPic');
}
});