jQuery.Form上传文件操作
建立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"ReturnCode:".$_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"]
);
}
echojson_encode($return_str);
?>
HTML代码：
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="multipart/form-data;charset=utf-8"/>
<title>文件上传</title>
<styletype="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;
}
.btninput{
opacity:0;
filter:alpha(opacity=0);
position:absolute;
top:0px;
left:0px;
line-height:30px;
height:30px;
width:80px;
}
#fileLsitlispan{
margin-left:10px;
color:red;
}
#fileLsit{
font-size:12px;
list-style-type:none;
}
</style>
</head>
<body>
<divclass="btn">
<span>添加附件</span>
<!--这里注意：file标签必须具有name属性，由于没有加name属性，文件上传不到服务到哪-->
<inputtype="file"id="fileName"name="file"/>
</div>
<ulid="fileLsit"style="border:1pxsolidred;">
</ul>
<!--引入jquery类库-->
<scripttype="text/javascript"src="js/jquery.js"></script>
<!--引入jquery.form插件-->
<scripttype="text/javascript"src="js/jquery.form.js"></script>
<scripttype="text/javascript">
jQuery(function(){
varoption=
{
type:'post',
dataType:'json',//数据格式为json
resetForm:true,
beforeSubmit:showRequest,//提交前事件
uploadProgress:uploadProgress,//正在提交的时间
success:showResponse//上传完毕的事件
}
jQuery('#fileName').wrap(
'<formmethod="post"action="test.php"id="myForm2"enctype="multipart/form-data"></form>');
jQuery('#fileName').change(function(){
$('#myForm2').ajaxSubmit(option);
});
});
//删除文件
vardeleteFile=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');
}
//上传中
varuploadProgress=function(event,position,total,percentComplete){
jQuery('.btnspan').text('上传中...');
}
//开始提交
functionshowRequest(formData,jqForm,options){
jQuery('.btnspan').text('开始上传..');
varqueryString=$.param(formData);
}
//上传完成
varshowResponse=function(responseText,statusText,xhr,$form){
console.log(responseText);
if(responseText[0].success){//成功之后返回文件地址、文件名称等信息拼接呈现到html里面。
varstr='<liid="'+responseText[0].guid+'"><ahref="'+responseText[0].fileName+'"target="_blank">'+responseText[0].fileName+'</a><spanonclick="deleteFile(\''+responseText[0].fileName+'\',\''+responseText[0].guid+'\')">删除</span></li>';
jQuery('#fileLsit').append(str);
}
jQuery('.btnspan').text('上传完成');
jQuery('.btnspan').text('添加附件');
}
</script>
</body>
</html>
以上所述是小编给大家介绍的jQuery.Form上传文件操作，希望对大家有所帮助，如果大家有任何疑问欢迎给留言，小编会及时回复大家的！