上一节讨论了文件下载,这一节继续讨论文件上传。
众所周知,前端上传文件比较简单的办法就是使用文件控件。然而,如果我们需要上传过程是AJAX的,亦即上传过程不刷新页面,仅反馈需要的信息,那就需要更加精巧的设计了。
首先是上传文件图片链接:
客户端需要将使用jQueryUI为用户提供上传文件的对话框,并且为用户提供上传结果的反馈。下面给出onUploadFile响应:function onUploadFile()
{
$('#dialogUploadFile').dialog({
height:'auto',
width:'auto',
position:{my:'center',at:'center',collision:'fit'},
modal:false,
draggable:true,
resizable:true,
title:"New File",
show:'slide',
hide:'explode',
buttons:{
OK: function() {
$("#frmUploadFile").submit();
setTimeout("$.post('query.php', {act:'refresh'}, function (data) {\
$('#spanDirTable').html(data);\
$( '#dialogUploadFile' ).dialog( 'close' );\
})",
1000);
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
}
这里有一个变化,表单的提交直接使用submit(),而之后的AJAX请求使用了setTimeout进行延迟,这样是为了让服务器有足够的时间接收和处理上传的文件。
对应的“原材料”也有变化:
Select file to upload:
这里引用了一个作为表单的target。这样,我们可以将上传文件的处理结果反馈到对应的frame中,并弹出alert提示。
对应的PHP处理:case "upload":
echo "
";$isDirContentView = false;
if (isset($_SESSION["currDir"]))
{
$strDirName = $_SESSION["currDir"];
}
else $strDirName = "/home";
$fileElemName = "newFile";
if (!isset($_FILES[$fileElemName]))
{
echo "alert('Upload File Unreceived!);";
break;
}
$newFile = $_FILES[$fileElemName];
$tmpFilePath = $newFile["tmp_name"];
$targetPath = $strDirName."/".$newFile["name"];
if ($tmpFilePath === false || file_exists($targetPath))
{
echo "alert('Unable to start upload!');