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

之前也用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. Android OpenSL ES 开发：使用 OpenSL 播放 PCM 数据

    OpenSL ES 是基于NDK也就是c语言的底层开发音频的公开API,通过使用它能够做到标准化, 高性能,低响应时间的音频功能实现方法. 这次是使用OpenSL ES来做一个音乐播放器,它能够播放m ...

  2. [Swift]LeetCode526. 优美的排列 | Beautiful Arrangement

    Suppose you have N integers from 1 to N. We define a beautiful arrangement as an array that is const ...

  3. [Swift]LeetCode950. 按递增顺序显示卡牌 | Reveal Cards In Increasing Order

    In a deck of cards, every card has a unique integer.  You can order the deck in any order you want. ...

  4. Django中使用geetest实现滑动验证

    下载第三方模块 导入模块social-auth-app-django 和geetest 提前去官网下载gt.js或者引入http://static.geetest.com/static/tools/g ...

  5. BBS论坛（九）

    9.1.权限和角色模型定义 (1)cms/models class CMSPermission(object): ALL_PERMISSION = 0b11111111 # 1.访问者的权限 VISI ...

  6. 《HelloGitHub》第 12 期

    <HelloGitHub>第 12 期 兴趣是最好的老师,<HelloGitHub>就是帮你找到兴趣! 简介 最开始我只是想把自己在浏览 GitHub 过程中,发现的有意思.高 ...

  7. 精读《useEffect 完全指南》

    1. 引言 工具型文章要跳读,而文学经典就要反复研读.如果说 React 0.14 版本带来的各种生命周期可以类比到工具型文章,那么 16.7 带来的 Hooks 就要像文学经典一样反复研读. Hoo ...

  8. vue-eleme 学习笔记

     # watch 用法 (1).普通的watch <div style="margin-top: 60px;"> {{common}} <button @clic ...

  9. RabbitMQ消息队列（六）-消息任务分发与消息ACK确认机制（.Net Core版）

    在前面一章介绍了在.Net Core中如何使用RabbitMQ,至此入门的的部分就完成了,我们内心中一定还有很多疑问:如果多个消费者消费同一个队列怎么办?如果这几个消费者分任务的权重不同怎么办?怎么把 ...

  10. 想晋级高级工程师只知道表面是不够的！Git内部原理介绍

    本文由云+社区发表 作者:腾讯工蜂用户:王二卫 从不一样的视角了解git,以便更好的使用git 一.git & git 版本库认识 git 是一个内容寻址的文件系统,其核心部分是一个简单的键值 ...