使用 php 上传文件时未显示引导模式中的加载程序

Question

我有一个模式，用户可以通过它上传 PDF 文件。模态的代码是：

  <div class="modal fade" id="modalUploadFile" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel"><i class="fa fa-file fa-lg"></i> Nieuw document</h4>
          </div>
          <div class="modal-body">
            <form action="functions/upload_pdf.php" method="post" enctype="multipart/form-data" target="uploadTarget" onsubmit="startUpload();">
              <div class="col-md-6">
                <div class="form-group" id="uploadForm" style="visibility: visible;">
                  <label for="recipient-name" class="control-label">Bestand:</label>
                  <input type="file" name="fileToUpload" id="fileToUpload">
                  <!-- <input type="hidden" name="fileLocation" id="fileLocation"> -->
                  <br>
                  <input class="btn btn-success" type="submit" value="Document uploaden" name="submit">
                </div>
              </div>
              <div class="col-md-6">
                <div id="uploadProcess" class="text-center" style="width: 100%; visibility: hidden;"><img src="images/loaders/loader_1.gif" /></div>
              </div>
              <iframe id="uploadTarget" name="uploadTarget" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
            </form>
          </div>
          <div class="modal-footer">
            <!-- <button type="submit" class="btn btn-success" onclick="insertMsgProc();">Plaats bericht</button> -->
          </div>
        </div>
      </div>
  </div>

startUpload(); 函数：

function startUpload(){
    $('#uploadProcess').style.visibility = 'visible';
    $('#uploadForm').style.visibility = 'hidden';

    return true;
}

stopUpload(); 函数：

function stopUpload(success){

    var result = '';

    if (success == 1){
       result = '<span class="sucess-msg">Document succesvol ge-upload.<\/span><br/><br/>';
    } else {
       result = '<span class="error-msg">Er is iets mis gegaan tijdens het uploaden.<\/span><br/><br/>';
    }

    $('#uploadProcess').style.visibility = 'hidden';
    $('#uploadForm').innerHTML = result;
    $('#uploadForm').style.visibility = 'visible';      

    return true;   
}

php 代码：

<?php
session_start();
$target_dir = $_SESSION['upload_dir'];
$target_file = "C:/xampp/htdocs" . $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);

// Allow only PDF
if($imageFileType != "pdf") {
    //echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    //echo "Sorry, your file was not uploaded.";
} else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        //header('Location: ../portal.php');
        $success = 1;
    } 
}
?>
<script src="../production/products/contractmonitor/js/contractmonitor.js" type="text/javascript">
    stopUpload(<?php echo $success; ?>);
</script>

执行代码时，正在上传所选文件，但不显示 loader_1.gif。按钮也没有被释放，所以看起来代码在某个地方没有继续。

非常感谢任何帮助。

Answer 1

让我简单的让你理解使用jquery上传的逻辑

  <div id="loadergif"><img src="<?php echo ASSETS_URL; ?>admin/images/ajax-loader.gif" height="40" width="40" id="loadergif"/></div>

<script>
        $(document).ready(function(){
            $("#loadergif").hide();
            $('#upload_form').on('submit',function(){               
                if($('#upload_form').valid()){
                    $("#form-container").hide();
                    $("#loadergif").show(); 
                }
            });
</script>

#upload_form 是您的上传表单。

Answer 2

所以我现在一切正常。在此我用代码发布我的整体解决方案。可能对其他人有帮助：

html 表单：

  <div class="modal fade" id="modalUploadFile" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel"><i class="fa fa-file fa-lg"></i> Nieuw document</h4>
          </div>
          <div class="modal-body">
            <form action="functions/upload_pdf.php" method="post" enctype="multipart/form-data" target="uploadTarget" onsubmit="startUpload(); this.blur();">
              <div class="col-md-6">

                <input type="hidden" name="fileToDelete" id="fileToDelete">

                <div class="form-group" id="uploadForm" style="">
                  <label for="recipient-name" class="control-label">Bestand:</label>
                  <input type="file" name="fileToUpload" id="fileToUpload" style="width: 100%;">
                  <hr>
                  <input class="btn btn-success" id="btn-upload-doc" type="submit" value="Document uploaden" name="submit">'
                </div>
              </div>
              <div class="col-md-6">
                <div id="uploadProcess" class="text-center" style="width: 100%;"><img src="images/loaders/loader_1.gif" /></div>
              </div>
              <iframe id="uploadTarget" name="uploadTarget" src="#" style="width:0;height:0;border:0px solid #fff; position: absolute;"></iframe>
            </form>
          </div>
        </div>
      </div>
  </div>

在上面的表单中，我使用<iframe></iframe> 设置为表单目标，因此它保持在同一页面上（在我的情况下是模态）

javascript 代码：

function startUpload() {
    $('#uploadForm').hide();
    $('#uploadProcess').show();

    return true;
}

function stopUpload(success){

    var result = '';

    if (success == 1) {
       result = '<span class="label label-success" style="font-size: 13px;">Upload succesvol</span>';
    } else {
       result = '<span class="label label-warning" style="font-size: 13px;">Er is iets mis gegaan tijdens de upload</span>';
    }

    $('#uploadProcess').hide();
    $('#uploadForm').html(result);
    $('#uploadForm').show();


    return true;   
}

最后是php 代码：

<?php
session_start();
$target_dir = $_SESSION['upload_dir'];
$target_file = "C:/xampp/htdocs" . $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);

// Allow only PDF
if($imageFileType != "pdf") {
    //echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    //echo "Sorry, your file was not uploaded.";
} else {
    if (@move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        //header('Location: ../portal.php');
        $success = 1;
    } 
}
sleep(1);
?>
<script type="text/javascript">
    window.top.stopUpload(<?php echo $success; ?>);
</script>

我将window.top.window.stopUpload(<?php echo $success; ?>); 更改为window.top.stopUpload(<?php echo $success; ?>);，因为我的php文件位于较低的目录中。

感谢大家的帮助。

Answer 3

当您单击按钮时，<div id="uploadProcess" class="text-center" style="width: 100%; visibility: hidden;"><img src="images/loaders/loader_1.gif" /></div> 是否更改为 <div id="uploadProcess" class="text-center" style="width: 100%; visibility: visible;"><img src="images/loaders/loader_1.gif" /></div> ？