
前端HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>ajax</title>
<script type="text/javascript" src="js/jquery.js"></script>
<meta charset="utf-8" />
<style type="text/css">
form{
position: relative;
}
ul li{
list-style: none;
}
.divide ul li img{
width: 100px;
border: 3px solid #eeeeee;
}
.selected{
border: 3px solid #0099aa;
}
form input{
position: absolute;
top: 0;
left: 0;
padding: 20px;
opacity: 0;
}
button{
padding: 20px;
background: #0099aa;
border-radius: 3px;
border: 2px solid #333333;
color: #ffffff;
font-size: 18px;
}
.loading{
display: none;
}
pre{
background: #000;
color: #fff;
}
textarea{
outline: none;
border: none;
width: 90%;
height: 400px;
background: none;
color: #fff;
font-size: 14px;
line-height: 14px;
}
</style>
</head>
<body> <input type="file" id="file" multiple="multiple" /> <div class="loading"><img src="loading.gif" /></div>
<div class="divide">
<ul> </ul>
</div> <script type="text/javascript">
$(function(){ var tt; $("#file").change(function(){ data = new FormData();
data.append('files', $('#file')[0].files[0]);
$.ajax({
type: "post",
url: "upload.php",
processData: false,
contentType: false,
data: data,
success: function(a, b, c){
$("div ul").append("<li class='del'>文件上传成功!<img src='" + a + "' /> <input type='text' value='"+a+"' /></li>");
tt = a;
$(".del").bind("click", function(){
$.ajax({
type: "post",
url: "del.php",
data: {
a : tt,
},
success: function(a, b, c){
alert(a);
}
});
$(this).hide(200);
});
}
}); }); });
</script> </body>
</html>
执行文件上传 upload.php
<?php $origname = $_FILES["files"]["name"];
$ext = strtolower(substr($origname, strrpos($origname, ".")+1));
$tmpfile = $_FILES["files"]["tmp_name"];
$filename = "./upload/".time().".".$ext;
move_uploaded_file( $tmpfile, $filename);
echo $filename; ?>
执行文件删除 del.php
<?php if(unlink($_POST["a"])){
echo "文件删除成功!";
}else{
echo "文件删除失败!";
} ?>