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

jQuery- file -upload:如何针对每个文件大小分别发送请求

jQuery-file-upload是一个基于jQuery的文件上传插件,它提供了方便的文件上传功能。针对每个文件大小分别发送请求的方法如下:

  1. 首先,你需要在页面中引入jQuery和jQuery-file-upload插件的相关文件。
代码语言:txt
复制
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-file-upload/10.0.0/jquery.fileupload.min.js"></script>
  1. 在HTML中创建一个文件上传的表单,并为其添加一个id。
代码语言:txt
复制
<form id="file-upload-form" action="upload.php" method="POST" enctype="multipart/form-data">
  <input type="file" name="file" multiple>
  <button type="submit">上传</button>
</form>
  1. 使用jQuery的fileupload方法初始化文件上传插件,并设置相关参数。
代码语言:txt
复制
$(function() {
  $('#file-upload-form').fileupload({
    dataType: 'json',
    add: function(e, data) {
      // 针对每个文件大小分别发送请求
      var fileSize = data.files[0].size;
      if (fileSize <= 1024) {
        // 发送小文件的请求
        data.url = 'upload_small.php';
      } else if (fileSize <= 1024 * 1024) {
        // 发送中等文件的请求
        data.url = 'upload_medium.php';
      } else {
        // 发送大文件的请求
        data.url = 'upload_large.php';
      }
      data.submit();
    },
    done: function(e, data) {
      // 文件上传完成后的回调函数
      console.log(data.result);
    }
  });
});

在上述代码中,我们使用add事件来针对每个文件的大小进行判断,并设置不同的上传URL。根据文件大小的不同,你可以在服务器端编写对应的上传处理逻辑。

注意:上述代码中的upload.phpupload_small.phpupload_medium.phpupload_large.php是示例的服务器端处理文件上传的脚本,你需要根据自己的实际情况进行相应的修改。

这是一个基本的针对每个文件大小分别发送请求的示例,你可以根据自己的需求进行进一步的定制和扩展。

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

相关·内容

Vue + Node.js 搭建「文件上传」管理后台

