前端bootstrap+fileInput+django后端是用ajax方式上传form表单数据及多个文件保存到数据库
前端部分：
简介：
一款非常优秀的HTML5文件上传插件，支持bootstrap 3.x
和4.x版本，具有非常多的特性:多文件选择。这个插件能最简单的帮你完成文件上传功能，且使用bootstrap样式。还支持多种文件的预览，images,
text, html, video, audio,
flash。另外还支持ajax方式上传文件，可以看到上传进度。支持拖拽的方式添加和删除文件。
一、下载bootstrap-fileinput
下载bootstrap-fileinput
参数的配置可以参考：https://blog.csdn.net/u012526194/article/details/69937741/
或者中文官网：http://www.bootstrap-fileinput.com/options.html
二、创建一个web项目，引入js、css文件
<script src="{% static 'resource/js/config.js' %}" type="text/javascript">script>
<script src="{% static 'resource/libs/easyUI/easyui-lang-zh_CN.js' %}" type="text/javascript">script>
<script src="{% static 'resource/libs/easyUI/jquery.easyui.min.js' %}" type="text/javascript">script>
<script src="{% static 'resource/libs/fileInput/js/fileinput.js' %}" type="text/javascript">script>
<script src="{% static 'resource/libs/fileInput/js/locales/zh.js' %}" type="text/javascript">script>
我使用的是django+ boostrap
————————————————
html
<form id="newChangeRequestForm" method="post" class="container" enctype="multipart/form-data">
.........
<div class="form-group">
<label class="font-weight-bold">Add attachments:label>
<input name="uploadFile" type="file" id="uploadFile" multiple class="file-loading"/>
<span>支持jpg, jpeg, png, gif, pdf, doc, docx, xls, xlsx, ppt, pptx, zip, rar, txt格式，大小不超过50Mspan>
div>
<div class="col-6 mb-3 text-right">
<input
class="btn btn-primary"
id="SubmitTest"
type="button"
value=" SubmitTest"
onclick="checkSubmitTest()"
/>
div>
form>
js
var fileList = []
var isFirstSelect = true
$(function () {
//初始化fileinput
var fileInput = new FileInput();
fileInput.Init("uploadFileId", '');
});
//初始化fileinput
var FileInput = function () {
var oFile = new Object();
//初始化fileinput控件（第一次初始化）
oFile.Init = function (ctrlName, uploadUrl) {
var control = $('#' + ctrlName);
//初始化上传控件的样式
control.fileinput({
layoutTemplates: {
// footer:'',//隐藏全部小图标；
// actionUpload: '',//去除上传预览缩略图中的上传图片；
indicator: '', //去除上传状态图标(左侧➕)
actionDrag: '',//去除拖动图标(通常编辑的时候会显示这个图标)
actionDelete:'',//去除删除图标
//其他 参考fileinput.js/fileinput.min.js中 搜索 layoutTemplates，可以看到模板内所有元素 需要改哪个，直接在这里赋空字符串就行了
},
language: 'zh', //设置语言
theme: "fa",
uploadUrl: uploadUrl, //上传的地址
allowedFileExtensions: ['jpg', 'jpeg', 'png', 'gif', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx',
'zip', 'rar', 'txt', 'bmp', 'html'], //接收的文件后缀
uploadAsync: true, //默认异步上传
showUpload: false, //是否显示上传按钮
showRemove: true, //显示移除按钮
showCaption: true, //是否显示标题
dropZoneEnabled: true, //是否显示拖拽区域
initialPreviewAsData: true,
maxFileSize: 1024 * 50,//单位为kb，如果为0表示不限制文件大小,10M
//minFileCount: 0,
maxFileCount: 10, //表示允许同时上传的最大文件个数
// maxFilesNum: 3, //表示允许同时上传的最大文件个数
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
enctype: 'multipart/form-data',
overwriteInitial: false,
autoReplace: true, //自动替换
browseClass: "btn btn-primary", //按钮样式: btn-default、btn-primary、btn-danger、btn-info、btn-warning
previewFileIcon: "",
}).on('filebatchselected', function (evt, file) {
if (isFirstSelect) {
isFirstSelect = false
$.messager.alert("提示", '目前文件只支持一次性选择,再次选择文件将会覆盖原来的文件!', "warning")
}
});
//文件上传完成之后发生的事件
$("#uploadFileId").on("fileuploaded", function (event, data, previewId, index) {
console.log(data)
console.log(data.response.msg)
var msg = data.response.msg
$.messager.alert("提示", msg, "warning");
});
}
return oFile; //这里必须返回oFile对象，否则FileInput组件初始化不成功
};
function SubmitChangeRequestForm() {
var formData = new FormData($("#newChangeRequestForm")[0]);
// $("#uploadFileId").fileinput("upload"); // 单独上传文件接口
submitForm(formData);
}
function submitForm(formData) {
// var form = document.forms[0];
console.log(formData)
// var jsonData = JSON.stringify(formData);
$.ajax({
url: server_url + '/new_change_request/',
method: 'POST',
data: formData,
dataType: "json",
processData: false,
contentType: false,
cache: false,
success: function (data) {
console.log("data:" + data);
console.log("data:" + data.res);
if (data.status === 200) {
$.messager.alert("提示", data.msg, "info");
console.log("data:" + data.msg);
// window.setTimeout("window.location=server_url+'/new_change_request'", 1500);
// window.setTimeout("window.location=server_url+'/cp_index'", 1500);
return;
}
console.log(data)
$.messager.alert("提示", data.msg, "info");
},
//请求失败，包含具体的错误信息
error: function (data) {
console.log(data.msg);
}
});
}
Django后端部分
models
from django.db import models
class BaseModel(models.Model):
"""为模型类补充字段"""
create_time = models.DateTimeField(auto_now_add=True, verbose_name="创建时间")
update_time = models.DateTimeField(auto_now=True, verbose_name="更新时间")
created_date = models.DateField(verbose_name="创建日期", auto_now_add=True)
class Meta:
abstract = True # 说明是抽象模型类, 用于继承使用，数据库迁移时不会创建BaseModel的表
class File(BaseModel):
def generate_filename(self, filename):
url = "files/{}".format(filename)
return url
file = models.FileField(upload_to=generate_filename)
filename = models.CharField(verbose_name="文件名称", max_length=128, blank=True, null=True)
suffix = models.CharField(max_length=20, verbose_name='后缀', blank=True, null=True)
is_deleted = models.BooleanField(default=False)
content_type = models.ForeignKey(ContentType, on_delete=models.CASCADE, blank=True, null=True)
object_id = models.PositiveIntegerField(blank=True, null=True)
content_object = GenericForeignKey('content_type', 'object_id')
class Meta:
verbose_name = '文件'
def __str__(self):
return self.filename
views视图
class NewChangeRequest(LoginRequiredJSONMixin, View):
@transaction.atomic
def post(self, request):
print(request.FILES)
print(request.POST)
print(request.POST.get('title'))
files_obj = request.FILES.getlist('uploadFile')
print(type(files_obj), files_obj)
for file in files_obj:
filename = file.name
suffix = filename.rsplit(".", 1)[1]
file = File(file=file, filename=filename, suffix=suffix)
file.save()
data = {"data":'data!', 'msg':'文件保存成功!', 'status': 200}
return JsonResponse(data)
这里主要介绍文件保存的方法，form表单数据存入同理，有时间会在更新一篇