前台
查看文件是否上传成功
一、 前台
1.html设计:
<div class="form-group">
<label class="col-sm-2 control-label">附件:</label>
<div class="col-sm-7">
<input id="myfile" type="file" style="display: none" multiple>
<!--显示上传的文件名字-->
<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 = document.getElementById("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
})
</script>
3.上传函数
function MyUpload(){
var myfiles = document.getElementById("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",
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("重新上传");
alert("文件上传完毕!");
}
}
});
file_index = file_index + 1;
}
}
二、 后台
1.写url
2.写函数
@csrf_exempt
def FileUploads(req):
file = req.FILES.get('file') # 获取文件对象,包括文件名文件大小和文件内容
curttime = time.strftime("%Y%m%d")
#规定上传目录
upload_url = os.path.join(settings.MEDIA_ROOT,'attachment',curttime)
#判断文件夹是否存在
folder = os.path.exists(upload_url)
if not folder:
os.makedirs(upload_url)
print("创建文件夹")
if file:
file_name = file.name
#判断文件是是否重名,懒得写随机函数,重名了,文件名加时间
if os.path.exists(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)