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

之前也用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. 【逆元】HDU-1576

    逆元: 同余方程 ax≡1(mod n),gcd(a,n) = 1 时有解,这时称求出的 x 为 a 的对模n的乘法逆元.(注意:如果gcd(a,n)如果不等于1则无解),解法还是利用扩展欧几里得算法 ...

  2. 快速理解Token，Cookie，Session

    在Web应用中,HTTP请求是无状态的.即:用户第一次发起请求,与服务器建立连接并登录成功后,为了避免每次打开一个页面都需要登录一下,就出现了cookie,Session. Cookie Cookie ...

  3. Spring Data Jpa接口简介

    Repository接口 public interface Repository<T, ID> {....} 提供了按方法名称的查询方式: 提供了@Query的查询方式 可能遇到的错误: ...

  4. Guava 源码分析（Cache 原理 对象引用、事件回调）

    前言 在上文「Guava 源码分析(Cache 原理)」中分析了 Guava Cache 的相关原理. 文末提到了回收机制.移除时间通知等内容,许多朋友也挺感兴趣,这次就这两个内容再来分析分析. 在开 ...

  5. redis 系列26 Cluster高可用 (1)

    一.概述 Redis集群提供了分布式数据库方案,集群通过分片来进行数据共享,并提供复制和故障转移功能.在大数据量方面的高可用方案,cluster集群比Sentinel有优势.但Redis集群并不支持处 ...

  6. 根据bootstrap框架实现移动端触摸滑动的方法

    有一个移动端的项目要求用jquery+bootstrap,其中有一个轮播图,需求是要求可以手触滑动,但是bootstrap中没有写手触滑动的方法,自己琢磨着写了出来,供大家参考. $(function ...

  7. 【Python3爬虫】猫眼电影爬虫（破解字符集反爬）

    一.页面分析 首先打开猫眼电影,然后点击一个正在热播的电影(比如:毒液).打开开发者工具,点击左上角的箭头,然后用鼠标点击网页上的票价,可以看到源码中显示的不是数字,而是某些根本看不懂的字符,这是因为 ...

  8. 基于IdentityServer4 实现.NET Core的认证授权

    IdentityServer4是什么? IdentityServer4是基于ASP.NET Core实现的认证和授权框架,是对OpenID Connect和OAuth 2.0协议的实现. OpenID ...

  9. 【转载】asp.net core 2.0的认证和授权

    在asp.net core中,微软提供了基于认证(Authentication)和授权(Authorization)的方式,来实现权限管理的,本篇博文,介绍基于固定角色的权限管理和自定义角色权限管理, ...

  10. Mybatis【配置文件】就是这么简单

    配置文件和映射文件还有挺多的属性我还没有讲的,现在就把它们一一补全 映射文件 在mapper.xml文件中配置很多的sql语句,执行每个sql语句时,封装为MappedStatement对象,mapp ...