Fine-uploader 无法使用 IE7 读取 iframe 响应答案

【问题标题】：fine-uploader can't read iframe response with IE7Fine-uploader 无法使用 IE7 读取 iframe 响应
【发布时间】：2018-05-01 00:03:05
【问题描述】：

我在服务器端使用 jquery.fineuploader-3.7.0 和 Code igniter 框架。

我的js代码：

$('#manual-fine-uploader').fineUploader({
request                 : { endpoint: 'declaration/uploadfile'},
autoUpload              : false,
template                : '<div class="qq-uploader span12">' +
                          '  <pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
                          '  <div class="qq-upload-button " style="width: auto;">{uploadButtonText}</div>' +
                          '  <span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
                          '  <ul id="qq-upload-list" class="qq-upload-list" style="margin-top:10px; text-align:center;"><li></li></ul>' +
                          '  <ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
                          '</div>',
fileTemplate            : '<li>' +
                          '  <div class="qq-progress-bar"></div>' +
                          '  <span class="qq-upload-spinner"></span>' +
                          '  <span class="qq-upload-finished"></span>' +
                          '  <span class="qq-upload-file"></span>' +
                          '  <span class="qq-upload-size"></span>' +
                          '  <a class="qq-upload-cancel" href="#">{cancelButtonText}</a>' +
                          '  <a class="qq-upload-retry" href="#">{retryButtonText}</a>' +
                          '  <a class="qq-upload-delete" href="#">{deleteButtonText}</a>' +
                          '  <span class="qq-upload-status-text">{statusText}</span>' +
                          '</li>',
failedUploadTextDisplay : {
                            mode             : 'custom',
                            maxChars         : 1500,
                            responseProperty : 'error',
                            enableTooltip    : true
                          },
text                    : {
                            uploadButton : '<color=#2E6E9E><b>Selectionnez le fichier à déposer</b></color>',
                            failUpload   : 'Le chargement a échoué'
                          }  });
 $('#triggerUpload').click(function() {
$('#manual-fine-uploader').fineUploader('setParams', {'id_fait':$('#id_fait').attr('value') });
$('#manual-fine-uploader').fineUploader('uploadStoredFiles'); });

我的服务器端响应是：

>HTTP/1.0 200 OK
>Date: Fri, 26 Jul 2013 08:12:09 GMT
>Server: Apache/2.2.15 (CentOS)
>X-Powered-By: PHP/5.3.3
>Expires: Thu, 19 Nov 1981 08:52:00 GMT
>Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
>Pragma: no-cache
>Connection: close
>Content-Type: text/html; charset=UTF-8

内容：

{"success":true,"file_inner":"<a href='pj\/'116810_116810_cimpa_insertion.xls'  target='_blank'>116810_cimpa_insertion.xls<\/a>"}

在 FF 下，Chrome 我的网页上有一条成功消息（绿色）但在 IE7 或 IE8 下，我的调试栏控制台中有一条消息：

[FineUploader 3.7.0] 尝试解析 iframe 上传响应时出错（[object Error]） [FineUploader 3.7.0] 'error' 不是服务器响应的有效属性。

和网页错误信息（红色）。但是上传没问题（文件在我的服务器上是正确的）

我是fine-uploader下的初学者，请你帮我看看我出错的地方吗？

服务器端代码：

/**
* uploadfile
* @access public
* @return string
*/
  public function uploadfile() {
    $post['id_fait'] = $this->input->post('id_fait');
    if ( empty($post['id_fait']) ) {
      $return['error'] = 'ID_FAIT manquant';
      return true;
    }
    else {
      $_FILES['qqfile']['name'] = $post['id_fait']."_".$_FILES['qqfile']['name'];
      $config['upload_path']   = DOCUMENT_PATH;
      $config['max_size']      = UPLOAD_MAX_SIZE;
      $config['overwrite']     = FALSE;
      $config['allowed_types'] = ALLOWED_EXT;
      $config['remove_spaces'] = FALSE;
      $this->load->library('upload', $config);

      if ( !$this->upload->do_upload('qqfile')) { $return['error'] = $this->upload->error_msg[0]; }
      else {
        $data = $this->upload->data();
        $post['fichier'] = $data['file_name'];
        $insert = $this->db->insert('senla_faits_piece_jointe',$post);
        $return['success'] = $insert;
        $return['file_inner'] = "<a href='pj/'".$post['id_fait']."_".$data['file_name']."'  target='_blank'>".$data['file_name']."</a>";
      }
    }
    echo json_encode( $return, JSON_FORCE_OBJECT );
  }

更新：在我进行更改后，我的服务器响应：

