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

之前也用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. 深入理解Spring Redis的使用 (七)、Spring Redis 使用 jackson序列化 以及 BaseDao代码

    之前在介绍Spring Redis进行存储的时候,都是通过RedisTemplate中的defaultSerializer,即JdkSerializationRedisSerializer.通过Jdk ...

  2. WEB安全系列之如何挖掘任意用户登录漏洞

    WEB安全系列之如何挖掘任意用户登录漏洞 0x01  前言        每周两篇文章打卡.坏蛋100块钱都不给我,好坏好坏的. 0x02  什么是任意用户登录漏洞   几乎每个网站都有自己的会员系统 ...

  3. js 生成随机炫彩背景

    在浏览 https://ghost.org/xxxx/ 时. 可以使用 background-size: cover; 加上很小的像素图,放大后实现炫彩背景效果. 使用 js canvas 随机生成小 ...

  4. [Swift]LeetCode504. 七进制数 | Base 7

    Given an integer, return its base 7 string representation. Example 1: Input: 100 Output: "202&q ...

  5. [Swift]LeetCode924.尽量减少恶意软件的传播 | Minimize Malware Spread

    In a network of nodes, each node i is directly connected to another node j if and only if graph[i][j ...

  6. 7.Git分支-分支简介、分支创建、分支切换

    1.分支简介 几乎所有的版本控制系统都支持某种形式的分支.使用分支意味着可以把你的工作从开发主线上分离开来,以免影响开发主线.Git的分支是其必杀技,它相对于其它版本控制系统来说,具有难以置信的轻量性 ...

  7. BBS论坛（十四）

    14.1注册完成跳到上一个页面 (1)front/form.py # front/forms.py __author__ = 'derek' from ..forms import BaseForm ...

  8. 干货 | Java8 新特性教程

    本教程翻译整理自 https://github.com/winterbe/java8-tutorial 本教程首发自个人网站: https://www.exception.site/java8/jav ...

  9. 死磕 java集合之LinkedHashMap源码分析

    欢迎关注我的公众号"彤哥读源码",查看更多源码系列文章, 与彤哥一起畅游源码的海洋. 简介 LinkedHashMap内部维护了一个双向链表,能保证元素按插入的顺序访问,也能以访问 ...

  10. DOM事件第一弹

    近期温习了部分w3c上关于DOM事件的规范,发现以前有些模糊的概念更加清晰,以及受到罗胖(罗辑思维)的影响,很是想分享自己的了解的东西,希望大家给予指正或补充. 一.事件类型 参数 事件接口 初始化方 ...