Question

我正在使用以下脚本来处理文件上传进度条。除了php脚本test2.php中的echo命令外，一切正常。

上传文件后，我会使用echo2.idp中的粗体标签显示“File Uploaded”，打印输出将显示“File Uploaded”以及粗体标记，而不是使其变为粗体。

如果我直接访问该页面，那么test2.php没有任何问题，那么该文本将以粗体显示。

$(function() {
  $('#btn').click(function() {
    $('.myprogress').css('width', '0');
    $('.msg').text('');
    var filename = $('#filename').val();
    var myfile = $('#myfile').val();
    var formData = new FormData();
    formData.append('myfile', $('#myfile')[0].files[0]);
    formData.append('filename', filename);
    $('#btn').attr('disabled', 'disabled');
    $('.msg').text('Uploading in progress...');
    $.ajax({
      url: 'test2.php',
      data: formData,
      processData: false,
      contentType: false,
      type: 'POST',
      // this part is progress bar
      xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
          if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            percentComplete = parseInt(percentComplete * 100);
            $('.myprogress').text(percentComplete + '%');
            $('.myprogress').css('width', percentComplete + '%');
            $('.myProgress').css("background-color", "#0078ae");
          }
        }, false);
        return xhr;
      },
      success: function(data) {
        $('.msg').text(data);
        $('#btn').removeAttr('disabled');
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform1" method="post" enctype="multipart/form-data">
  <div class="form-group">
    <label>Rename Firmware File <i>(optional)</i> </label>
    <input class="form-control" type="text" id="filename" />
  </div>
  <div class="form-group">
    <input type="file" id="myfile" />
  </div>
  <div class="form-group">
    <div class="progress">
      <div class="progress-bar progress-bar-success myprogress" role="progressbar" style="width:0%;">0%</div>
    </div>
    <div class="msg"></div>
  </div>
  <input type="button" id="btn" class="ui-button" value="Upload" />
</form>

Answer 1

在成功处理程序中，您正在调用.text来设置元素上的文本，但这基本上会转义HTML。

相反，请尝试.html（请注意，您要发送已清理过的数据！）

success: function(data) {
    $('.msg').html(data);
    $('#btn').removeAttr('disabled');
}

Answer 2

尝试将以下传递的设置对象添加到$ .ajax（）：

dataType: "html"

根据jQuery API文档，dataType设置指定＆＃34; ...您希望从服务器＆＃34;中恢复的数据类型，并将其设置为html＆＃34;返回HTML作为纯文本;包含的脚本标记在插入DOM时会被评估。＆＃34;

使用jquery脚本时无法在PHP中调用html标记

2 个答案: