1、首先看下前端界面:
2、前端代码:
图片上传(最多三张):
$(function() {
var fileArr=new Array()
var tmpl ='
',$gallery =$("#gallery"),
$galleryImg =$("#galleryImg"),
$uploaderInput =$("#uploaderInput"),
$uploaderFiles =$("#uploaderFiles");
$uploaderInput.on("change",function (e) {
var src,url =window.URL ||window.webkitURL ||window.mozURL,
files = e.target.files;
var length =fileArr.length;
for (var i =0,len =files.length;i
var file =files[i];
if (length +i +1 >3) {
break;
}
fileArr.push(file);
if (url) {
src =url.createObjectURL(file);
}else {
src = e.target.result;
}
$uploaderFiles.append($(tmpl.replace('#url#',src)));
}
checkPhotoSize();
});
//控制显示三张以内照片
function checkPhotoSize() {
if (fileArr.length >2) {
$(".weui-uploader__input-box").hide();
}else {
$(".weui-uploader__input-box").show();
}
}
var index;//第几张图片
$uploaderFiles.on("click","li",function () {
index =$(this).index();
$galleryImg.attr("style",this.getAttribute("style"));
$gallery.fadeIn(100);
});
$gallery.on("click",function () {
$gallery.fadeOut(100);
});
//删除图片
$(".weui-gallery__del").click(function () {
$uploaderFiles.find("li").eq(index).remove();
fileArr.splice(index,1);
checkPhotoSize();
})
$("#btn").click(function(){
var formData =new FormData();
for(var i =0;i
alert(fileArr[i])
formData.append("file[]",fileArr[i]);
}
console.log(formData)
$.ajax({
url:"/upload_file/",
type:"POST",
async:false,
cache:false,
processData:false,// 告诉jQuery不要去处理发送的数据
contentType:false,// 告诉jQuery不要去设置Content-Type请求头
data:formData,
success:function(data){
}
});
{#$.toast("保存成功", 5000);#}
{#window.location.href = "xxxx.html";#}
});
});
url
def test(request):
return render(request,'test.html')
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
def upload_file(request):
# file_obj = request.FILES.get('file')
# files = request.FILES.getlist('file_field')
# print(files)
# print(file_obj)
# print(BASE_DIR)
MEDIA_ROOT = os.path.join(BASE_DIR,"static/images/")
for file_objin request.FILES.getlist("file[]"):
file_path =MEDIA_ROOT+file_obj.name
print(file_path)
with open(file_path,'wb')as f:
for chunkin file_obj.chunks():
f.write(chunk)
return HttpResponse(file_path)
# files = request.FILES["file[]"]
# print(request.FILES.getlist("file[]"))
# print(type(files))
# print(files)
# print(len(request.FILES.getlist("file[]")))
# return HttpResponse('ok')