python+ajaxFileUpload 无刷新上传文件

需要准备文件

http://pan.baidu.com/s/1bp4N3nL   qqi0

html

<script src="{% static 'js/jquery.js' %}"></script>

<script src="{% static 'js/ajaxfileupload.js' %}"></script>

<form class="form-horizontal" action="" enctype="multipart/form-data" method="post" name="adUpload" id="adUpload" accept-charset="utf-8">
<div class="col-sm-9 center-block">
<label class="col-sm-4 control-label">选择上传广告类型</label>
<div class="col-sm-5">
<label class="checkbox-inline">
<input type="radio" id="inlineCheckbox1" name="ad" onclick="adType(1)" checked value="1"> 视频
</label>
<label class="checkbox-inline">
<input type="radio" id="inlineCheckbox2" name="ad" onclick="adType(2)" value="2"> 图片
</label>
</div>
</div>
<br/><br/><br/>
<div class="col-sm-9 center-block">
<label for="inputPassword3" class="col-sm-4 control-label">选择excel文件</label>
<div class="col-sm-3">
{% csrf_token %}
<input type="file" name="file" id="file_upload" class="form-control">
</div>
<input type="button" onclick="ajaxExcelUpload()" class="control-label btn btn-info" value="上传" />　　
</div>
</form>

<script>

function ajaxExcelUpload(){
$('#up_pro').show();
//progress_dataUp();
var adType = $("input[type='radio']:checked").val();
$.ajaxFileUpload({
url: '/handleUpload/',
type:'POST',
data: {adType: adType },
secureuri: false,
fileElementId: 'file_upload',
dataType: 'json',
success: function (data, status) {

if(data['res'] == 1){
$('#up_pro').html(data['data']);
$('#up_pro').css('color','#5bc0de');
{# setTimeout(function(){#}
{# $('#up_pro').html('正在进行数据导入，请稍等 ...');#}
{# $('#up_pro').css('color','#333');#}
{# $('#up_pro').hide();#}
{# //location.reload();#}
{# },2000);#}

}
if(data['res'] == 0){
$('#up_pro').html('上传失败！'+data['data']);
$('#up_pro').css('color','#c00');
}

},
error: function (data, status, e) {
console.log(status);
$('#up_pro').html('上传失败！');
$('#up_pro').css('color','#c00');
setTimeout(function(){
$('#up_pro').html('数据导入中，请稍等 ...');
$('#up_pro').css('color','#333');
$('#up_pro').hide();
},2000);
}
});
}

</script>

views.py

@csrf_exempt
def handle_upload(request):
if request.method=="POST":
type = request.POST.get('adType',None)

file = request.FILES.get("file",None)
if file: # 处理附件上传到方法
try:
handle_upload_file(file)

except Exception as e:
pass
data = str(e)
res = 0
result = {'res': res,'data':data}
content = json.dumps(result)
return HttpResponse(content)

def handle_upload_file(filename):
"""
handle_upload_file 上传文件
"""
try:
path = os.path.dirname(os.path.dirname(__file__))+'/static/ad/upload/'
print path
if not os.path.exists(path):
os.makedirs(path)
destination = open(path+filename.name, 'wb+')
for chunk in filename.chunks():
destination.write(chunk)
destination.close()
res = 1
except Exception, e:
print e
res = 0
return res

需要注意的 data

使用ajaxFileUpload上传文件时,有时需要带参数提交,网上有很多资料说使用data,但其实要使用data带参数是需要修改的,否则后台是获取不到的

分析原因：

ajaxFileUpload为了实现无刷新异步提交文件,构建 iframe 然后创建form表单 再将要上传的文件写上去再提交.但是原代码 却没有处理data.所以这块内容需要我们自己加上去.

下面红色部分为修改ajaxFileUpload.js的三处地方:

备注:好像csdn代码中加颜色加粗  有问题这三处修改的地方我直接贴出来,位置看下面的代码,

①createUploadForm: function(id, fileElementId,data);

②jQuery(form).appendTo('body')的前面修改：

if (data) { for (var i in data) { $('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); } } 

③var form = jQuery.createUploadForm(id, s.fileElementId,s.data);

百度云盘中文件已修改过可以直接使用