html5 jquery多图片上传
时间: 2023-11-06 08:06:25 浏览: 44
可以使用第三方库来实现多图片上传功能,其中比较常用的是 blueimp/jQuery-File-Upload。
步骤如下:
1. 引入 jQuery 和 blueimp/jQuery-File-Upload 库。
```html
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.28.0/css/jquery.fileupload.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.28.0/js/jquery.fileupload.min.js"></script>
```
2. 在 HTML 中添加文件上传表单。
```html
<form id="fileupload" action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="files[]" multiple>
<button type="submit">上传</button>
</form>
```
3. 使用 JavaScript 初始化上传插件。
```javascript
$(function() {
$('#fileupload').fileupload({
dataType: 'json',
done: function(e, data) {
// 上传成功后的回调函数
},
fail: function(e, data) {
// 上传失败后的回调函数
}
});
});
```
4. 添加后端接口处理上传文件。
```python
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/upload', methods=['POST'])
def upload():
files = request.files.getlist('files[]')
urls = []
for file in files:
# 保存文件到本地或云存储
url = 'http://example.com/' + file.filename
urls.append(url)
return jsonify({'urls': urls})
```
这样就完成了多图片上传的功能。