闲话不多说上代码 前端代码

<!DOCTYPE HTML>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>ajax表单处理</title>

</head>

<body>

    <form class="upForm" action="http://localhost/dynamicPHP/Home/Index/getFile" method="post" enctype="multipart/form-data">

        <table>

            <tr>

                <td>用户名：</td>

                <td><input type="text" name="name" /></td>

            </tr>

            <tr>

                <td>密码：</td>

                <td><input type="password" name="pwd" /></td>

            </tr>

            <tr>

                <td>性别：</td>

                <td>

                    <input type="radio" name="sex" value="0" checked />男

                    <input type="radio" name="sex" value="0" />女

                </td>

            </tr>

            <tr>

                <td>图像：</td>

                <td><input type="file" name="upfile" /></td>

            </tr>

            <tr>

                <td></td>

                <td><input type="button" value="提交" /></td>

            </tr>

        </table>

    </form>

</body>

<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>

<script type="text/javascript" src="js/jquery.form.js"></script>

<script type="text/javascript">

    $(function() {

        $(".upForm input[type='button']").on("click", function() {

            var options = {

                "beforeSubmit" : checkForm,

                "success" : resultForm,

                "resetForm" : true,

                "dataType" : "json"

            };

            $(".upForm").ajaxSubmit(options);

        });

        function checkForm(formData, form, options) {

            //表单提交前处理

            console.log("提交前")

        }

        function resultForm(data, status) {

            //表单完成

            console.log(data);

        }

    });

</script>

</html>

　后端php代码

public function getFile(){

        $upload = new Upload($_FILES);// 实例化上传类

        $upload->maxSize   =     10485760 ;// 设置附件上传大小 字节为单位1M=1024*1024

        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg','mp4');// 设置附件上传类型

        $upload->rootPath  =     './'; // 设置附件上传根目录

        $upload->savePath  =     'Public/Uploads/'; // 设置附件上传（子）目录

        // 上传文件

        $info = $upload->upload($_FILES);

        if($info['size']>=10485760){

            echo "<script>alert('请上传10M以内的视频或图片')</script>";

        }else{

            if(!$info) {// 上传错误提示错误信息

                $this->error($upload->getError());

            }else{// 上传成功 获取上传文件信息

                $data[ 'name' ] = $_POST[ 'name' ];

                $data[ 'pwd' ] = $_POST[ 'pwd' ];

                $data[ 'sex' ] = $_POST[ 'sex' ];

                $data['img_name']= $info['upfile']['savename'];

                $data['img_path']= $info['upfile']['savepath'];

                $data["state"]=1;

                $res=M("pic")->add($data);

                if($res){

                    $this->ajaxReturn([stateCode=>"200",msg=>"上传成功"]);

                }

            }

        }

    }

　　

jquery-from+php 文件上传的更多相关文章

  1. 转: 如何实现jQuery的Ajax文件上传

    [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上 ...

  2. jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能

     Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...

  3. jquery组件WebUploader文件上传用法详解

    这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...

  4. Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除

    前端HTML代码: <!DOCTYPE html> <html> <head> <title>ajax</title> <script ...

  5. Javascript Fromdata 与jQuery 实现Ajax文件上传

    <!DOCTYPE html> <html> <head> <title>ajax</title> <script type=&quo ...

  6. js 使用jquery.form.js文件上传

    1.文件上传,使用jquery.form.js插件库 <!DOCTYPE html> <html> <head> <meta charset="UT ...

  7. jquery+springMVC实现文件上传

    此文章是基于 搭建Jquery+SpringMVC+Spring+Hibernate+MySQL平台 一. jar包介绍 1. commons-fileupload-1.3.1.jar 二. 相关程序 ...

  8. jQuery File Upload 文件上传插件使用一 (最小安装 基本版)

    jQuery File Upload 是一款非常强大的文件上传处理插件,支持多文件上传,拖拽上传,进度条,文件验证及图片音视频预览,跨域上传等等. 可以说你能想到的功能它都有.你没想到的功能它也有.. ...

  9. jQuery File Upload文件上传插件简单使用

    前言 开发过程中有时候需要用户在前段上传图片信息,我们通常可以使用form标签设置enctype=”multipart/form-data” 属性上传图片,当我们点击submit按钮的时候,图片信息就 ...

  10. Jquery Uploadify多文件上传实例

    jQuery Uploadify开发使用的语言是java. 详细的相关文档,可以参考官网的doc:http://www.uploadify.com/documentation/ 官网的讲解还是很详细的 ...

随机推荐

  1. PyQt学习随笔：Qt中Model/View中的Model Index

    Qt中Model/View中的Model Index是一个类,该类用于定位Model/View中数据模型中的数据. Model Index是从QAbstractItemModel派生的子类,用于在项视 ...

  2. Robot framework 环境搭建+图标处理

    场景:随着现在项目各种赶工,很多时候界面上的功能还没有实现,这时就可以先对接口进行验证,提早发现一些和预期不一致的错误. Robot framework需要的几个知识点: 测试库:RF是大树,测试库就 ...

  3. new一个对象时，会经历哪些步骤

    (1)创建一个对象:(2)将构造函数的作用域赋值给新对象(因此this就指向了这个新对象):(3)执行构造函数中的代码(为这个新对象添加属性):(4)返回新对象

  4. JavaScript：浏览器的本地存储

    cookie.localStorage.sessionStorage的使用 <!DOCTYPE html> <html lang="en"> <hea ...

  5. emlog仿小刀网模板附文章

      附带了几百篇文章,搭建出来非常漂亮,喜欢的可以下载一份看看!下载地址:https://lengleng.lanzous.com/iNQayezebsh

  6. Python使用requests发送请求

    Python使用第三方包requests发送请求,实现接口自动化 发送请求分三步: 1.组装请求:包括请求地址.请求头header.cookies.请求数据等 2.发送请求,获取响应:支持get.po ...

  7. UWB硬件设计相关内容

    1.dw1000最小系统 2.器件选择建议: 射频前端  射频前端需要将差分信号转换成单端射频信号,一般使用HHM1595A1(俗称巴伦). 频率参考  晶振一般选择38.4MHZ的TCXO,但是要注 ...

  8. HBase删除数据

    hbase官方文档中描述了,hbase删除数据可以总结为下面三种(Java API有很多接口,可以总结下面的几种): 删除一个列的指定版本 删除一个列的所用版本 删除指定列族的所有列 hbase删除数 ...

  9. Cisco Packet Tracer NAT模拟实验

    Cisco Packet Tracer NAT模拟实验 by: 铁乐猫 date: 2020-09-22 cisco packet tracer : 7.2.2 NAT简介 NAT允许将私有IP地址映 ...

  10. Flink批处理读取Hive写入MySql

    把hive 表stu77 的数据写入 mysql 表test_stu 中. 中间可以加自己的逻辑. import org.apache.flink.table.api.EnvironmentSetti ...