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

<!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. 理解java底层通讯协议

    引言: 本周自己重新对底层通讯方式进行了学习,在此做一个输出. 分别从客户端发送多个请求的需求角度与服务端接收多个连接发送请求的需求角度,剖析4种基于java自身技术实现的消息方式通讯所带来的影响,解 ...

  2. 【题解】Railway [Uva10263]

    [题解]Railway [Uva10263] 传送门:\(\text{Railway [Uva10263]}\) [题目描述] 给出点 \(M\) 以及一个由 \(n\) 条线段依次相连的类曲形图(由 ...

  3. 【题解】「SP867」 CUBES - Perfect Cubes

    这道题明显是一道暴力. 暴力枚举每一个 \(a, b, c, d\) 所以我就写了一个暴力.每个 \(a, b, c, d\) 都从 \(1\) 枚举到 \(100\) #include<ios ...

  4. 测试web-view，实现小程序和网页之间的切换

    官方有句提醒:个人类型与海外类型的小程序暂不支持使用 测试条件: 1.小程序后台管理中,进入"开发设置",设置一个业务域名(注意:不是设置服务器域名).比如 https://tes ...

  5. 使用公钥私钥加密实现单点登录(SSO)

    Oauth2+Gateway+springcloud+springcloud-alibaba-nacos+jwt ,使用公钥私钥加密实现单点登录(OSS) github地址点这里 注意事项 GET: ...

  6. python爬虫--用xpath爬豆瓣电影

    步骤 将目标网站下的页面抓取下来 将抓取下来的数据根据一定规则进行提取   具体流程 将目标网站下的页面抓取下来 1. 倒库 import requests 2.头信息(有时候可不写) headers ...

  7. Spring MVC或Spring Boot配置默认访问页面不生效？

    相信在开发项目过程中,设置默认访问页面应该都用过.但是有时候设置了却不起作用.你知道是什么原因吗?今天就来说说我遇到的问题. 首先说说配置默认访问页面有哪几种方式. 1.tomcat配置默认访问页面 ...

  8. Maven笔记之核心概念及常用命令

    Maven的核心概念 Maven是一款服务于java平台的自动化构建工具. 自动化构建工具还有:make->ant->maven->gradle       1.约定的目录  2.P ...

  9. 记一次HBase的NotServingRegionException问题

    1. 问题 在hbase测试集群上,访问一些hbase表,均报类似下面的错误:region不可用 Wed Oct 28 14:00:56 CST 2020, RpcRetryingCaller{glo ...

  10. SpringBoot从入门到精通教程（七）

    今天,我们继续讲SpringBoot整合Redis ,也就缓存,它将与我们的Springboot整合 Redis 简介 Redis 是当前比较热门的NOSQL系统之一,它是一个开源的使用ANSI c语 ...