当然,本教程还会教给大家如何写一个可以限制上传文件大小、有百分比进度条、可报错、可显示服务器上文件列表、可点击下载文件的前端操作界面。...:初始化 Multer 引擎并定义中间件 file.controller.js:配置 Rest API routes/index.js:路由,定义前端请求后端如何执行 server.js:运行Node.js...创建「上传文件」功能 我们来写一个 JS 脚本,这个脚本调用 Axios 发送 HTTP API 请求,与后端服务器通讯。...${err}`, }); } }; 设置后端 Rest API 上传文件的路径 当 Vue 前端通过 Axios 发送 HTTP 请求时,我们需要通过路由来确定服务器应该如何响应 我们来设置三种常用到的上传文件所需功能...然后我们使用 Postman 来发送 HTTP 请求,看看后端是否运行正常。

11.9K30

基于SpringMVC的文件上传如何实现

50M为基准也是不合理,例如“上传头像”就应该限制为更小的值,则应该在控制器中再进行判断,所以,控制器中的方法都是针对不同的业务的,都应该独立的再次判断上传文件的大小!...上传文件的ajax请求必须配置processData:false和contentType:false $('#btn-upload').click(function () { $.ajax({...: 并且,在服务器端的控制器中,在处理请求的方法中,使用2个MultipartFile参数接收这2个文件,例如: public...String upload(MultipartFile image1, MultipartFile image2) { // 分别对image1和image2进行检查并上传 } 另外,如果上传的多个文件的数量并不确定...然后,在服务器端的控制器中,在处理请求的方法的参数列表中,使用MultipartFile[]类型接收这多个文件即可,例如: public String upload(MultipartFile[] images

57420

Html5断点续传实现方法

针对iis实现大文件的上传网上也有一些通过修改web服务器限制文件大小来实现。不过这样对web服务器的安全带了问题。攻击者很容易发一个大数据包,将你的web服务器直接给拖死。 ...现在针对大文件上传主流的实现方式,通过将大文件分块。比如针对一个100M文件,按2M拆分为50块。然后再将每块文件依次上传到服务器上,上传完成后再在服务器上合并文件。 ...resumable会先发送一个get请求,如果http状态返回 200。则认为当前块已经上传完成,然后进行下一块的get请求。...如果http状态返回的不是200,则将通过post方式发送当前块数据包进行文件块上传。  设置testChunks为true每次上传都会增加一个get请求,如果我们已经知道上次中断上传前文件的块数。...这样可以为每个块减少一次http的get请求。  针对这个需求,我修改了resumable的源码,为resumable里的file对象增加了一个startchunkindex的属性,默认为0。

2.2K30

django 1.8 官方文档翻译: 3-3-1 文件上传

FILES (更多关于 request 对象的信息 请查看 请求和响应对象)。这篇文档阐述了文件如何上传到内存和硬盘,以及如何自定义默认的行为。 警告 允许任意用户上传文件是存在安全隐患的。...注意request.FILES会仅仅包含数据,如果请求方法为POST,并且发送请求的拥有enctype="multipart/form-data"属性。...你可以编写自定义的处理器,来定制Django如何处理文件。例如,你可以使用自定义处理器来限制用户级别的配额,在运行中压缩数据,渲染进度条,甚至是向另一个储存位置直接发送数据,而不把它存到本地。...在类Unix的平台下,你可以认为Django生成了一个文件,名称类似于/tmp/tmpzfp6I6.upload。如果上传的文件足够大,你可以观察到文件大小的增长,由于Django向磁盘写入数据。...在这种情况下,你可以通过修改request.upload_handlers,为每个请求覆盖上传处理器。

71050

PHP基于session.upload_progress 实现文件上传进度显示功能详解

这个信息对上传请求自身并没有什么帮助,但在文件上传时应用可以发送一个POST请求到终端(例如通过XHR)来检查这个状态。...当PHP检测到这种POST请求时,它会在_SESSION中添加一组数据, 索引是session.upload_progress.prefix与 session.upload_progress.name连接在一起的值...可以通过下面的php.ini的配置,调整上传文件大小的限制(以上限500M为例) upload_max_filesize = 500M; //上传文件的最大值,还可以调更大 post_max_size...<input type="hidden" name="PHP_SESSION_<em>UPLOAD</em>_PROGRESS" value="<em>file</em>1" / <input type="<em>file</em>" name...总结 php.ini默认配置的上传文件大小是2M,我们上传文件通常是需要修改一下配置文件使用的。

1.9K10

React + Node.js 全栈实战教程 - 手把手教你搭建「文件上传」管理后台

当然,本教程还会教给大家如何写一个可以限制上传文件大小、有百分比进度条、可报错、可显示服务器上文件列表、可点击下载文件的前端操作界面。...controllers/flileUploadController.js:配置 Rest API routes/index.js:路由,定义前端请求后端如何执行 server.js:Node.js入口文件...函数的处理,在 upload 函数中我们会返回上传文件请求函数 UploadService.upload 的 Promise 状态 所以 uploadPromises 中存储的就是处于 Promise...状态的上传文件函数,接着我们使用 Promise.all 同时发送多个文件上传请求,在所有文件都上传成功后,我们将会调用获取所有文件数据的接口,并将获取到的数据展示出来。...options: 自定义如何建立连接 file: 这是控制数据库中文件存储的功能。

15.2K10

Nodejs进阶:基于express+multer的文件上传

npm install express multer multer --save 每个示例下面,都有下面两个文件 ? upload-custom-filename git:(master) ?.... ├── app.js # 服务端代码,用来处理文件上传请求 ├── form.html # 前端页面,用来上传文件 基础例子:单图上传 完整示例代码请参考这里。 app.js。...%s', file.originalname); console.log('文件大小:%s', file.size); console.log('文件保存路径:%s', file.path...文件类型:image/png 原始文件名:1.png 文件大小:18379 文件保存路径:upload/b7e4bb22375695d92689e45b551873d9 自定义文件上传路径、名称 有的时候...有时我们需要针对不同文件进行个性化设置,那么,可以参考下一小节的内容。 自定义本地保存的文件名 完整示例代码请参考这里。 代码稍微长一点,单同样简单。

2.7K90

Nodejs进阶:基于express+multer的文件上传

npm install express multer multer --save 每个示例下面,都有下面两个文件 ➜ upload-custom-filename git:(master) ✗ tree...-L 1 . ├── app.js # 服务端代码,用来处理文件上传请求 ├── form.html # 前端页面,用来上传文件 基础例子:单图上传 完整示例代码请参考这里。...%s', file.originalname); console.log('文件大小:%s', file.size); console.log('文件保存路径:%s', file.path...文件类型:image/png 原始文件名:1.png 文件大小:18379 文件保存路径:upload/b7e4bb22375695d92689e45b551873d9 自定义文件上传路径、名称 有的时候...有时我们需要针对不同文件进行个性化设置,那么,可以参考下一小节的内容。 自定义本地保存的文件名 完整示例代码请参考这里。 代码稍微长一点,单同样简单。

1.7K10

SpringMVC返回JSON数据以及文件上传、过滤静态资源

既然能发送数据到客户端,那么与之相对的就能接收客户端发送的数据,而@RequestBody注解可以接收客户端发送的JSON数据,并绑定到相应的方法参数上,如下示例: package org.zero01...使得我们能够很轻易的就可以完成文件上传的代码编写,下面就来简单介绍一下如何使用SpringMVC来完成文件上传。...; @Controller public class UploadFile { @RequestMapping(value = "/upload-file.do", method = RequestMethod.POST...DispatcherServlet,而DispatcherServlet只会把访问请求分配到控制器中,如果在控制器中没有找到相应的处理请求的方法,就会报404错误。...只要是DispatcherServlet没办法处理的访问请求,也就是没有在控制器里找到相应的接收请求的方法。

1.3K10

分布式文件存储——简介

文件大小一般都是在500MB以下的文件,使用fastDFS最合适了。...TFS为淘宝提供海量小文件存储,通常文件大小不超过1M,满足了淘宝对小文件存储的需求,被广泛地应用 在淘宝各项应用中。...当分配好storage server后,客户端向storage发送写文件请求,storage将会为文件分配一个数据存储目录。然后为文件分配一个fileid,最后根据以上的信息生成文件名存储文件。...跟upload file一样,在downloadfile时客户端可以选择任意tracker server。...tracker发送download请求给某个tracker,必须带上文件名信息,tracke从文件名中解析出文件的group、大小、创建时间等信息,然后为该请求选择一个storage用来服务读请求

3.6K30

求超大文件上传方案( Web )

根据已上传大小切割文件,发出n次请求不断向服务器提交文件片,服务端不断追加文件内容 当已上传文件大小达到文件总大小时,上传结束 首先是文件的分割,HTML5新增了Blob数据类型,并且提供了一个可以分割数据的方法...关于如何将数据存在服务端,已经前端如何取数据,我在下面会讲到。 技术要点就上面的那么多了,其实也没有多少技术含量哈~来看看我的插件如何使用吧。...,从文件、数据库或者任何地方取,可以发送一个ajax请求到你想要的地址,传递你需要的参数。...returnData.uploadedSize; } }); return uploadedSize; } 我向后台的某个地址发送一个请求...除了断点续传这个大头,插件还做了如下改动: 增加了onSelect回调函数,在选择了文件之后触发,用法与uploadify官网的一致 删除掉正在上传的文件,中断发送请求 完善了input file组件的

3.7K40
领券