jQuery.Form上传文件操作
程序员文章站
2022-06-14 08:36:00
建立test文件夹
php代码：
建立test文件夹
php代码：
<?php
//var_dump($_files['file']);exit;
if(isset($_get['option']) && $_get['option']=='delete'){
@file_put_contents(dirname(__file__)."/------------0.txt", $_get['path']."\r\n",file_append);
unlink($_get['path']);
$rs[] = array(
'success'=>true,
'info'=>'ok'
);
if(file_exists($_get['path'])){
$rs[]['success']=false;
$rs[]['info']='未删除';
}
die(json_encode($rs));
}
if ((($_files["file"]["type"] == "image/gif")
|| ($_files["file"]["type"] == "image/jpeg")
|| ($_files["file"]["type"] == "image/png")
|| ($_files["file"]["type"] == "image/pjpeg"))
&& ($_files["file"]["size"] < (1024*1024)))
{
if ($_files["file"]["error"] > 0)
{
echo "return code: " . $_files["file"]["error"] . "<br />";
}
else
{
if (file_exists("test/" . $_files["file"]["name"]))
{
$fn = $_files["file"]["name"];
}
else
{
$imgurl = substr($_files["file"]["name"], strpos($_files["file"]["name"], '.'));
$imgurl = date("ymdhis",time()).$imgurl;
move_uploaded_file($_files["file"]["tmp_name"],"test/" . $imgurl);
$fn = "test/" . $imgurl;
}
}
$return_str[] = array(
'guid'=>date('his',time()),
'path'=>'test/',
'filename'=>$fn,
'success'=>true
);
}
else
{
$return_str[] = array(
'guid'=>date('his',time()),
'path'=>'test/',
'filename'=>$_files["file"]["name"],
'success'=>false,
'error'=>$_files["file"]["error"]
);
}
echo json_encode($return_str);
?>
html代码：
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="multipart/form-data; charset=utf-8" />
<title>文件上传</title>
<style type="text/css">
.btn {
position: relative;
background-color: blue;
width: 80px;
text-align: center;
font-size: 12px;
color: white;
line-height: 30px;
height: 30px;
border-radius: 4px;
}
.btn:hover {
cursor: pointer;
}
.btn input {
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 0px;
left: 0px;
line-height: 30px;
height: 30px;
width: 80px;
}
#filelsit li span {
margin-left: 10px;
color: red;
}
#filelsit {
font-size: 12px;
list-style-type: none;
}
</style>
</head>
<body>
<div class="btn">
<span>添加附件</span>
<!--这里注意：file 标签必须具有name属性，由于没有加name属性，文件上传不到服务到哪-->
<input type="file" id="filename" name="file" />
</div>
<ul id="filelsit" style="border:1px solid red;">
</ul>
<!--引入jquery类库-->
<script type="text/javascript" src="js/jquery.js"></script>
<!--引入jquery.form插件-->
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
jquery(function () {
var option =
{
type: 'post',
datatype: 'json', //数据格式为json
resetform: true,
beforesubmit: showrequest,//提交前事件
uploadprogress: uploadprogress,//正在提交的时间
success: showresponse//上传完毕的事件
}
jquery('#filename').wrap(
'<form method="post" action="test.php" id="myform2" enctype="multipart/form-data"></form>');
jquery('#filename').change(function () {
$('#myform2').ajaxsubmit(option);
});
});
//删除文件
var deletefile = function (path, guid) {
console.log(path+'/'+guid);
jquery.getjson('test.php?option=delete', { path: path }, function (reslut) {
console.log(path+'/'+guid+''+reslut[0].info);
if (reslut[0].success) {//删除成功
jquery('#' + guid).remove();
console.log('删除成功');
} else {//删除失败
alert(reslut[0].info);
}
});
console.log('end');
}
//上传中
var uploadprogress = function (event, position, total, percentcomplete) {
jquery('.btn span').text('上传中...');
}
//开始提交
function showrequest(formdata, jqform, options) {
jquery('.btn span').text('开始上传..');
var querystring = $.param(formdata);
}
//上传完成
var showresponse = function (responsetext, statustext, xhr, $form) {
console.log(responsetext);
if (responsetext[0].success) {//成功之后返回文件地址、文件名称等信息 拼接呈现到html里面。
var str = '<li id="' + responsetext[0].guid + '"><a href="' + responsetext[0].filename + '" target="_blank">' + responsetext[0].filename + '</a><span onclick="deletefile(\'' + responsetext[0].filename + '\',\'' + responsetext[0].guid + '\')" >删除</span></li>';
jquery('#filelsit').append(str);
}
jquery('.btn span').text('上传完成');
jquery('.btn span').text('添加附件');
}
</script>
</body>
</html>
以上所述是小编给大家介绍的jquery.form上传文件操作，希望对大家有所帮助