HTTP/1.0 200 OK
Date: Fri, 26 Jul 2013 20:21:01 GMT
Server: Apache/2.2.15 (CentOS)
X-Powered-By: PHP/5.3.3
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Content-Length: 124
Connection: close
Content-Type: text/html; charset=UTF-8

和内容：

{"success":true,"file_inner":"<a href=\"pj\/116842_116842_brochure 12.pdf\"  target=\"_blank\">116842_brochure 12.pdf<\/a>"}

我总是有一条红色的网络消息说：上传失败（法语），并且在我的调试栏控制台中有这条消息：

[FineUploader 3.7.0] Error when attempting to parse iframe upload response ([object Error])

 [FineUploader 3.7.0] 'error' is not a valid property on the server response.

非常感谢您的帮助

史蒂芬

更改内容类型后更新2，总是同样的问题：服务器响应：

HTTP/1.0 200 OK
Date: Sat, 27 Jul 2013 20:14:38 GMT
Server: Apache/2.2.15 (CentOS)
X-Powered-By: PHP/5.3.3
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Set-Cookie: PHPSESSID=7riosh2q9edldanjp9vtg4ili3; path=/
Set-Cookie: PHPSESSID=7riosh2q9edldanjp9vtg4ili3; path=/
Connection: close
Content-Type: text/plain; charset=UTF-8

内容：

{"success":true,"file_inner":"<a href=\"pj\/116841_116841_capture_portail_sonacotra.doc\"  target=\"_blank\">116841_capture_portail_sonacotra.doc<\/a>"}

我认为这不是内容的问题，也许是 IE 的问题，无法读取服务器通过 iframe 发送的响应，但我对 javascript 了解不够，无法找到解决方案

2013 年 7 月 29 日更新：我做了一个测试：如果我删除我的 $return['file_inner'] 我只保留成功或错误消息，那没关系

我的 $return['file_inner'] 只是在这里，因为用户可以通过单击链接来验证文档上传。但这不是一个非常重要的功能，我可以删除它。当它们是我的对象“响应”中的多个属性时，也许我忘记了一些东西。或者也许好的上传代码只等待一个属性。

【问题讨论】：

很好的问题。感谢您花时间提供所有这些信息并如此清楚地解释您的问题。看到一个格式正确的问题令人耳目一新，我希望 Stackoverflow 上的更多人能发布像您的问题一样详细和完整的问题。
确保您在客户端和服务器上都使用 UTF-8。
我已经更新了我的答案，请看一下。

标签： php javascript fine-uploader

【解决方案1】：

仔细查看后，您的 JSON 响应有一些奇怪的属性。

我对PHP的专业经验很少，但我可以说你的回复内容不正确。您可能应该使用json_encode 来格式化您的响应内容。 Fine Uploader 有 an example PHP script 已经这样做了。也许你应该看看。

无论哪种方式，您的响应内容应如下所示：

{"success":"true","file_inner":"<a href=\"pj/116841_116841_capture_portail_sonacotra.doc\"  target=\"_blank\">116841_capture_portail_sonacotra.doc</a>"}

【讨论】：

我已经做了这个改变，但他们是同样的问题。
请在进行此更改后复制响应的确切内容。
您的回复的 Content-Type 应该是“text/plain”而不是“text/html”。请尝试一下。

【解决方案2】：

OP 的解决方案。

解决方案在示例 php 脚本中，我的错误是在我的对象中创建一个 url 而没有 htmlspecialchars 转换。在服务器端使用这个 php 代码就可以了

/**
* uploadfile
* @access public
* @return string
*/
  public function uploadfile() {
    $post['id_fait'] = $this->input->post('id_fait');
    if ( empty($post['id_fait']) ) {
      $return['error'] = 'ID_FAIT manquant';
      return true;
    }
    else {
      $_FILES['qqfile']['name'] = $post['id_fait']."_".$_FILES['qqfile']['name'];
      $config['upload_path']   = DOCUMENT_PATH;
      $config['max_size']      = UPLOAD_MAX_SIZE;
      $config['overwrite']     = FALSE;
      $config['allowed_types'] = ALLOWED_EXT;
      $config['remove_spaces'] = FALSE;
      $this->load->library('upload', $config);

      if ( !$this->upload->do_upload('qqfile')) { $return['error'] = $this->upload->error_msg[0]; }
      else {
        $data = $this->upload->data();
        $post['fichier'] = $data['file_name'];
        $insert = $this->db->insert('senla_faits_piece_jointe',$post);
        $return['success'] = $insert;
        $return['file_inner'] = "<a href=\"pj/".$post['id_fait']."_".$data['file_name']."\"  target=\"_blank\">".$data['file_name']."</a>";

     }
    }
// log_askel($this->upload);
    header('Content-type: text/plain');
    echo htmlspecialchars(json_encode($return), ENT_NOQUOTES);
  }

【讨论】：