首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何用jquery中的formData在laravel中上传文件

如何用jquery中的formData在laravel中上传文件
EN

Stack Overflow用户
提问于 2017-11-18 00:03:07
回答 3查看 4.7K关注 0票数 1

我正在使用laravel5.4和jquery上传文件和一些表单数据。

我使用下面的代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function submitDocument(){
    var formData = new FormData(); // Currently empty
    var _token = $("#_token").val().trim();
    formData.append('title', $("#title").val());
    formData.append("doc",$("#doc")[0].files[0]);
    $.ajax({
      url: "documents",
      method: "post",
      data:{_token,formData},
    }).done(function(data) {

    });
    return false;// Not to submit page
}

我正在犯错误

未登录的TypeError:非法调用

我怎么才能解决这个问题?提前谢谢你的时间。

我可以通过以下方法获得formData的价值

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
console.log(formData.get('title'));
console.log(formData.get('doc'));

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-11-18 01:14:50

尝试在代码中添加processData: false, contentType: false

用以下内容替换您的脚本:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function submitDocument(){
var formData = new FormData(); // Currently empty
var _token = $("#_token").val().trim();
formData.append('title', $("#title").val());
formData.append("doc",$("#doc")[0].files[0]);
$.ajax({
  url: "documents",
  method: "post",
  data:{_token,formData},
  cache : false,
  processData: false,
  contentType: false
}).done(function(data) {

});
return false;// Not to submit page
}

默认情况下,作为对象传入数据选项的数据将被处理并转换为查询字符串,并与默认的内容类型“application/x form-urlencoded”相匹配。如果要发送DOMDocument或其他未经处理的数据,请将此选项设置为false。

票数 3
EN

Stack Overflow用户

发布于 2017-11-20 05:49:12

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
$(document).ready(function() {
    var url = "{{ url('/admin/file') }}"; 
    var options = { 
            type: 'post',
            url: url,       
            headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
            dataType: 'doc',
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                alert('Ok');
            },
            error: function (data) {
                alert('Error');
            }
    }; 
    $('#save').on('click', function() { 
        $("#form").ajaxSubmit(options); 
        return false; 
    }); 
}); 
</script>
票数 1
EN

Stack Overflow用户

发布于 2017-11-20 05:37:56

试试这边

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(document).ready(function (){
$("#form").on('submit',(function(e){
        e.preventDefault();
        var formdata = new FormData(this);
        var _token = $("#_token").val().trim();
        formData.append('title', $("#title").val());
        formData.append("doc",$("#doc")[0].files[0]);
        $.ajax({
            url: "/site/url",
            type: "POST",
            data:{token:_token,formData},
            contentType: false,
            cache: false,
            processData:false,
            success: function(data){

            },
        });
    }));});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47363928

