运用ajax上传图片（formdata+input）

问题：

今天拿到接口文档，有一个上传图片的接口，看文档其中参数名是“file”以及示例是一串本地的URL。顿时有点懵，不知道怎么拿到这个参数。

思路：
与后端交流过那个示例值其实并不是URL。其实它是个对象，而这个对象表示照片的信息内容以及地址。这涉及到input标签的属性“file”以及formdata一种传参形式。

一、formdata类型

现代 Web 应用程序中经常需要对表单数据进行序列化，因此 XMLHttpRequest Level 2 新增了FormData 类型。FormData 类型便于表单序列化，也便于创建与表单类似格式的数据然后通过 XHR发送。

let data = new FormData();
data.append("name", "Nicholas");

二、代码

    $(".input-file").change(function(e) {var file = e.target.files[0]console.log(file)var fd = new FormData()fd.append('file', file)ajax(fd)})

function ajax(data) {$.ajax({url: "http://1.12.218.211:2001/helmet/detect",dataType: "json",async: false,processData: false,contentType: false,data: data,method: "POST",success(res) {console.log(res)if (res.code == 20000) {$("#leftimage").attr("src", res.data['source:'])$("#rightimage").attr("src", res.data.output)} else {alert(res.code)}},error(err) {console.log(err)}})
}

运用ajax上传图片（formdata+input）相关推荐

vue用form上传图片_vuejs使用FormData，ajax上传图片文件
我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. ...
ssm使用Ajax的formData进行异步图片上传返回图片路径，并限制格式和大小
之前整理过SSM的文件上传,这次直接用代码了. 前台页面和js //form表单<form id= "uploadForm" enctype="multipart/ ...
原生ajax传值php,原生ajax上传图片，php后台处理总结
原生ajax上传图片,php后台处理总结这篇文章发布于 2018/10/03,归类于后端数据库等标签: 原生ajax上传图片,php后台处理图片上传开始做图片上传,发现之前的处理方式基本忘光了 ...
thinkphp5通过ajax上传图片并预览
thinkphp5通过ajax上传图片并预览一.具体需求如图所术: 二.html代码: 三.js代码四.控制器php代码: 一.具体需求如图所术: 二.html代码: <form class ...
ajax表单提交excel,ajax使用formdata 提交excel文件表单到rails解析
.modal-body .container-fluid .row .col-md-12 1.下载模板文件 = link_to '模板文件' .row .col-md-12 = form_tag '' ...
php ajax多图上传预览,Ajax上传图片及先预览功能的实现方法
最近有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果, ...
vue ajax上传图片
(vue ajax上传图片) 最近在做一个手机端H5页面,需要做图片上传功能,就简单的做一个demo,后端使用的是thinkPHP5,代码此次省略, 下面贴上前端代码, HTML 代码部分: < ...
ajax上传图片、下载图片
目录一.上传图片二.下载(展示)图片一.上传图片 (1)jsp中: <form id="fm">支出项目:<select name="type&q ...
c ajax 上传图片插件,ajax实现图片上传和预览
图片上传功能 html结构: ![](6f4fbfb7/addimg.png) 在html中input的type=file就可以实现文件的上传功能,在其属性中也包含一个accept='':可以限制文件 ...
iphone 使用AJAX发送FormData文件，踩坑
事呢,就是这么个事.iphone如果你发送的formdata数据中文件有空,在数据表现为file.size==0;此时试用iphone是会发送失败的:无奈只好做个判断了: 1. 问题分析 /* * 为 ...

运用ajax上传图片（formdata+input）

一、formdata类型

二、代码

运用ajax上传图片（formdata+input）相关推荐

最新文章

热门文章