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 相关文章推荐
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
vue生命周期实例小结
Aug 15 Javascript
基于axios 的responseType类型的设置方法
Oct 29 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 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
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
js 走马灯简单实例
2013/11/21 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
Python 开发Activex组件方法
2009/11/08 Python
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python实现自动上京东抢手机
2018/02/06 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
Reformation官网:美国女装品牌
2018/09/14 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
培训楼经理岗位责任制
2014/02/10 职场文书
教师新年寄语
2014/04/03 职场文书
家长通知书教师评语
2014/04/17 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
鸡毛信观后感
2015/06/11 职场文书
初中军训感言
2015/08/01 职场文书