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

之前也用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. win7系统下dos界面无法自由调整大小

    刚开始在win7系统,在dos界面下做MySQL的实验,很多数据不能显示界面上,只能显示固定的大小,以为这是系统的原因,后来在网上查找了一些资料.终于发现可以自由调节dos界面大小的方法.下面给出截图 ...

  2. Python内置函数(34)——isinstance

    英文文档: isinstance(object, classinfo) Return true if the object argument is an instance of the classin ...

  3. ORA-01034: ORACLE not available问题

    通过DBCA新建一个数据库后,执行以下命令报错:SQL> shutdown immediate;ERROR:ORA-01034: ORACLE not availableORA-27101: s ...

  4. EF实现批量插入

    Z.EntityFramework.BulkInsert EntityFramework 最被人诟病的地方就是它的性能,处理大量数据时的效率.此种条件下,通常会转回使用 ADO.NET 来完成任务.而 ...

  5. [工具向]__关于androidstudio工具使用过程中学习到的一些知识点简记

    前言 在我学习android开发课程的过程中,我们通常只会关注编程语言上面的一些知识点与问题,而忽略了开发工具的使用上的一些遇到的一些知识,其实每一款IDE工具都是集编程语言大成而开发出来的,其中有很 ...

  6. 从0打卡leetcode之day 5 ---两个排序数组的中位数

    前言 我靠,才坚持了四天,就差点不想坚持了.不行啊,我得把leetcode上的题给刷完,不然怕是不好进入bat的大门. 题目描述 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2 . ...

  7. 行为驱动：Cucumber + Selenium + Java(一) - 环境搭建

    1.1 什么是行为驱动测试 说起行为驱动,相信很多人听说过. 行为驱动开发-BDD(Behavior Driven Development)是一个诞生于2003年的软件开发理念.其关键思想在于通过与利 ...

  8. spring security使用自定义登录界面后，不能返回到之前的请求界面的问题

    昨天因为集成spring security oauth2,所以对之前spring security的配置进行了一些修改,然后就导致登录后不能正确跳转回被拦截的页面,而是返回到localhost根目录. ...

  9. [九]JavaIO之ObjectInputStream 和 ObjectOutputStream

    序列化 序列化是指把Java对象保存为二进制字节码的过程,Java反序列化是指把二进制码重新转换成Java对象的过程 序列化是一种轻量级的持久化,对象都是存活在内存中的,当JVM运行结束,对象便不存在 ...

  10. 痞子衡嵌入式：ARM Cortex-M文件那些事（2）- 链接文件(.icf)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是嵌入式开发里的linker文件. 在前一节课源文件(.c/.h/.s)里,痞子衡给大家系统地介绍了source文件,source文件是嵌入 ...