jQuery.Form上传文件操作


Posted in Javascript onFebruary 05, 2017

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

Javascript 相关文章推荐
js 弹出菜单/窗口效果
Oct 30 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
React SSR样式及SEO的实践
Oct 22 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
javascript canvas封装动态时钟
Sep 30 Javascript
用javascript制作qq注册动态页面
Apr 14 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 #Javascript
用jquery的attr方法实现图片切换效果
Feb 05 #Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 #Javascript
JS动态生成年份和月份实例代码
Feb 04 #Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 #Javascript
js常用DOM方法详解
Feb 04 #Javascript
JavaScript数组操作详解
Feb 04 #Javascript
You might like
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
4.与数据库的连接
2006/10/09 PHP
destoon复制新模块的方法
2014/06/21 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
js动态为代码着色显示行号
2013/05/29 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
JS与C#编码解码
2013/12/03 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
JS FormData上传文件的设置方法
2017/07/05 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Python 列表理解及使用方法
2017/10/27 Python
在python中实现对list求和及求积
2018/11/14 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
opencv 阈值分割的具体使用
2020/07/08 Python
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
结构工程个人自荐信范文
2013/11/30 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
体育之星事迹材料
2014/05/11 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书