jQuery.Form上传文件操作

作者:袖梨 2022-06-25

建立test文件夹

PHP代码:

代码如下 复制代码

//var_dump($_FILES['file']);exit;

if(isset($_GET['option']) && $_GET['option']=='delete'){

@file_put_contents(dirname(__FILE__)."/------------0.txt", $_GET['path']."rn",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"]

{

if($_FILES["file"]["error"] > 0)

{

echo"Return Code: ". $_FILES["file"]["error"] ."
";

}

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代码:

代码如下 复制代码

文件上传

.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;

}

添加附件

jQuery(function() {

varoption =

{

type:'post',

dataType:'json',//数据格式为json

resetForm:true,

beforeSubmit: showRequest,//提交前事件

uploadProgress: uploadProgress,//正在提交的时间

success: showResponse//上传完毕的事件

}

jQuery('#fileName').wrap(

'

');

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('.btn span').text('上传中...');

}

//开始提交

functionshowRequest(formData, jqForm, options) {

jQuery('.btn span').text('开始上传..');

varqueryString = $.param(formData);

}

//上传完成

varshowResponse =function(responseText, statusText, xhr, $form) {

console.log(responseText);

if(responseText[0].success) {//成功之后返回文件地址、文件名称等信息 拼接呈现到html里面。

varstr ='

  • 删除
  • ';

    jQuery('#fileLsit').append(str);

    }

    jQuery('.btn span').text('上传完成');

    jQuery('.btn span').text('添加附件');

    }

    相关文章

    精彩推荐