jQuery+Ajax+form表单上传⽂件简单demo，附前后端代码jQuery+Ajax+form表单上传⽂件简单demo，附前后端代码
⼀，书写⽬的：
记录踩坑，，
⼆，代码的功能
使⽤ajax，和springBoot项⽬，从前端往后端传输⽂件
三，代码详情
前端代码：
html:
<form id="tf">
<input type="file" name="uploadFile" id="photo">
<input type="text" name="inputInfoName" id="inputInfo" placeholder ="请填写上传⽂件的备注信息">
<input type="button" onclick="postData()" value="下⼀步">
</form>
ajax写法：
function postData() {
var form = new ElementById("tf"));
alert(form);
$.ajax({
url: "localhost:8080/input/file",
type: "post",
data: form,
processData: false,
contentType: false,
success: function (data) {
alert(JSON.stringify(data))interlocked
},
error: function (e) {
console.log(e);
}
});
}
后端代码：
entity:
@Data
@Builder
@AllArgsConstructor
@NoArgsConstructor
public class GrayFileQo {
private String marks;//备注
private MultipartFile multipartFile;
}
ps:
下⾯写的代码仅供参考，如果遇到相同问题可以试试。
我⾃⼰搭建了⼀个springBootWeb项⽬，但是在前后端交互的时候，后端会提⽰xxhttpMessageConvert不能转换，(英⽂太长，记不住)。
处理⽅式：配置了HttpMessageConverter（⼤神勿喷，哈哈哈）
@Component//@RestController这个注解返回json，但是新建项⽬的时候，直接⽤ajax请求，返回的不是json格式，
//ajax从返回的data去不了值，然后配置了这个GrayHttpMessageConverter，过后可以使⽤，然后不使⽤这个类，也⼀样可以了
//不同浏览器也能使⽤，排除缓存问题
public class GrayHttpMessageConverter implements HttpMessageConverter {
@Override
public boolean canRead(Class clazz, MediaType mediaType) {
boolean assignableFrom = clazz.isAssignableFrom(Result.class);
// System.out.println("canRead" + assignableFrom);
// if (mediaType != null) {
// System.out.println("canWrite" + mediaType.hashCode());
// }
// System.out.println("canWrite" + mediaType);
return true;
}
@Override
public boolean canWrite(Class clazz, MediaType mediaType) {
boolean assignableFrom = clazz.isAssignableFrom(Result.class);
// System.out.println("canWrite" + assignableFrom);
// if (mediaType != null) {
// System.out.println("canWrite" + mediaType.hashCode());
/
/ }
// System.out.println("canWrite" + mediaType);
return assignableFrom;
}
@Override
public List<MediaType> getSupportedMediaTypes() {
//暂时不知道怎么⽤ 2021/3/11
List<MediaType> types = new ArrayList<>();
MediaType json = new MediaType("application", "*+json");
MediaType urlencoded = new MediaType("application", "*+x-www-form-urlencoded");
MediaType multipart = new MediaType("application", "*+form-data");
jquery下载文件请求
weight的其他形式types.add(json);
types.add(urlencoded);
types.add(multipart);
return types;
}
@Override
public Object read(Class clazz, HttpInputMessage inputMessage) throws IOException, HttpMessageNotReadableException {
return null;
}
@Override
elasticsearch倒排索引原理
public void write(Object o, MediaType contentType, HttpOutputMessage outputMessage) throws IOException, HttpMessageNotWritableException {
// if (contentType != null) {
// System.out.println("write" + contentType.hashCode());
// }
System.out.println("write" + contentType);
if (o instanceof Result) {
System.out.println("难道是这样???");//就是这样
js es6语法OutputStream outputStream = Body();
String backStr = JSONString(o);
outputStream.Bytes());
dubbo路由规则配置}
}
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论