Django-基于bootstrap⽂件上传，带上传进度条，完整前后台前台
查看⽂件是否上传成功
⼀、 前台
1.html设计：
<div class="form-group">
<label class="col-sm-2 control-label">附件:</label>
<div class="col-sm-7">
<input id="myfile" type="file" multiple>
<!--显⽰上传的⽂件名字-->jquery选择器模糊匹配
<input type="text" id="FileCover" class="form-control" readonly="true">
</div>
<div class="col-sm-1">
<button class="btn btn-primary btn-sm " type="button" onclick="$('input[id=myfile]').click();">
<i class="fa fa-folder-open" id="browse">  ；浏览</i>
</button>
</div>
<div class="col-sm-1">
<button class="btn btn-primary btn-sm " type="button" onclick="MyUpload()">
<i class="fa fa-send" id="upload_status">  ；上传</i>
</button>
</div>
</div>
2.添加js：
<script>
$('input[id=myfile]').change(function () {
var myfiles = ElementById("myfile").files;
var file_index = 0;
var file_len = myfiles.length;
var myfilename = null;
while (file_index < file_len) {
myfilename = myfilename + myfiles[file_index].name + ";";
file_index = file_index + 1;
}
//console.log(myfiles);
//$('#FileCover').val($(this).val());
$('#FileCover').val(myfilename);
//拼接上传的⽂件名字并返回到FileCover
jquery下载文件进度条})
</script>
3.上传函数
function MyUpload(){
var myfiles = ElementById("myfile").files;//获取⽂件
var totalfile = myfiles.length;//上传的⽂件个数
var uploadedfile = 0;//已上传的⽂件个数
var data = new FormData();//构建FormData⽤于Ajax发送
var file_index = 0;
/
/每上传⼀个⽂件，添加⼀个进度条
var addhtml = " <div id=\"backname\" class=\"col-sm-9\">⽂件1</div>\n" +
"                                    <div id=\"backurl\" style=\"display: none\"></div>\n" +
"                                    <div class=\"col-sm-2\">上传进度:</div>\n" +
"                                    <div id=\"percentage\" class=\"col-sm-1\">100%</div>\n" +
"                                    <div class=\"clearfix\"></div>\n" +
"                                    <div class=\"progress progress-small\" >\n" +
"                                        <div id=\"percentagebar\" style=\"width:0%;\" class=\"progress-bar progress-bar-success \"></div>\n" +        "                                    </div> ";
$("#show_upload").empty();//每次点击上传按钮，把所有的进度条清空
while (file_index < myfiles.length){
data.append('file', myfiles[file_index]);// 获取1个⽂件放⼊FormData中
反码的补码怎么算
var percentage = null;//上传进度
$.ajax({
type: "POST",javascript设计模式张容铭pdf
url: "/FileUploads/",
data: data,
processData: false, // 告诉jQuery不要处理数据
contentType: false, // 告诉jQuery不要设置类型
dataType:"json",
xhr:function xhr(){
var newbackname = "backname" + file_index;//⽂件名，本来想写后台返回的，懒
var newbackurl = "backurl" + file_index;//每个⽂件上传后，返回的前台访问的url
var newp = "percentage" + file_index;//每个⽂件的进度
var newpbar = "percentagebar" + file_index;//每个进度条的名字
var myfilename = myfiles[file_index].name;
$("#show_upload").append(addhtml);
$("#backname").attr('id',newbackname);
$("#backurl").attr('id',newbackurl);
$("#percentage").attr('id',newp);
$("#percentagebar").attr('id',newpbar);
var myxhr = $.ajaxSettings.xhr();
if(myxhr.upload){
myxhr.upload.addEventListener('progress',function (e) {
if(e.lengthComputable){
percentage = parseInt(e.loaded / e.total * 100);
var now_percentage = percentage + "%";
$("#"+newp).html(now_percentage);
$("#"+newpbar).css({"width":now_percentage});
$("#"+newbackname).html(myfilename);
}
},false);
}
return myxhr;
},
success: function(result){
//每次上传完毕后得到返回值，取出返回的json值
var filename = result.FileName;//后台返回新的⽂件名
var fileurl = result.FileUrl;//后台返回的⽂件url
uploadedfile = uploadedfile + 1;
if(uploadedfile == totalfile){
$("#upload_status").text("重新上传");
transformer用途alert("⽂件上传完毕！");
}
}
});
file_index = file_index + 1;
}
}
⼆、 后台
1.写url
2.写函数
@csrf_exempt
def FileUploads(req):
file = ('file')  # 获取⽂件对象，包括⽂件名⽂件⼤⼩和⽂件内容
curttime = time.strftime("%Y%m%d")
#规定上传⽬录
upload_url = os.path.join(settings.MEDIA_ROOT,'attachment',curttime)
#判断⽂件夹是否存在
folder = ists(upload_url)
if not folder:
os.makedirs(upload_url)
print("创建⽂件夹")
if file:
file_name = file.name
#判断⽂件是是否重名，懒得写随机函数，重名了，⽂件名加时间
if ists(os.path.join(upload_url,file_name)):
name, etx = os.path.splitext(file_name)
addtime = time.strftime("%Y%m%d%H%M%S")
finally_name = name + "_" + addtime + etx
#print(name, etx, finally_name)
else:
finally_name = file.name
#⽂件分块上传
upload_file_to = open(os.path.join(upload_url, finally_name), 'wb+')
for chunk in file.chunks():
upload_file_to.write(chunk)
upload_file_to.close()
#返回⽂件的URl
file_upload_url = settings.MEDIA_URL + 'attachment/' + curttime + '/' +finally_name        #构建返回值
response_data = {}
response_data['FileName'] = file_name
response_data['FileUrl'] = file_upload_url
response_json_data = json.dumps(response_data)#转化为Json格式
return HttpResponse(response_json_data)
>idea打包jar包

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。