您的位置:首页 > Web前端 > JQuery

jQuery easyui-filebox+ajax+PHP实现文件上传并恢复备份

2017-06-12 23:45 691 查看
最近开发一个数据备份恢复的功能,该项目基于PHP+Mysql+Apache的架构,因此这个功能用easyui-filebox+ajax+PHP实现。
1.首先HTML部分:


<form id="importFileForm" method="post" enctype="multipart/form-data">
<div style="margin-bottom:20px">
<div>选择Tar包:</div>
<input id="fileupload" class="easyui-filebox" name="mypic" data-options="prompt:'Choose file...'"
style="width:100%">
</div>
<div>
<a href="#" class="easyui-linkbutton" onclick="importFileAndRestore()"
style="width:100%">RestoreBackup</a>
</div>
<div><label id="fileName"></label></div>
<div><label id="uploadInfo"></label></div>
</form>


2.js部分:


//上传并恢复备份
function importFileAndRestore() {
//获取上传文件控件内容。根据实际情况,easyui-filebox把DOC打乱了,生成filebox_file_id_X这个id标记要上传的文件,此控件可以上传多个文件,因此一个file,X值为1;两个X值为1,2;以此类推;
var file = document.getElementById('filebox_file_id_1').files[0];
//判断控件中是否存在文件内容,如果不存在,弹出提示信息,阻止进一步操作
if (file == null) {
alert('错误,请选择文件');
return;
}
//获取文件名称
var fileName = file.name;
//获取文件类型名称
var file_typename = fileName.substring(fileName.lastIndexOf('.'), fileName.length);
//这里限定上传文件文件类型必须为.gz,如果文件类型不符,提示错误信息
if (file_typename == '.gz') {
//计算文件大小
var fileSize = 0;
//如果文件大小大于1024字节X1024字节,则显示文件大小单位为MB,否则为KB
if (file.size > 1024 * 1024) {
fileSize = Math.round(file.size * 100 / (1024 * 1024)) / 100;

if (fileSize > 100) {
alert('错误,文件超过100MB,禁止上传!');
return;
}
fileSize = fileSize.toString() + 'MB';
}
else {
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
}
//获取form数据
var formData = new FormData($("#importFileForm")[0]);
//将form数据传递给后台处理。contentType必须设置为false,否则chrome和firefox不兼容
$.ajax({
url: '../../php/upload_backup.php',
type: 'POST',
data: formData,
dataType: 'json',
async: false,
cache: false,
contentType:
,
processData: false,
success: function (data) {
//上传成功后将控件内容清空,并显示上传成功信息
document.getElementById('fileupload').value = null;
if (parseInt(data) == 0) {
alert("你选择的文件格式不正确!");
$('#upload_win').window('close');
} else if (parseInt(data) == 1) {
alert("文件上传失败!");
$('#upload_win').window('close');
} else {
for (var p in data) {
for (var pp in data[p]) {
var table_name = (pp.split('.'))[0];

//先清空要恢复的表
var clear_table = {
action: "clear" + table_name
};
$.ajax({
url: '../../php/client.php',
type: "POST",
dataType: 'json',
data: {
strRequest: JSON.stringify(clear_table)
},
success: function (obj) {
}
})

//恢复备份
var restore_table = {
action: "add" + table_name,
data: JSON.parse(data[p][pp])
};

$.ajax({
url: '../../php/client.php',
type: "POST",
dataType: 'json',
data: {
strRequest: JSON.stringify(restore_table)
},
success: function (obj) {
}
})
}
}
alert("恢复备份成功!");
$('#upload_win').window('close');
}

},
error: function (returnInfo) {
//上传失败时显示上传失败信息
document.getElementById('uploadInfo').innerHTML = "<span style='color:Red'>" + returnInfo + "</span>";
}
});
}
else {
//将错误信息显示在前端label文本中
document.getElementById('fileName').innerHTML = "<span style='color:Red'>错误提示:上传文件应该是.tar.gz后缀而不应该是" + file_typename + ",请重新选择文件</span>"
}
}


3.PHP部分:


<?php
//通过$_FILES读取easyui-filebox控件的文件名
$picname = $_FILES['mypic']['name'];
if ($picname != "") {
//文件格式可以在js里判断,也可以在PHP中判断;
//$type = strstr($picname, '.'); //限制上传格式
//if ($type != ".tar.gz") {
//   echo 0; //0代表文件格式不对;
//   exit;
//}

//上传路径
$pic_path = "/var/www/html/upload/". $picname;
if(move_uploaded_file($_FILES['mypic']['tmp_name'], $pic_path)){//返回值1,代表文件上传成功;
//解压文件
shell_exec('cd /var/www/html/upload;tar zxvf '.$picname);
$files_josn=shell_exec("cd /var/www/html/upload/backup;ls *.json");

$files_nameArray=array();
$token = strtok($files_josn, "\n");
while ($token != false)
{
array_push($files_nameArray, $token);
$token = strtok("\n");
}
//读取备份的内容
$contents=array();
for($i=0;$i<count($files_nameArray);$i++){
$temp=$files_nameArray[$i];
$content=array();
$content[$temp]=file_get_contents("/var/www/html/upload/backup/".$files_nameArray[$i]);
array_push($contents,$content);
}
echo json_encode($contents);
}else{
echo 1;//1代表文件上传失败
}
}
?>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery ajax php