首页 > 编程 > JavaScript > 正文

jQuery.Form上传文件操作

2019-11-19 17:44:03
字体:
来源:转载
供稿:网友

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表