jQuery.Form上传文件操作

更新时间：2017年02月05日 09:23:05 投稿：mrr

这篇文章主要介绍了jQuery.Form上传文件操作,首先需要我们先建立test文件夹，具体代码内容大家通过本文学习下吧

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

您可能感兴趣的文章:

jQuery实现美观的多级动画效果菜单代码
这篇文章主要介绍了jQuery实现多级动画效果菜单代码,涉及jquery针对页面元素的遍历及事件绑定操作页面元素样式变换的技巧,界面美观实用,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
详解bootstrap用dropdown-menu实现上下文菜单
这篇文章主要介绍了详解bootstrap用dropdown-menu实现上下文菜单的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
2017-09-09
jQuery UI 应用不同Theme的办法
jQuery UI是一套非常好用的jQuery Tools库，目前已经发布的最新版本是1.8.4。在我自己的使用过程中，总有一些不爽。因为我下载的那个包里默认的主题样式是下图这样的，使用起来很难和具体的网页风格去配合。
2010-09-09
jQuery焦点图切换简易插件制作过程全纪录
本文主要讲诉了本人制作一个jquery焦点图切换的简易插件的过程，十分的详细，希望对大家能有所帮助
2014-08-08
jquery数组封装使用方法分享(jquery数组遍历)
JQuery对数组的处理非常便捷并且功能强大齐全，一步到位的封装了很多原生js数组不能企及的功能。下面来看看JQuery数组的强大之处在哪。
2014-03-03
jQuery弹出窗口完整代码(居中,居左,居右)
jQuery弹出窗口完整代码,可以实现窗口居中,居左,居右显示，比较不错，需要的朋友可以参考下
2012-10-10
一款Jquery 分页插件的改造方法（服务器端分页）
分页几乎是每个外部程序必不可少的东西，在webform时代很多人都用过AspNetPager这个用户控件吧，用的人之多其实就在于它的优点
2011-07-07
jQuery实现单击按钮遮罩弹出对话框效果(1)
这篇文章主要为大家详细介绍了jQuery实现单击按钮遮罩弹出对话框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
jQuery基于排序功能实现上移、下移的方法
这篇文章主要介绍了jQuery基于排序功能实现上移、下移的方法,结合实例形式分析了jQuery使用ajax与后台php交互实现元素的排序，上移、下移功能相关操作技巧
2016-11-11
基于jQuery实现的图片切换焦点图整理
这篇文章主要介绍了基于jQuery实现的图片切换焦点图整理,需要的朋友可以参考下
2014-12-12

jQuery.Form上传文件操作

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具