基于JQuery的AJAX异步文件上传方法

对于许多初学者而言,上传表单很容易,但上传文件就麻烦了。

这里给出一个简单的方法,供参考。

HTML部分

<form action="/" method="post" enctype="multipart/form-data">
<input id="file" name="file" type="file" accept=".jpg,.png,.jpeg,.gif" onchange="uploadImg()">
</form>

谨记:action可以留空,enctype要设为“multipart/form-data”

Javascript部分

function uploadImg(e) {
    let file=$("input[name='file']").prop("files")[0];//使用JQuery方法获得文件,记住最后一定要加[0],否则得到的必然是[Object filelist]
    let url="你的上传地址";
    const formData = new FormData();//建立FormData用来传输数据
    formData.append("file",file);
    $.ajax({
        url:url,
        type:'POST',
        async: false,
        data: formData,
        dataType:'json',
        cache: false, // 上传文件无需缓存
        processData : false, // 使数据不做处理
        contentType : false, // 不要设置Content-Type请求头
        success: function(data){
            console.log(data);//打印返回的参数
            if (data.status == 'OK') {
            }
        },
        error:function(response){
            console.log(response);
        }
    });
}

PHP部分

var_dump($_FILES)

如果不出意外,你的前端就会把上传文件的信息从控制台打印出来了。

原创文章,作者:STEVE,如若转载,请注明出处:https://shinecloud.com.cn

(0)
上一篇 2022年 11月 7日 下午5:48
下一篇 2022年 11月 8日 下午5:30

相关推荐

  • PHP连接数据库:使用类和函数两种方式

    PHP连接数据库是非常常用的功能,在初学时,一般使用函数来连接。 函数的方式非常简单,如果不需要报错信息的话,只有2行代码,加上报错信息,也只有6行而已。 我们尝试定义一个类来连接数据库,如下所示: 好家伙,...

    2022年 10月 20日
    54
  • 实战:最麻烦的群晖SHR+Btrfs阵列数据救援

    开篇语 这篇文章与其说是教程,不如说是一次经验总结。 我并不是专业数据恢复人员,只是在互联网上搜索各类教程,然后尝试,最终获得了成功! 前前后后一共折腾了5天,有很多次都不想搞了,但我抱着一个信念:只要硬...

    2022年 8月 18日
    100
  • PHP类:成员、静态、常量的区别和选择

    PHP的类中,分为常量、静态、成员三类,初学者很容易搞混乱,笔者在学习之时也深感头疼,觉得不好理解。 分享一下学习的总结,如有错误之处敬请指正。 权限修饰符 权限修饰符用来声明变量的权限,共有三种。 public...

    2022年 10月 19日
    49
  • PHP:数组变量的序列化和反序列化

    序列化和反序列化是PHP操作数据库、读写文件时常见的操作。 序列化,就是将PHP的变量转化为可保存的、可传输的字符串的过程; 反序列化,则是将(序列化的)字符串转化回变量。 比如,我们需要将某学生的个人信息写...

    2022年 10月 25日
    35
  • PHP:设计模式之单例模式及数据库案例

    设计模式的定义 设计模式(Design pattern)是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性... 简而言之,就是前人...

    2022年 10月 23日
    28

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注