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

下面看下ajax实现文件上传

没有使用插件

一、单文件上传

文件:

上传文件

$(function () {

$("#upload").click(function () {

var formData = new FormData($('#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 () {

var formData = new FormData($('#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 () {

var formData = new FormData($('#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

.box {

width: 300px;

height: 300px;

border: 1px solid #000;

text-align: center;

line-height: 300px;

font-size: 40px;

}

+

var box = document.querySelector('.box');

box.ondragover = function (e) {

e.preventDefault();

}

box.ondrop = function (e) {

console.log(e.dataTransfer)

e.preventDefault();

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {

if (xhr.readyState == 4 && xhr.status == 200) {

console.log(xhr.responseText)

}

}

xhr.open('POST', './server.php', true);

var formdata = new FormData();

formdata.append('pic', e.dataTransfer.files[0]);

formdata.append('name', 'luyao');

xhr.send(formdata);

}

//server.php

$rand = rand(1,1000).'.jpg';

move_uploaded_file($_FILES['pic']['tmp_name'], './uploads/'.$rand);

echo '/uploads/'.$rand;

总结

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