建立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上传文件的更多相关文章

  1. jQuery.form 上传文件

    今年大部分是都在完善产品,这几天遇到了一个问题,原来的flash组件不支持苹果浏览器,需要改.在网上搜了下,看到一个jQuery.form插件可以上传文件,并且兼容性很好,主要浏览器大部分都兼容,插件 ...

  2. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  3. 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传

    使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址  ...

  4. jQuery ajax上传文件实例

    jQuery ajax上传文件实例 <form id="form" enctype="multipart/form-data"><input ...

  5. Jquery异步上传文件

    我想通过jQuery异步上传文件,这是我的HTML: 1 2 3 <span>File</span> <input type="file" id=&q ...

  6. jquery.uploadify上传文件配置详解(asp.net mvc)

    页面源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  7. c# 模拟表单提交，post form 上传文件、大数据内容

    表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipart/form-data,而且要设定一个 boundary 参数,这个参数是由应用程序自行产生,它会用来识别每 ...

  8. 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除（逻辑删除） 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据

    1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...

  9. c# 模拟表单提交，post form 上传文件、数据内容

    转自:https://www.cnblogs.com/DoNetCShap/p/10696277.html 表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipar ...

随机推荐

  1. Spark RDD设计学习笔记

    本文档是学习RDD经典论文<Resilient Distributed Datasets: A Fault-Tolerant Abstraction for In-Memory Cluster ...

  2. 手算KMP匹配的Next值和Nextval值

    文章作者:姜南(Slyar) 文章来源:Slyar Home (www.slyar.com) 转载请注明,谢谢合作. KMP 算法我们有写好的函数帮我们计算 Next 数组的值和 Nextval 数组 ...

  3. JavaScript权威指南阅读笔记3

    第六章 对象 1.首先是先介绍了对象直接量的格式:对象直接量就是1.由若干个名/值对组成的映射表,2名/值对中间由冒号分割,3名值对之间由逗号分割,4整个映射表由花括号括起来.这样就组成了一个对象直接 ...

  4. [C++程序设计]多维数组元素的地址

    设有一个二维数组a,它有3行4列.它的定义为int a[3][4]={{1,3,5,7},{9,11,13,15},{17,18,21,23}};a是一个数组名.a数组包含3行,即3个元 素:a[0] ...

  5. python运维开发(十七)----jQuery续(示例)web框架django

    内容目录: jQuery示例 前端插件 web框架 Django框架 jQuery示例 dom事件绑定,dom绑定在form表单提交按钮地方都会绑定一个onclick事件,所有查看网站的人都能看到代码 ...

  6. Python爬虫学习：四、headers和data的获取

    之前在学习爬虫时,偶尔会遇到一些问题是有些网站需要登录后才能爬取内容,有的网站会识别是否是由浏览器发出的请求. 一.headers的获取 就以博客园的首页为例:http://www.cnblogs.c ...

  7. haproxy之配置文件解析

    功能--> 提供高可用/负载均衡/基于tcp和http应用的代理;支持虚拟主机,特别适用于负载特大的web站点. 配置文件解析--> #配置文件-->开启/proc/net/ipv4 ...

  8. collections——高性能容器数据类型

    由于最近对机器学习算法感兴趣,一直知道python有一个包collections封装了一些比dict,list之类高级点的类,所以抽空研究下,为接下来的工作准备. 主要参考是https://docs. ...

  9. oc语言--protocol（协议）

    一.protocol 1.基本用途 1> 可以用来声明很多方法,但是不能用来声明成员变量 2> 只要某个类遵守了这个协议,就相当于拥有这个协议中的所有方法声明 3> 只要父类遵守了某 ...

  10. 无聊写了一个最简单的MVC4+Highcharts连数据库例子

    乱搞了个数据库 后面发现没定INT类型 直接将ID当数据显示了 效果图: 前端 @{ Layout = null; } <!DOCTYPE html> <html> <h ...