其实呢，文件上传的插件很多，可是现在做的东西要求尽量少用插件，所以就自己写了一下。

之前也用node写过对文件处理方面的东西，这次用php写着试一下。

a.html文件

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/html">

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<html>

<head>

<title></title>  

</head>  

<body>

<form enctype="multipart/form-data" id="uploadImg">

    上传文件:

    <input name="file" type="file" id="file">

</form>

</body>

</html>

<script src="jquery.js"></script>

<script>

    $(function(){

        $('input[type="file"]').on('change', function(){

            var file = this.files[0];

            var formData = new FormData($('#uploadImg')[0]);

            formData.append('file', file);

            console.log(formData.get('file'))

            $.ajax({

                url: 'b.php',

                type: 'POST',

                cache: false,

                data: formData,

                //dataType: 'json',

                //async: false,

                processData: false,

                contentType: false,

            }).done(function(res) {

                console.log(res)

            }).fail(function(res) {

                console.log(res)

            });

        });

    })

</script>

b.php文件：

<?php

    //print_r($_FILES);

    $uptypes=array(

        'image/jpg',

        'image/jpeg',

        'image/png',

        'image/pjpeg',

        'image/gif',

        'image/bmp',

        'image/x-png'

    );

    $max_file_size=200000000;     //上传文件大小限制, 单位BYTE

    $file=$_FILES["file"];

    $fileName=$file["name"];

    $filetype = $file["type"];

    $filesize = $file["size"];

    if(!in_array($filetype, $uptypes)){            // 文件类型判断

        echo "文件类型不符!";

        exit;

    }

    if($filesize > $max_file_size){                // 文件大小判断

        echo "文件太大!";

        exit;

    }

    if (!is_dir("image/")) {                    //创建路径

        mkdir("image/");

    }

    $url = "image/";

    //当文件存在

    if (file_exists($url.$fileName)) {

        //echo $fileName." already exists.";

        echo $url.$fileName;

    }else{//当文件不存在

        $url=$url.$fileName;

        move_uploaded_file($_FILES["file"]["tmp_name"],$url);

        echo $url;

    }

?>

在这当中也遇到了几个问题

1.在PHP中通过print_r($_FILES)打印时，有时候formData里面的参数type会为空，而在前端打印的formData.get('file')里是有type的值的，原因是PHP导入文件(我是导的图片)有大小限制

解决方法：在php.ini中，搜索upload_max_filesize（默认为2M），修改这个值，重启服务器即可。

2:在通过ajax进行数据请求时，console.log(formData)对象为空，而且在append后还是为空，是因为属性不是直接挂载在你这个FormData，可以通过get方法进行获取。

参考：https://segmentfault.com/q/1010000010087308

3:在一般情况下使用ajax请求，processData（默认为true）不需要设置，但是当使用fromdata上传文件时，发送的对象不需要转化为对象，所以必须设置为true。

通过fromdata实现上传文件的更多相关文章

  1. 关于fromdata的上传文件问题

    <div <label>上传pdf</label> <input id="fileId" type="file" accep ...

  2. 通过HTTP协议上传文件

         HTTP是很常见的协议,虽然用得很多,但对细节的了解却是很浅,这回通过向服务端上传文件信息来理解细节.网络库的选择:1.WinHTTP是windows下常用的库:2.CURL是广受喜爱的开源 ...

  3. NSURLSession／NSURLConnection的上传文件方法（已做了更新）

    最好的学习方法就是 领悟 + 证悟. 此篇文章的理论基础主要是与HTTP网络通信协议相关.为集中精力,可以先把TCP/IP协议这些置之不理,也就是先只关注HTTP的请求和响应的结构.HTTP完整的原理 ...

  4. iOS上传文件，有关http上传协议-RFC1867

    以上是抓包HTML input file标签上传的内容 只要模拟上面http 的header跟body就可以成功. 整体说明: post 上传文件时,以在http body里面带参数,参数的格式,根据 ...

  5. iOS开发——网络Swift篇&NSURLSession加载数据、下载、上传文件

    NSURLSession加载数据.下载.上传文件   NSURLSession类支持三种类型的任务:加载数据.下载和上传.下面通过样例分别进行介绍.   1,使用Data Task加载数据 使用全局的 ...

  6. Swift - 使用NSURLSession加载数据、下载、上传文件

    NSURLSession类支持三种类型的任务:加载数据.下载和上传.下面通过样例分别进行介绍. 1,使用Data Task加载数据 使用全局的sharedSession()和dataTaskWithR ...

  7. 使用FormData，进行Ajax请求并上传文件

    前段时间做了个手机端的图片上传,为了用户体验,用ajax交互,发现了FromData对象,这里有详细解释https://developer.mozilla.org/zh-CN/docs/Web/API ...

  8. Flask -- 请求、上传文件、Cookies

    请求对象 from flask import request request.method #值为form表单提交的method 'POST'. 'GET'等 #如果值为'POST'或'PUT',则可 ...

  9. Django上传文件和上传图片(不刷新页面)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. [Swift]LeetCode655. 输出二叉树 | Print Binary Tree

    Print a binary tree in an m*n 2D string array following these rules: The row number m should be equa ...

  2. mysql 主主+ Keepalived 高可用

    这是在mysql互为主从的基础上做的 yum -y install keepalived    #两台机器上都装 配置Keepalived主从, vrrp_instance VI_1 { state ...

  3. ThinkInJava之内部类

    一:内部类概述 将一个类的定义放在另一个类的内部,这就是内部类.内部类是Java一种非常有用的特征,因为他允许你把一些逻辑相关的数据组织在一起,并控制它的可见性. 二:内部类的创建 我们都知道类的创建 ...

  4. Tomcat相关面试题，看这篇就够了！保证能让面试官颤抖！

    Tomcat相关的面试题出场的几率并不高,正式因为如此,很多人忽略了对Tomcat相关技能的掌握. 这次整理了Tomcat相关的系统架构,介绍了Server.Service.Connector.Con ...

  5. Python内置函数(62)——sum

    英文文档: sum(iterable[, start]) Sums start and the items of an iterable from left to right and returns ...

  6. JVM基础系列第14讲：JVM参数之GC日志配置

    说到 Java 虚拟机,不得不提的就是 Java 虚拟机的 GC(Garbage Collection)日志.而对于 GC 日志,我们不仅要学会看懂,而且要学会如何设置对应的 GC 日志参数.今天就让 ...

  7. 听说，霸都.NET技术社区准备搞线下聚会了？

    嗨,你听说了没有?霸都.NET技术社区准备搞线下聚会了! 啥时候的事情啊? 最近才知道的消息啊! 那你是从哪里知道的消息呢? .NET Core项目实战交流群(637326624)啊! 那这次合肥.N ...

  8. 【Maven】---Nexus私服配置Setting和Pom

    maven---nexus私服配置setting和pom 上一遍博客已经在linux服务器上,搭建好nexus私服了,博客地址:Linux搭建Nexus3.X私服 现在就需要配置setting.xml ...

  9. 有道云笔记 - Markdown模板(文首附markdown源码，即.md文件)

    有道云笔记 - Markdown模板 附 本文的Markdown源码镜像: https://github.com/yanglr/AlgoSolutions/blob/master/Youdao_Not ...

  10. 【朝花夕拾】Android性能篇之（五）Android虚拟机

    前言 Android虚拟机的使用,使得android应用和Linux内核分离,这样做使得android系统更稳定可靠,比如程序中即使包含恶意代码,也不会直接影响系统文件:也提高了跨平台兼容性.在And ...