无刷新上传文件以及HTML5下的实现方式

版权声明： 本文由 一只博客 发表于 bloghome博客

创新互联建站"三网合一"的企业建站思路。企业可建设拥有电脑版、微信版、手机版的企业网站。实现跨屏营销，产品发布一步更新，电脑网络+移动网络一网打尽，满足企业的营销需求！创新互联建站具备承接各种类型的成都网站建设、成都网站设计项目的能力。经过十多年的努力的开拓，为不同行业的企事业单位提供了优质的服务，并获得了客户的一致好评。

文章链接： https://www.bloghome.com.cn/user/cnn237111

常规实现方法：

ajax无法实现上传文件，因此常规情况下，要实现无刷新上传文件的做法，是在页面隐藏一个iframe，然后将上传form的target指向这个iframe，变相的实现。如下代码：

Uploading...

    File: 
          

upload_target是一个长宽都是0的iframe，所以页面上看不见他。还需要配合js，使得效果更好：

其中startUpload方法是在提交表单的时候触发，而由于没有什么回调函数，因此finisheUpload只能由upload.php文件的输出控制。通常就是在输出中输出一段javascript代码来执行。

php代码如下：

window.parent.finisheUpload(0); ";
}
else
{
   echo "window.parent.finisheUpload(1); ";
}

注意，输出javascript的时候，由于调用的js方法是在iframe外定义的，要在iframe内调用js方法，需要指定window.parent。

————————

HTML5下的实现方法：

先介绍一下FileReader对象：

FileReader对象的详细说明可以在W3C官方文档中查看。

该接口提供方法来读取文件对象或者Blob对象。它继承了EventTarget，接口的描述如下：

[Constructor]
    interface FileReader: EventTarget {
      // async read methods
      void readAsArrayBuffer(Blob blob);
      void readAsText(Blob blob, optional DOMString label);
      void readAsDataURL(Blob blob);
      void abort();
      // states
      const unsigned short EMPTY = 0;
      const unsigned short LOADING = 1;
      const unsigned short DONE = 2;
      readonly attribute unsigned short readyState;
      // File or Blob data
      readonly attribute (DOMString or ArrayBuffer)? result;
      readonly attribute DOMError? error;
      // event handler attributes
      attribute EventHandler       attribute EventHandler onprogress;
      attribute EventHandler       attribute EventHandler onabort;
      attribute EventHandler onerror;
      attribute EventHandler     };

可以看到有4个异步方法，其中3个是读取，1个是放弃，4个状态属性,1个result，1个error和6个事件。（之前还有readAsBinaryString方法，不过已经被W3C去除了）这6个事件的触发时机如下：

loadstart --When the read starts.

progress --While reading (and decoding) blob

abort --When the read has been aborted. For instance, by invoking the abort() method.

error --When the read has failed (see errors).

load --When the read has successfully completed.

loadend --When the request has completed (either in success or failure).

下面演示一个例子，读取一个文本文档，并且alert出来内容。