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 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
js 字符串操作函数
Jul 25 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
简单理解vue中Props属性
Oct 27 Javascript
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
vue 扩展现有组件的操作
Aug 14 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
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错误、异常处理机制(补充)
2012/05/07 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
javascript Array.remove() 数组删除
2009/08/06 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
Python实现优先级队列结构的方法详解
2016/06/02 Python
Python表示矩阵的方法分析
2017/05/26 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
Python魔法方法详解
2019/02/13 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
银行柜员应聘推荐信范文
2013/11/24 职场文书
中学生团员自我评价分享
2013/12/07 职场文书
英文简历自荐信范文
2013/12/11 职场文书
工地门卫岗位职责
2013/12/30 职场文书
班主任新年寄语
2014/04/04 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
委托书格式
2014/08/01 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
nginx静态资源的服务器配置方法
2022/07/07 Servers