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上传文件操作,希望对大家有所帮助,如果大家有任何疑问欢迎给留言,小编会及时回复大家的!