基于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)
STEVESTEVE
上一篇 2022年 11月 7日 下午5:48
下一篇 2022年 11月 8日 下午5:30

相关推荐

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

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

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

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

    2022年 8月 18日
    286
  • PHP:in_array()和array_search()的奇葩问题

    近期做项目,发现使用array_search出现的问题——搜索出错,元素分明有在数组中,但给出的结果是FALSE! 操作逻辑如下 从数据库中取出符合条件的字符串的用户id合集 使用foreach遍历这些对象 将对象中的字符串使用exp…

    2022年 11月 20日
    143
  • PHP:单例模式的多功能数据库工具类

    此数据库工具类根据传智播客2018年8月的PHP教程所设计。

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

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

    2022年 10月 25日
    83

发表回复

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