formdata | 易学教程

前后分离（一）---前后端数据交互，axios和jquery ajax的区别

阅读更多关于前后分离（一）---前后端数据交互，axios和jquery ajax的区别

axios作为Vue生态系统中浓墨重彩的一笔，我学习这个东西也是花了一定的时间的。刚开始的时候，也是遇到了很多问题。逐渐摸透了它的脾气。首先说说FormData和Payload两种数据格式的区别：先是提交一个FormData的请求试试看：然后我们看后端：然后我们提交一个以Payload传输数据的请求：我们再切到后台：这就是使用axios和jquery ajax最大的区别。 jquery提交数据的时候，默认是以FormData的形式提交的，也就是Content-Type:" application/x-www-form-urlencoded ", 而默认axios是使用的是Payload形式提交数据，也就是Content-Type:"application/json" 如何切换呢，我们需用应用以下方式： [javascript] view plain copy var params = new URLSearchParams(); params.append( 'param1' , 'value1' ); params.append( 'param2' , 'value2' ); 它的意思，其实就是把这样的数据（对象）{ name:"yangxu",age:23 } 转换成这样的数据（字符串） "name=yangxu&age=23"这样的查询字符串。

FormData--JQuery使用FormData利用Ajax实现多图片、文件上传

阅读更多关于 FormData--JQuery使用FormData利用Ajax实现多图片、文件上传

传统的form表单提交会导致页面刷新，但是在有些情况下，我们不希望页面被刷新，这种时候我们都是使用Ajax的方式进行请求的。我自己了解的实现文件上传的比较好用的，有普通的Ajax提交文件方式、FilesUpload等，但是用了FormData后，觉得fromdata使用起来更加简单便捷，所以在此给各位小伙伴们分享一下，不足之处还请各位伙伴提示，在此感谢！例如表单：表单内必须设enctype=”multipart/form-data”属性。 <form id= "add_news" method = "post" enctype= "multipart/form-data" > <input type = "file" id= "photo" > <input type = "file" id= "photo2" > <input type = "file" id= "photo3" > <input type = "text" id= "photo4" > <input type = "text" id= "photo5" > </form> 1 2 3 4 5 6 7 第一种提交方式： //直接把整个Form表单内容塞到FormData对象里面； var formElement = $( "#add_news" ); var formData = new FormData

upload

阅读更多关于 upload

图片上传心得本地获取图片预览路径的两种方式： 1.该方法获取到的文件路径是http格式的 url = URL . createObjectURL ( file ); 2.该方法获取的文件路径是base64 reader = new FileReader (); reader . readAsDataUrl ( file ); reader . onload = function ( e ){ console . log ( e . target . result ) } 上传：用的是FormData+Ajax 如果需要图文一起上传 var fromData = new FormData ( $ ( 'form' )[ 0 ]) //form为表单 $ . ajax ({ url : '' , type : 'POST' , data : formData , contentType : false , processData : false , success : function ( res ){ console . log ( res ) } }) 多图上传 var formData = new FormData (), urls =[]; //urls预览图片路径集合 $ ( input [ type = 'file' ]). change ( function ( e )

AJAX

阅读更多关于 AJAX

AJAX准备知识：JSON 什么是 JSON ？ JSON 是轻量级的文本数据交换格式 * JSON 具有自我描述性，更易理解合格的json对象： ["one", "two", "three"] { "one": 1, "two": 2, "three": 3 } {"names": ["张三", "李四"] } [ { "name": "张三"}, {"name": "李四"} ] 不合格的json对象： { name: "张三", 'age': 32 } // 属性名必须使用双引号 [32, 64, 128, 0xFFF] // 不能使用十六进制值 { "name": "张三", "age": undefined } // 不能使用undefined { "name": "张三", "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'), "getName": function() {return this.name;} // 不能使用函数和日期对象 } stringify与parse方法 JavaScript中关于JSON对象和字符串转换的两个方法： JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象　 JSON.parse('{"name":"djb"}'); JSON.parse

使用FormData进行Ajax请求上传文件

阅读更多关于使用FormData进行Ajax请求上传文件

Servlet3.0开始提供了一系列的注解来配置Servlet、Filter、Listener等等。这种方式可以极大的简化在开发中大量的xml的配置。从这个版本开始，web.xml可以不再需要，使用相关的注解同样可以完成相应的配置。我笔记里也有记文件上传：https://www.cnblogs.com/hhmm99/p/9239782.html a.选中上传 b:后台显示 c:上传的文件夹 html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax上传</title> <script src="js/jquery-1.12.4.js"></script> </head> <body> <h1>文件上传</h1> <form id="f" enctype="multipart/form-data"> UserName:<input type="text" name="userName"><br/> File1:<input type="file" name="file"><br/> File2:<input type="file" name="file"><br/> <input type="button" id="btn" value="提交"> </form> </body

