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

<!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. GPU相关资料汇总

    qemu, quick emulator systemc xilinx qemu nvdla, nvidia deep learning accelerator gpgpu-sim ffgpu ope ...

  2. KafKa简介和利用docker配置kafka集群及开发环境

    KafKa的基本认识,写的很好的一篇博客:https://www.cnblogs.com/sujing/p/10960832.html 问题:1.kafka是什么?Kafka是一种高吞吐量的分布式发布 ...

  3. Docker下Python Flask+Redis+MySQL+RQ队列简单配置

    本篇博文主要讲解Docker下使用RQ队列的通信配置,主要是网上的部分文章写的不太清楚,特写一篇 作者使用docker-compose.yml文件调度各部分文件Dockerfile,起初是这样写的 v ...

  4. 我对js数据类型的理解和深浅(copy)的应用场景

    本人毕业一所专科院校,所学专业是计算机应用技术,在大学时对前端有了一定的了解之后,觉得自己对前端的兴趣十分强烈,开始自学前端,一路上也是坎坎坷坷,也有想要放弃的时候,还好坚持了下来,并且从事前端开发已 ...

  5. Java程序执行过程及内存机制

    本讲将介绍Java代码是如何一步步运行起来的,其中涉及的编译器,类加载器,字节码校验器,解释器和JIT编译器在整个过程中是发挥着怎样的作用.此外还会介绍Java程序所占用的内存是被如何管理的:堆.栈和 ...

  6. CC-BY-NC-SA （创作共用许可协议）

    创作共用许可协议 (英语:Creative Commons license,简称CC许可) 是一种公共版权许可协议,其允许分发受版权保护的作品. 一个创作共用许可,用于一个作者想给他人分享.使用.甚至 ...

  7. Mysql锁机制--悲观锁和乐观锁

    1. 悲观锁简介 悲观锁(Pessimistic Concurrency Control,缩写PCC),它指的是对数据被外界修改持保守态度,因此,在整个数据处理过程中, 将数据处于锁定状态.悲观锁的实 ...

  8. 高手查看Linux系统用户命令-测评

    一.Linux查看用户命令-测评 查看linux所有的用户 cat /etc/passwd 查看普通用户.系统用户(1-499) root:x:0:0:root:/root:/bin/bash < ...

  9. vue 分支结构

    分支循环结构 分支循环结构指令 v-if v-else v-else-if v-show v-if 指令 可以直接在元素中添加指令,添加判断的值 最后运行可以得到结果是:  v-show v-show ...

  10. centos 7 安装vncserver遇到错误解决

    安装网上一般的教程安装配置,略. 执行 systemctl start vncserver@:1.service 启动服务报错: Job for vncserver@:1.service failed ...