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

<p id="uploading" style="display:none;">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="#" style=";height:0;border:0px solid #fff;">
</iframe>

<script>
function startUpload(){
$('#uploading').show();
}
function finisheUpload(i){
$('#uploading').hide();
if(i==0)
{
alert("上传成功");
}
else
{
alert("上传失败");
}
}
</script>

<?php
header("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> ";
}

[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个事件的触发时机如下：

<script>
function readfile(dom)
{
var file = dom.files[0];
var textType = /text.*/;//正则表达式,使之匹配text/html,text/plain
if (file.type.match(textType)) {
var reader = new FileReader();
//注册事件函数，即等读完内容后，要做的事情
reader.onload = function(e) {
alert(reader.result);
}
//异步读取内容
reader.readAsText(file,'gb2312');
$("#msg").html("正在执行异步读取");
}
else {
alert("文件不支持");
}
}
</script>
<input type="file" id="testfiles" name="files[]" onchange="readfile(this);" />
<div id="msg"></div>

<img src="http://www.baidu.com/img/bdlogo.gif" />

<script>
function loadimg(dom)
{
var file = dom.files[0];
//正则表达式,使之匹配image/jpeg等
var imageType = /image.*/;
if (file.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.src = reader.result;
$("#divimg").append(img);
}
reader.readAsDataURL(file);
}
else {
alert("文件不支持");
}
}
</script>
<input type="file" id="testfiles" name="files[]" onchange="loadimg(this);" />
<div id="divimg"></div>

<script>
function upload()
{
var file = $('#testfiles')[0].files[0];
var reader = new FileReader();
reader.onload = function (rResult) {
var filename = file.name;
var options = {
type: 'POST',
url: 'upload.php?filename='+filename,
data: reader.result,
success:function(result){
alert(result.msg);
},
processData: false,  // 告诉jQuery不要去处理发送的数据
contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
dataType:"json"
};
$.ajax(options);
};
reader.readAsArrayBuffer(file);
}
</script>
<input type="button" value="upload" onclick="javascript:upload();"/>

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

<script>
function upload()
{
var formdata = new FormData();
$.each($('#testfiles')[0].files, function(i, file) {
formdata.append('file-'+i, file);
});
var options = {
type: 'POST',
url: 'upload.php',
data: formdata,
success:function(result){
alert(result.msg);
},
processData: false,  // 告诉jQuery不要去处理发送的数据
contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
dataType:"json"
};
$.ajax(options);
}
</script>
<input type="button" value="upload" onclick="javascript:upload();"/>

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"=>"上传失败"));
}