复制
相关文章
ajax文件上传-FormData()
HTML: 1 <form action=""> 2 3 <input type="file" id="file1" name=""> 4 5 <br> 6 7 <input type="file" id="file2" name=""> 8 9 <br> 10 11 <input type="button" value="保存"> 12 13
ProsperLee
2018/10/24
5.1K0
ajax文件上传-FormData()
JQuery文件上传插件ajaxFileUpload在Asp.net MVC中的使用
0 ajaxFileUpload简介 ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比较多,我把我自己使用的ajaxFileUpload文件上传到博客园上了,想要使用的朋友可以下载:http://files.cnblogs.com/files/fonour/ajaxfileupload.js。 整个插件源码不到200行,实现非常简单,大致原理就是通过js动态创建隐藏的表单,然后进行提交操作,达到
阿炬
2018/05/11
3.2K0
vue 使用 axios 上传文件 — FormData
在此主要介绍 如何使用 formData 对象上传单文件和多文件,FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单、模拟表单提交,当然最大的优势就是可以上传二进制文件。
全栈程序员站长
2022/09/07
3K0
Ajax文件上传时:Formdata、File、Blob的关系
“Formdata”接口提供了一种表示表单数据的键值对 key/value 的构造方式,并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去。
房东的狗丶
2023/02/17
3.2K0
使用FormData对象添加字段方式上传文件
<input type="file" id="file"> var formData = new FormData(); formData.append('file',$('#file')[0].files[0]); $.ajax({     url: '',     type: 'POST',     cache: false,     data: formData,     processData: false,     contentType: false }).done(function(res) { }).fail(function(res) {});
双面人
2019/06/13
2.2K0
在Koa.js中实现文件上传的接口
文件上传是一个基本的功能,每个系统几乎都会有,比如上传图片、上传Excel等。那么在Node Koa应用中如何实现一个支持文件上传的接口呢?本文从环境准备开始、最后分别用 Postman 和一个HTML页面来测试。
张张
2019/12/27
4.8K0
Laravel操作上传文件的方法
$file=$request->file('file'); 2、获取上传文件的文件名(带后缀,如abc.png)
双面人
2020/03/23
1.5K0
Flask中的AJAX文件上传
表单: <form method="post" enctype=multipart/form-data id='form1'> <input class="form-control" id="image" name="image" required type="file"> <button type="submit" class="btn btn-default" id='submit1'>提交</button> </form> JS: <script> $('#image').change
YingJoy_
2018/09/14
2.7K0
HTML5 FormData 方法介绍以及实现文件上传
XMLHttpRequest 是一个浏览器接口,通过它,我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月,XMLHttpRequest Level 2 草案提出来了,相对于上一代,它有一些新的特性,其中 FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单、模拟表单提交,当然最大的优势就是可以上传二进制文件。下面就具体介绍一下如何利用 FormData 来上传文件。
全栈程序员站长
2022/11/17
2.1K0
HTML5 FormData 方法介绍以及实现文件上传
formData原生实现图片上传
参考:https://juejin.im/post/5aa01068f265da23970669ce
全栈程序员站长
2022/07/11
2K0
jquery和springBoot文件上传
完整源码:https://gitee.com/VampireAchao/simple-scaffold.git
阿超
2022/08/17
1K0
jquery和springBoot文件上传
ActFramework中实现文件上传
ActFramework中实现文件上传 文件上传是一种常见的web应用功能。这篇小灶讲述如何在ActFramework中实现文件上传,包括单文件上传和多文件上传两种情况。 首先我们定义一个Model类Document用于演示单文件上传的情况: public class Document implements SimpleBean { public String desc; public String subject; public File attachment; publ
老码农
2018/06/27
6220
Vue中实现文件上传
为工具网 https://tool.misiyu.cn/qrcode 增加二维码上传识别功能。
无道
2019/11/12
2.9K0
在 Laravel 中编写高级的 Artisan 命令
在上一篇教程中,学院君向大家介绍了什么是 Artisan 命令,系统内置的 Artisan 命令,以及如何编写一个简单的 Artisan 命令。我们完全可以将命令行看作与 Web 应用同等的控制台应用(实际上,Laravel 底层也是这么做的),它具备自己的路由、Kernel、输入、控制器(命令类)、输出。因此,在这篇教程中,我们将更进一步,一起来看下如何编写更加高级的 Artisan 命令,比如带输入参数、选项,以及能够与用户互动,输出图表/进度条的 Artisan 命令。
学院君
2021/01/08
8.3K0
Laravel 文件上传功能实现
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/78830129
泥豆芽儿 MT
2018/09/11
4.3K0
Laravel 文件上传功能实现
【jquery ajax】实现文件上传提交
✍️ 作者简介: 前端新手学习中。 💂 作者主页: 作者主页查看更多前端教学 🎓 专栏分享:css重难点教学 Node.js教学 从头开始学习 ajax学习 在这里看原生ajax实现文件上传 文章目录 JQuery实现文件上传提交   定义UI结构   验证是否选择了文件   向FormData中追加文件并发起ajax请求   jquery实现loading效果   完整代码 JQuery实现文件上传提交   定义UI结构 <script src="https://cdn.
坚毅的小解同志的前端社区
2022/11/28
4K0
【jquery ajax】实现文件上传提交
在 Laravel 应用中构建 GraphQL API
昨天我们学习了 在 Visual Code 中搭建 Laravel 环境,现在我们来学习 Facebook 的 GraphQL 。
猿哥
2019/07/24
3.4K0
点击加载更多

相似问题

jQuery Ajax文件上传formData

12

基于Laravel后端的资源+ FormData文件上传

10

用jquery和FormData上传文件

12

jquery文件上传formData输入名称

13

在Express中访问文件上传formData

13
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文