jQuery.Form上传文件的示例分析

小编给大家分享一下jQuery.Form上传文件的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

我们提供的服务有:成都网站设计、成都做网站、微信公众号开发、网站优化、网站认证、石城ssl等。为近千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的石城网站制作公司

建立test文件夹

PHP代码:

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"] . "";
 }
 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 () {    var option =     {      type: 'post',      dataType: 'json', //数据格式为json      resetForm: true,      beforeSubmit: showRequest,//提交前事件      uploadProgress: uploadProgress,//正在提交的时间      success: showResponse//上传完毕的事件     }    jQuery('#fileName').wrap(     '');    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 = '' + responseText[0].fileName + '删除';     jQuery('#fileLsit').append(str);    }    jQuery('.btn span').text('上传完成');    jQuery('.btn span').text('添加附件');   }  

以上是“jQuery.Form上传文件的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


分享名称:jQuery.Form上传文件的示例分析
分享URL:http://hbruida.cn/article/jieesh.html

其他资讯