好资源导航 » 文章资讯 » jquery ajax实现文件上传功能实例代码

jquery ajax实现文件上传功能实例代码

2023-09-14 01:31:05 67

下面看下ajax实现文件上传

没有使用插件

一、单文件上传










文件:

上传文件


$(function(){
$("#upload").click(function(){
varformData=newFormData($('#uploadForm')[0]);
$.ajax({
type:'post',
url:"http://192.168.1.101:8080/springbootdemo/file/upload",
data:formData,
cache:false,
processData:false,
contentType:false,
}).success(function(data){
alert(data);
}).error(function(){
alert("上传失败");
});
});
});

二、多文件上传










文件:


上传文件


$(function(){
$("#upload").click(function(){
varformData=newFormData($('#uploadForm')[0]);
$.ajax({
type:'post',
url:"http://192.168.1.101:8080/springbootdemo/file/uploadFiles",
data:formData,
cache:false,
processData:false,
contentType:false,
}).success(function(data){
alert(data);
}).error(function(){
alert("上传失败");
});
});
});

这个是多选上传，关键是multiple="multiple"这个属性，另外使用的接口也是多文件上传的接口。

当然也可以使用单文件上传的模式，多次选择就可以了，只不过接口也是iyaoshiyong多文件上传的接口。










文件:

文件:

文件:


上传文件


$(function(){
$("#upload").click(function(){
varformData=newFormData($('#uploadForm')[0]);
$.ajax({
type:'post',
url:"http://192.168.1.101:8080/springbootdemo/file/uploadFiles",
data:formData,
cache:false,
processData:false,
contentType:false,
}).success(function(data){
alert(data);
}).error(function(){
alert("上传失败");
});
});
});

测试都通过了！！！

下面通过一段实例代码给大家介绍ajax拖拽上传功能的实现，具体代码如下；

AJAX拖拽上传功能，实现代码如下所示：







Document



+

//server.php

总结

以上所述是小编给大家介绍的jqueryajax实现文件上传功能实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
514930285
czq8825@qq.com

jquery ajax实现文件上传功能实例代码

热门推荐

随机推荐