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 相关文章推荐
Javascript开发包大全整理
Dec 22 Javascript
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
关于vue里页面的缓存详解
Nov 04 Javascript
js prototype深入理解及应用实例分析
Nov 25 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
把PHP安装为Apache DSO
2006/10/09 PHP
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
Python深入学习之闭包
2014/08/31 Python
Python提取网页中超链接的方法
2016/09/18 Python
python类的继承实例详解
2017/03/30 Python
深入浅析Python的类
2018/06/22 Python
django中瀑布流写法实例代码
2019/10/14 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
教育科学研究生自荐信
2013/10/09 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
交通安全主题班会
2015/08/12 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
护士工作心得体会
2016/01/25 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle