首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

通过ajax formData请求上传laravel中的.temp文件时,仅保存.pdf扩展文件

在Laravel中,可以使用AJAX和FormData对象来实现文件上传。当上传.temp文件时,我们可以通过后端代码来限制只保存.pdf扩展文件。

首先,前端代码可以如下所示:

代码语言:txt
复制
// HTML部分
<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="file" id="fileInput">
  <button type="submit">上传</button>
</form>

// JavaScript部分
<script>
  document.getElementById('uploadForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    var fileInput = document.getElementById('fileInput');
    var file = fileInput.files[0];
    
    var formData = new FormData();
    formData.append('file', file);
    
    // 发送AJAX请求
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 上传成功
        console.log(xhr.responseText);
      }
    };
    xhr.send(formData);
  });
</script>

接下来,我们需要在后端进行处理。在Laravel中,可以使用store方法来保存上传的文件,并使用getClientOriginalExtension方法获取文件的扩展名。然后,我们可以判断扩展名是否为.pdf,如果是,则保存文件,否则不保存。

代码语言:txt
复制
public function upload(Request $request)
{
    $file = $request->file('file');
    $extension = $file->getClientOriginalExtension();
    
    if ($extension === 'pdf') {
        $filename = $file->store('pdfs');
        // 保存成功
        return response()->json(['message' => '文件上传成功', 'filename' => $filename]);
    } else {
        // 扩展名不是.pdf,不保存文件
        return response()->json(['message' => '只能上传.pdf文件']);
    }
}

在上述代码中,store方法将文件保存在指定的存储路径(这里是pdfs文件夹),并返回保存后的文件路径。如果扩展名不是.pdf,则返回错误信息。

关于腾讯云相关产品,可以使用腾讯云对象存储(COS)来保存上传的文件。腾讯云COS是一种高可用、高可靠、强安全性的云端存储服务,适用于各种场景下的文件存储和数据备份。您可以通过以下链接了解更多关于腾讯云COS的信息:

请注意,以上答案仅供参考,具体实现方式可能因实际情况而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

基于 Laravel + Vue 组件实现文件异步上传

我们在上一篇教程已经演示了如何通过 Request 请求实例获取各种文本输入数据,但是还有一种输入数据我们没有涉及到,那就是文件上传。...我们可以通过 Request 请求实例提供 file 方法获取用户上传文件,并将其保存到指定目录从而完成文件上传,接下来,我们将从前端到后端实现一个完整用户上传文件功能,包括视图、路由、控制器部分代码...,每次发送 POST 请求时会自动带上它,这样经过 CSRF 保护中间件校验该请求头字段通过则认为是安全请求放行(具体原理不了解的话可以看 CSRF 防护教程)。...我们使用了 Storage::disk('public') 磁盘将上传文件保存到本地,关于该磁盘自定义配置信息可以去 config/filesystems.php 文件查看,我们将其保存到此磁盘原因是图片一般都是提供对外访问...,如果上传是其他格式私密文件,不想被外部访问,需要将其保存到 local 磁盘,你还可以将其保存到云存储服务,关于完整文件系统我们放到后面去讲,现在你只需了解保存到哪里,以及如何配置自定义路径。

2.6K20

laravel初次学习总结及一些细节

最近学习了laravel,先简单谈谈学习感受吧 刚开始一周多一点时间先把laravel开发文档看了一遍,,感觉刚开始接触感觉laravel目录与thinkphp又不一样,它们渲染模板方式也不一样...在laravel文档,学到了门面(接口)和契约(接口),还知道了中间件,csrf保护和blade视图模板及laravel验证(过滤进入应用 HTTP 请求提供了一套便利机制) 在学习完laravel5.3...在 ajax contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件 contentType: false,...在laravel如果出现了向后台提交数据不对情况,一定要先检查是否向后台提交了 _token':'{{csrf_token() 6....上传文件时候,在form表单上一定要加上enctype="multipart/form-data"属性,,要不然文件传不过去 7.

4.6K20
  • Web文件上传方法总结大全

    Ajax无刷新上传 Ajax无刷新上传方式,本质上与表单上传无异,只是把表单里内容提出来采用ajax提交,并且由前端决定请求结果回传后展示结果,不用像直接表单上传那样刷新和跳转页面。...当进行粘贴(右键paste/ctrl+v)操作,触发剪贴板事件’paste’,从系统剪切板获取内容,而系统剪切板数据在不同浏览器保存在不同位置: IE内核:windows.clipboardData...: 在drop事件触发后通过e.dataTransfer.files获取拖拽文件列表,在jQuery是e.originalEvent.dataTransfer.files 拖拽上传支持图片,文件对象...上传过程跟前面的方式相同,即:创建FormData对象并发起Ajax请求。 拍照上传 拍照上传可以是PC上摄像头拍照上传也可以是手机等移动设备拍照上传。...这里我列举几个注意点: 后台需要进行文件类型、大小、来源等验证 定义一个.htaccess文件,只允许访问指定扩展文件。 将上传文件生成一个随机文件名,并且加上此前生成文件扩展名。

    4.2K10

    Django之Ajax文件上传

    我们使用表单上传文件,必须让 表单 enctype 等于 multipart/form-data,form表单不支持发json类型contenttype格式数据,而ajax什么格式都可以发...上传数据存在哪里? 在你保存上传文件之前,数据需要被保存在某些地方。默认呢,如果一个上传文件小于2.5兆,Django会将上传东西放在内存里。...这意味着只要从内存读取数据并保存到硬盘上,所以很快。然而,如果一个上传文件太大,Django将将上传文件写到一个临时文件,这个文件在你临时文件路径。...默认是2.5兆 FILE_UPLOAD_TEMP_DIR:比FILE_UPLOAD_MAX_MEMORY_SIZE大文件将被临时保存地方。默认是系统标准临时路径。...默认是2.5兆 FILE_UPLOAD_TEMP_DIR:比FILE_UPLOAD_MAX_MEMORY_SIZE大文件将被临时保存地方。默认是系统标准临时路径。

    2.2K10

    Laravel 控制器中进行表单请求字段验证

    很多 Web 框架都对此功能专门提供了工具集,Laravel 也不例外,而且这个工具集异常丰富,基本上涵盖了目前主流所有验证规则,即使是一些非常个性化验证,也可以基于 Laravel 验证类扩展功能来自定义验证规则...作为一个灵活框架,Laravel 提供了多种方式对表单请求进行验证,你可以在控制器通过 $this->validate() 方法验证用户请求,也可以通过单独表单验证类定义验证规则,再将其注入到相应控制器方法...Ajax 请求错误信息提示 接下来我们来看 Ajax 请求验证错误信息获取和提示,我们以上一篇教程文件上传为例。...alert-danger">' + errors[0] + ''); }); } console.log(error); }); 这样当我们上传不符合条件文件...通过 Validator::make 方法进行验证 如果你使用过 Laravel 自带脚手架代码实现登录认证的话,你可能会留意到 RegisterController 对用户注册请求进行验证时候,使用是这样验证代码

    5.8K10

    JSON Web Token(JWT)教程:一个基于Laravel和AngularJS例子

    通过使用URI或URN命名避免发送者和接收方不属于封闭网络 JWT命名冲突。...在每个后续请求,由于用户数据存储在服务器上,服务器需要找到该会话并对其进行反序列化。 基于服务器认证缺点 难以扩展:服务器需要为用户创建一个会话并将其保存在服务器上某个位置。...跨源请求共享(CORS):当使用AJAX调用从另一个域(跨域,Cross-origin)获取资源,我们可能会遇到禁止请求问题,因为默认情况下,HTTP请求不包括跨域(Cross-origin)请求...创建一个POST请求,我们将尝试创建一个新用户并将其保存到数据库。...ngStorage 库,将token保存到浏览器本地存储,以便我们可以通过Authorization头(header) 在每个请求上发送它。

    30.5K10

    Java 单文件、多文件上传 实现上传进度条

    ),并且用 ajax 异步刷新,在当前界面显示上传文件 后端 首先 springmvc 配置文件要配置上传文件解析器: 其次在 pom.xml 要配置上传文件依赖 commons-io</groupId...('doc', file3); // ajax 代码... } 要想在当前界面显示上传文件,而不跳转,就利用 ajax 异步请求 不过需要注意是,我这里使用 FormData() 储存文件对象..., ajax 要配上这几个参数才可实现文件上传: $.ajax({  type: "post",  data: form, // FormData()对象 url: basePath+"/upload...[] file表示前端页面上传过来多个文件,file对应页面多个file类型input标签name,但框架只会将一个文件封装进一个MultipartFile对象, // 并不会将多个文件封装进一个

    6.8K30

    .Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存图片路径

    前言:   首先对于图片上传而言,在我们项目开发可以说出现频率是相当。...这篇文章,我将要描述是在我们.Net如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存,并返回保存图片路径展示出图片,实现一个无刷新异步图片上传过程,当然这里我讲解是单张图片保存过程...比起普通ajax,使用FormData最大优点就是我们可以异步上传一个二进制文件。...Jquery Ajax通过FormData对象异步提交图片文件: HTML中选中图片按钮: 头像 JqueryFormData二进制文件对象拼接和提交: //用户头像修改

    2.1K20

    js文件上传几种方式_java执行js文件

    工作中用到了Ajax上传文件情景 之前自己不知道ajax可以传 通过文档发现XHR2.0已经支持了 但需要集合FormData 目录结构 test 一级 files 二级 index.html...二级 saveFiles.php 二级 示例(根据上传文件进度生成进度条)代码如下 HTML部分 <div class="step".../saveFiles.php'); //3.设置请求头(get请求可以省略,post不发送数据也可以省略) // 如果使用 formData可以不写 请求头 写了 无法正常上传文件...php // 获取提交文件信息 print_r($_FILES); // 保存上传数据 move_uploaded_file($_FILES['icon'][...本站提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    10.4K20

    09.Django基础七之Ajax

    同样也不难解释,为什么ajax请求,需要从cookie拿取token添加到请求头中。...=new FormData(); #ajax上传文件时候,需要这个类型,它会将添加给它键值对加工成formdata类型 formdata.append("user",$("#user...上传数据存在哪里? 在你保存上传文件之前,数据需要被保存在某些地方。默认呢,如果一个上传文件小于2.5兆,Django会将上传东西放在内存里。...这意味着只要从内存读取数据并保存到硬盘上,所以很快。然而,如果一个上传文件太大,Django将将上传文件写到一个临时文件,这个文件在你临时文件路径。...然而,如果一个上传文件太大,Django将上传文件写到一个临时文件,这个文件在你临时文件路径

    3.6K20

    表单多文件上传样式美化 && 支持选中文件后删除相关项

    目录 文件上传基础 单文件上传文件上传 表单文件上传美化 选中文件删除 界面的处理 脚本处理 FileList FormData 一、文件上传基础 1....,可以默认显示几个文件,再通过“查看更多文件”查看到更多信息 随之另外想法是,一次性选中文件很多,想取消某个文件,又得重新选择。...告诉jQuery不要去设置Content-Type请求头 }); 这里有几个要注意点: 1)FormData属性值接受是单个文件信息,不能是复合性对象。...[],则连续append会直接覆盖原来,最后后端获取到只是最后append进去项 4)不要直接在JQajax实例化出一个FormData对象,会出问题 ?...而当文件太大,会因为后端支持最大文件size不够造成崩溃,这时可以考虑进行断点续传 断点续传,前端可以通过二进制流和本地存储结合来实现,这里就不多说了

    4K10

    .NET Core Web API使用HttpClient提交文件二进制流(multipartform-data内容类型)

    需求背景:    在需要通过服务端请求传递文件二进制文件流数据到相关服务端保存,如对接第三方接口很多情况下都会提供一个上传文件接口,但是当你直接通过前端Ajax方式将文件上传到对方提供接口时候往往都会存在跨域情况...,这时候我们就需要通过服务端提交文件流来解决这个跨域情况。...本篇主角就是使用HttpClient进行Http请求,提交二进制文件流到文件服务器。 HttpClient简单介绍: HttpClient类实例充当发送 HTTP 请求会话。...在 ASP.NET Core 中使用 IHttpClientFactory 发出 HTTP 请求 前端使用Ajax-FormData对象上传文件: 注意点: FormData:对象用以将数据编译成键值对...,保存图片到服务端并返回文件预览完整地址: 关于.NET Core上传文件后端服务接口可以参考我之前写过文章: ASP.NET Core单文件和多文件上传保存到服务端 ///

    3.3K10

    文件上传动作不能太俗,必须页面无刷新上传

    说到这里就有人说,你卖了半天关子,不就是异步上传嘛,ajax谁不会,分分钟事儿就优雅完成了,但是我想说ajax固然重要也依然能很好完成这个动作,有时候专业事情交给专业的人去做效果是非常好。...传输数据, 没有进度信息提示, 只能提示是否完成. 受浏览器 同源策略 限制, 只能请求同域资源. 没有超时机制, 不方便掌控ajax请求节奏....但是XMLHttpRequest Level 2针对这些缺陷做出良好改进: 支持二进制数据, 可以上传文件, 可以使用FormData对象管理表单....要码运行 整个上传动作概括为一句话就是:这里提到FormData就是我们最常用一种方式,通过在脚本里新建FormData对象,把File对象设置到表单项,然后利用XMLHttpRequest异步上传到后台服务器即可...相反,如果请求是同步模式,则直到请求响应完全接受以后,该方法才会返回. } 1 /** 2 * 多文件上传 3 * @param file

    1.7K70

    薄荷图床 上传文件API调用指南

    填写错误将导致请求失败,报402错误。uploadedFileString是要上传文件,缺少该参数报406错误。modeNumber(Int)、String否命名方式,可取值1,2,3。...上传目录"); formData.append("watermark", "是否开启水印"); // 文件上传...", "originFileName":"原文件名称", "lessurl":"不含https://前缀链接"}4.JQuery Ajax(不推荐直接在公共项目的前端请求接口,因为这样会暴露你...上传目录"); formData.append("watermark", "是否开启水印"); $.ajax({ url:...(请查证api_token)403失败:文件尺寸超限。(升级套餐或调整文件尺寸)405失败:未被支持扩展名(文件格式)。406失败:没有选择文件就执行了上传操作。407失败:账号违规,API被封禁。

    1.1K81

    012:Django高级请求

    本章知识点 1、图片上传 2、Ajax post请求 知识点讲解 1、图片上传 1、在form表单标签当中添加属性 enctype=“multipart/form-data” 2、input...和request.FILES一起传入校验 3、post数据正常保存 但是文件对象,在数据库保存是地址(imgname) 4、保存图片 settings views...文件可以保存 2、Ajax post请求 Ajaxget请求,然后,我们学校ajaxpost Ajaxpost 构建formdata对象 formdata等于一个表单数据容器...在使用ajax提交,使用FormData对象可以减少拼接queryString工作量 1、开始往formdata当中添加数据 键值对 1、文件对象处理 2、csrf_token...键:csrfmiddlewaretoken 值:{{ csrf_token }} 画红线地方 然后发起ajax请求 URL:“”暂时为空 定义后端请求处理函数 def ajaxPostData

    28520

    Spring Boot+Vue+FastDFS 实现前后端分离文件上传

    在 Spring Boot 前后端分离环境下做文件上传,这个松哥之前在公众号上发过一篇文章来和大家介绍,但是在之前文章,为了省事,文件我是直接保存在本地临时目录下,这带来了另外一个问题,就是项目重启之后...在生产环境,我们可以搭建独立文件服务器,结合 FastDFS 还可以搭建独立分布式文件服务系统,这样文件管理服务器不仅方便管理还易于扩展,也解决了前面所说临时目录失效问题。...在 Vue.js ,如果网络请求使用 axios ,并且使用了 ElementUI 库,那么一般来说,文件上传有两种不同实现方案: 通过 Ajax 实现文件上传 通过 ElementUI 里边 Upload...2.Ajax 上传 在 Vue 通过 Ajax 实现文件上传,方案和传统 Ajax 实现文件上传基本上是一致,唯一不同是查找元素方式。...构造好 FromData 后,就可以直接上传数据了,FormData 就是要上传数据。 文件上传注意两点:1. 请求方法为 post,2.

    1.7K30
    领券