<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="file" id="file"> </body> <script type="text/javascript"> function upload_file() { var formData = new FormData();//创建一个新的FormData对象 formData.append("file",$("#file")[0].files[0]); //说明：$("#file")：获取的是input对象 //$("#file")[0]：获取<input>标签 //$("#file")[0].files[0]：获取上传的文件 //formData.append：将文件添加到formdata对象中 $.ajax({ url: "/file/upload", type: "POST", data: formData,//提交文件对象 processData: false, // 不处理数据 contentType: false, // 不设置内容类型 success:function(data){ // alert(data); } }); } </script> </html>
ajax上传文件（前端代码）
2023-02-22
77
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
代码如下
目录
相关文章
|
17天前
|
前端开发
小程序
Java
|
20天前
|
缓存
前端开发
|
1月前
|
XML
前端开发
JavaScript
AJAX 前端开发利器：实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容，实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象，可发送和接收数据。当用户触发事件（如点击），函数向服务器发送GET请求，服务器响应后更新指定HTML部分。AJAX并非编程语言，而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象，它有多种方法（如`open()`和`send()`）和属性（如`onreadystatechange`、`readyState`和`status`）来处理请求和响应。
57
2
2
|
1月前
|
JSON
前端开发
Java
|
1月前
|
缓存
前端开发
JavaScript
|
2月前
|
前端开发
JavaScript
安全
从前端性能优化角度谈JavaScript代码压缩与混淆
本文从前端性能优化的角度出发，探讨了JavaScript代码压缩与混淆的重要性及实现方式，通过分析不同压缩混淆工具的特点和效果，为开发者提供了实用的指导和建议。
38
1
1
|
1月前
|
弹性计算
前端开发
小程序
微信小程序上传文件至阿里云OSS直传(java后端签名+前端直传)
当前的通用文件上传方式是通过前端上传到服务器，再由服务器转存至对象存储。这种方式在处理小文件时效率尚可，但大文件上传因受限于服务器带宽，速度较慢。例如，一个100MB的文件在5Mbps带宽的阿里云ECS上上传至服务器需160秒。为解决此问题，可以采用后端签名的方式，使微信小程序直接上传文件到阿里云OSS，绕过服务器中转。具体操作包括在JAVA后端引入相关依赖，生成签名，并在微信小程序前端使用这个签名进行文件上传，注意设置正确的请求头和formData参数。这样能提高大文件上传的速度。
298
1
2
|
1月前
|
前端开发
|
9天前
|
前端开发
JavaScript
算法
比较流行的前端代码书写规范都有哪些
【4月更文挑战第13天】前端代码规范增进代码可读性和团队协作，包括缩进（用2空格）、命名（变量 camelCase，常量 MY_CONSTANT，类 PascalCase）、注释、语句与表达式、错误处理、代码复用。文件命名规范涉及扩展名、目录结构、简洁文件名、入口文件和配置文件命名。遵循这些规范能提高代码一致性，但需按项目需求调整。不断学习新规范以适应前端技术发展。
14
1
1
|
11天前
|
监控
前端开发
JavaScript
如何使用浏览器调试前端代码？
【4月更文挑战第11天】前端开发中，浏览器调试是关键技能，能提升代码质量。本文介绍了如何使用浏览器的调试工具：1) 打开调试窗口（F12或右键检查）；2) Elements标签页检查DOM结构和样式；3) Console调试JavaScript，查看日志和错误信息；4) Sources设置断点调试JS文件；5) 利用Network、Performance和Memory等标签页优化性能。熟悉调试工具、利用日志和错误信息能有效定位问题，提高开发效率。
28
7
7