简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

Ajax asynchronous upload file list (with code)

php中世界最好的语言
Release： 2018-04-04 13:49:46
Original
1258 people have browsed it

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>
Copy after login

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!

Recommended reading:

How jQuery+ajax implements json data traversal

Ajax implements exam countdown and automatically submits test papers Function

The above is the detailed content of Ajax asynchronous upload file list (with code). For more information, please follow other related articles on the PHP Chinese website!

Related labels：
ajax code document
source：php.cn
Previous article：The use of jsbridge for the interaction between android and js Next article：How to handle session failure when ajax accesses it
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Display AWS PDF files in Bootstrap mode in Laravel I have downloaded aws url like https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/65...
From 2024-04-04 22:16:18
0
1
1450
Revised title: Calculate total based on checkbox selection I'm developing a simple financial tracking application. In the application, there is a tab...
From 2024-04-04 13:45:50
0
1
3465
Generating content using Ajax - scrolling to Id doesn't work I generate page content based on data obtained via ajax. The problem I'm having is that wh...
From 2024-04-04 09:29:39
0
1
397
How to pass multiple lists from ajax to Django I have a problem, I want to get all the data from the list, so I want to loop through each...
From 2024-04-03 23:20:06
0
1
362
Upload multiple image files in CodeIgniter using Ajax and PHP I'm having trouble uploading multiple image files to the server side. It would be great if...
From 2024-04-03 22:35:03
0
1
318
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！