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

2025-01-22 技术教程

版权声明：本文由一只博客发表于 bloghome博客
文章链接： https://www.bloghome.com.cn/user/cnn237111

常规实现方法：

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

<p id="uploading" >Uploading...<img src="loading.gif"/><form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" > File: <input name="myfile" type="file" /> <input type="submit" name="submitBtn" value="Upload" /></form><iframe id="upload_target" name="upload_target" src="#" ></iframe>

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

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

php代码如下：

<?phpheader("Content-Type:text/html;charset=utf-8");$destination_path = getcwd().DIRECTORY_SEPARATOR;$filname = $destination_path . basename( $_FILES['myfile']['name']);$filname=iconv("UTF-8","gb2312",$filname);if(move_uploaded_file($_FILES['myfile']['tmp_name'], $filname)) { echo "<script language=\"javascript\" type=\"text/javascript\">window.parent.finisheUpload(0);</script> ";}else{ echo "<script language=\"javascript\" type=\"text/javascript\">window.parent.finisheUpload(1);</script> ";}

注意，输出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出来内容。

——————————————————————————————

下面演示一个例子，读取一个DataURL的，DataURL其实是一种DataURI（要知道URI的更多细节，可以去http://css-tricks.com/data-uris/，或者维基百科了解更多）。它提供了一种在浏览器中显示数据的途径。比如你要显示一个图片（百度的logo）的话，你可以如下写：

你也可以用它的URI去写，如下：

src中填写的字符串就是DataURI，格式如下：

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

这种URI其实很有用的，可以减少HTTP请求，使得网站提速。因此获取了URI的话就可以加载本地的图像了。示例代码如下：

————————————————————————————————————

还有一个方法是readAsArrayBuffer，从字面就可以看出，是把文件读取到一个数组缓冲区。

使用readAsArrayBuffer这种方法实现上传文件

下面演示一个例子：

后端PHP代码：

try{ $filename=$_GET['filename']; $input = file_get_contents("php://input"); //这个是获取请求的InputStream，PHP下的写法 file_put_contents($filename, $input);//保存成文件。 echo json_encode(array("msg"=>"上传成功"));}catch(Exception $e){ echo json_encode(array("msg"=>"上传失败"));}

FormData方法

FromData的官方说明在这里。利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单。

以下给出一个例子，允许上传多个文件：

后台PHP代码：

try{ foreach($_FILES as $key => $value) { //print_r ($_FILES[$key]); echo "<br>"; move_uploaded_file( $value["tmp_name"], $value['name']); } echo json_encode(array("msg"=>"上传成功"));}catch(Exception $e){ echo json_encode(array("msg"=>"上传失败"));}

参考文档：

https://developer.mozilla.org/zh-CN/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects

http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface

http://www.w3.org/TR/XMLHttpRequest2/#interface-formdata

http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

http://www.dotblogs.com.tw/junegoat/archive/2013/05/27/test-fileapi-multiupload-readasarraybuffer.aspx