Easyui前端、JAVA后台上传附件

阅读更多关于 Easyui前端、JAVA后台上传附件

前端使用easyui框架，后端使用JAVA 的JFinal框架开发功能描述：实现附件上传功能。文件上传路径为：。。/upload(上传文件夹)/身份证号/慢病编码/上传的附件。细节要求：实现多图片上传，上传后可在前台页面实现二次增加和删除 1.前台页面显示：填写身份证号、选择慢病信息，点击“上传附件”按钮选择要上传的文件前台页面代码： 1 <tr> 2 <td class="pe-label"><span class="sp_waning">*</span>身份证号：</td> 3 <td class="pe-content"> 4 <input id="newchrApply_app05" name="newchrApply_app05" class="easyui-textbox"> 5 </td> 6 <td class="pe-label">申请疾病：</td> 7 <td class="pe-content"> 8 <input id="newchrApply_app10" name="newchrApply_app10" class="easyui-combobox"> 9 </tr> 10 <tr> 11 <td class="pe-label">附件上传：</td> 12 <td class="pe-content" colspan="3"> 13 <span

axios封装（一）基础配置

阅读更多关于 axios封装（一）基础配置

axios 是目前流行的Promise网络请求库，在浏览器端他通过 xhr 方式创建ajax请求。在node环境下，通过 http 库创建网络请求。 axios 提供了丰富的配置，这里讲一讲我在工作中通常用到的基本配置方法。因为我在工作中用 vue 进行开发，所以以下代码默认的环境是 vue-cli 。为什么要创建一个 axios 实例，而不是在 axios 对象上进行配置呢？是因为我们会应对复杂的使用场景，多个实例便于管理。 const isDev = process.env.NODE_ENV === 'development'; const instance = axios.create({ // baseURL是在proxyTable中会转发的配置，通过环境变量的判断，可以在开发和生产环境使用不同的url进行请求 baseURL: isDev ? '/fakeapi' : '/api', timeout: 5000, validateStatus(status) { // 一般来说，http status为200-300之间时，均判定为请求通过，你可以在这里修改这个配置(不建议修改) return status === 200 }, headers: { // 定义 post 请求编码格式 post: { 'Content-Type': 'application/x

vue element-ui 文件上传

阅读更多关于 vue element-ui 文件上传

<el-upload class="upload-demo" action="" :before-remove="beforeRemove" :on-remove="onRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList" :http-request="uploadSectionFile"> <el-button size="small" type="primary">点击上传</el-button>  </el-upload> js 接口： export const uploadFile = params => { return axios.post(`${easykp_config.test}/file/upload`, params, { headers: { 'author-token-key': localStorage.getItem('token') } }).then(res => res.data); }; 调用： //文件上传 handleExceed(files, fileList) { //超出限制 this.

js FormData方法介绍

阅读更多关于 js FormData方法介绍

1. 概述 FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。 2. 构造函数创建一个formData对象实例有几种方式 1、创建一个空对象实例 var formData = new FormData(); 此时可以调用append()方法来添加数据 2、使用已有的表单来初始化一个对象实例假如现在页面已经有一个表单 <form id="myForm" action="" method="post"> <input type="text" name="name">名字 <input type="password" name="psw">密码 <input type="submit" value="提交"> </form> 我们可以使用这个表单元素作为初始化参数，来实例化一个formData对象 // 获取页面已有的一个form表单 var form = document.getElementById("myForm"); // 用表单来初始化 var formData = new FormData(form); // 我们可以根据name来访问表单中的字段 var name = formData.get("name"); // 获取名字 var psw = formData.get

java中excel文件的导入，限制上传的文件类型，文件的大小，显示上传文件的进度条

阅读更多关于 java中excel文件的导入，限制上传的文件类型，文件的大小，显示上传文件的进度条

1. 前台代码 <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>导入excel测试</title> <style> #fatherDiv{ width:100px; height:20px; border:1px solid green; } #sonDiv{ width:0px; height:20px; background:green; } </style> <script th:src="@{|/js/jquery-2.1.4.min.js/|}"></script> <script> $(function () { $("#importExcel").bind("click", function () { /* 判断是否有导入文件 */ if (!$("#excel").val()) { window.alert("请导入excel文件"); return; } /* 判断输入的文件的类型 */ var splitArray = $("#excel").val().toLowerCase().split("."); var type = splitArray[splitArray.length - 1]; if

订阅 formdata