jQuery ajax实现文件上传

蔚落 2021-07-26 23:31 510阅读 0赞

# jQuery+ajax实现文件上传 #

我在写jQuery接口上传文件的时候，遇到一个特头疼的问题，那就是上传图片，刚开始那我以为一个简单的form表单就搞定了，没想到写了两个小时都没写出来，心情那个烦躁啊，有一种想砸电脑的冲动，最后那我就用下面的方法实现了这个功能，突然发现好简单，分享给大家！废话不多说，直接上干货，代码走起。。。。

### 代码块 ###

### html代码段 ###

<input type="file" name="photo" id="photo" value="" placeholder="免冠照片">
    <input type="button" οnclick="postData();" value="下一步" name="" style="width:100px;height:30px;">

### jQuery代码段 ###

<script type="text/javascript">
    function postData(){
        var formData = new FormData();
        formData.append("photo",$("#photo")[0].files[0]);
        formData.append("service",'App.Passion.UploadFile');
        formData.append("token",token);
        $.ajax({
            url:'http://www.baidu.com/', /*接口域名地址*/
            type:'post',
            data: formData,
            contentType: false,
            processData: false,
            success:function(res){
                console.log(res.data);
                if(res.data["code"]=="succ"){
                    alert('成功');
                }else if(res.data["code"]=="err"){
                    alert('失败');
                }else{
                    console.log(res);
                }
            }
        })
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，510人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery ajax+spring mvc上传文件

导入commons-fileupload-1.2.2.jar和commons-io-2.4.jar及spring的一些jar包创建上传处理类UploadAction

灰太狼/ 2023年10月16日 22:49/ 0 赞/ 57 阅读

相关 put ajax 文件上传,Jquery/ajax 如何以put方式上传文件

用户提问 using System.Data.OleDb; using System.Data; namespace \_211 \{ /// /// DBQuery 的摘要

我会带着你远行/ 2022年09月03日 11:20/ 0 赞/ 234 阅读

相关 ajax jquery 实现图像上传,使用jQuery ajax上传图像的建议

我有一个包含3个输入的表单： \[1\]用于状态更新的文本输入字段 \[2\]文件上传(用于图片) \[3\]文本输入字段，用于附加链接用户根据自己想做什么在每个选项

ゝ一纸荒年。/ 2022年09月03日 06:23/ 0 赞/ 195 阅读

相关利用JQuery的ajax请求实现文件上传

今天给大家介绍一下如何利用JQuery的ajax请求实现文件上传功能。主要需要引入一个js文件，然后调用js文件中的ajaxFileUpload请求就可以实现异步文件上传机

比眉伴天荒/ 2022年07月14日 20:56/ 0 赞/ 193 阅读

相关利用JQuery的ajax请求实现文件上传

今天给大家介绍一下如何利用JQuery的ajax请求实现文件上传功能。主要需要引入一个js文件，然后调用js文件中的ajaxFileUpload请求就可以实现异步文件上传机

墨蓝/ 2022年07月14日 20:56/ 0 赞/ 336 阅读

相关 ajax 实现文件上传

我们知道表单提交实现文件上传时，需要将表单的`enctype`值设置为`multipart/form-data` <form enctype="multipart/f

悠悠/ 2022年04月23日 14:40/ 0 赞/ 321 阅读

相关 jquery ajax上传文件

<form action="" id="upfile" name="upfile" method="post" enctype="multipart/form-data

小咪咪/ 2022年04月11日 08:22/ 0 赞/ 240 阅读

相关 jQuery Ajax文件上传(php)

如何实现jQuery的Ajax文件上传，PHP如实文件上传. AJAX上传文件，PHP上传文件。【PHP文件上传】在开始之前，我觉得是有

àì夳堔傛蜴生んèń/ 2022年03月09日 12:39/ 0 赞/ 406 阅读

相关 jQuery ajax实现文件上传

jQuery+ajax实现文件上传我在写jQuery接口上传文件的时候，遇到一个特头疼的问题，那就是上传图片，刚开始那我以为一个简单的form表单就搞定了，没想到写了两

蔚落/ 2021年07月26日 23:31/ 0 赞/ 511 阅读

相关 ajax实现文件上传

没有使用插件一、单文件上传 <!DOCTYPE html> <html> <head lang="en">

逃离我推掉我的手/ 2021年06月26日 16:06/ 0 赞/ 583 阅读