Home >Web Front-end >JS Tutorial >Ajax asynchronous upload file list (with code)

Ajax asynchronous upload file list (with code)

php中世界最好的语言Original: 2018-04-04 13:49:461313browse

This time I will bring you Ajax asynchronous upload file examples (with code), what are the precautions for Ajax asynchronous upload of files, the following is a practical case, let’s take a look one time.

I won’t say much, I will just give you the practical information. Please forgive me for the bad writing.

The specific code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<title>Index</title>
<script>
$(function() {
$(':button').click(function () {
var formData = new FormData();
var file = $("input[type='file']")[0].files[0];
formData.append("files", file);
$.ajax({
url: '/Upload/Upload', //server script to process data
type: 'POST',
//Ajax事件
//beforeSend: beforeSendHandler,
//success: completeHandler,
//error: errorHandler,
// Form数据
data: formData,
//Options to tell JQuery not to process data or worry about content-type
cache: false,
contentType: false,
processData: false
});
});
});
</script>
</head>
<body>
<form enctype="multipart/form-data">
<input name="file" type="file" multiple="multiple" />
<input type="button" value="Upload" />
<input type="text" name="userName" value="ice" />
</form>
</body>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Ajax asynchronous upload file list (with code)

Related articles