Javascript xmlhttprequest ajax php多次运行

我有xmlhttprequest文件上传。问题是函数运行了不止一次。 这是我启动文件上传功能的部分：

$('.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');
                                }
                            });

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);
                                });
                            }
                            ;

以下是文件上传功能：

$('.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');
                                }
                            });

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等。在这一点上，我愿意接受任何建议。

---

很抱歉使用了这种格式，这里有很多代码。

您是否尝试将事件作为参数传递给click（）

---

这不仅仅是event.PreventDefault（）。事件名称是函数的名称，即在

function（evt）{}

中是

evt

；它是

evt.preventDefault（）

（p非大写；也许您应该使用

evt.stopPropagation（）

）