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 相关文章推荐
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
javascript中String类的subString()方法和slice()方法
May 24 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
Vue插件之滑动验证码用法详解
Apr 05 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
php 随机生成10位字符代码
2009/03/26 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
Python3实现定时任务的四种方式
2019/06/03 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
python读取与处理netcdf数据方式
2020/02/14 Python
python中count函数知识点浅析
2020/12/17 Python
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
生日寿宴答谢词
2014/01/19 职场文书
法制宣传日活动总结
2014/04/29 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
nginx安装以及配置的详细过程记录
2021/09/15 Servers
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers