1.? XMLHttpRequest(原生ajax)
<input class="file" type="file" id="fafafa" name="fileupload" />
<input type="button" value="提交XHR" onclick="xhrSubmit();"/>
<script type="text/javascript">
functionxhrSubmit() {
{# $('#fafafa')[0]注意這兒的寫法#}
varfile_obj = document.getElementById('fafafa').files[0];
varfd =newFormData();
fd.append('fafafa',file_obj);
xhr=newXMLHttpRequest();
xhr.open('POST', '/upload_file/',true)
xhr.send(fd);
xhr.onreadystatechange=function() {
//后端接受完畢
if(xhr.readyState == 4){
varobj =JSON.parse(xhr.responseText);
console.log(obj);
}
};
}
</script>
2.JQueryAjax
<input type="button" value="jQuery ajax提交" onclick="jqSubmit();"/>
<script type="text/javascript" src="/static/jquery-1.11.1.js"></script>
<script type="text/javascript">
functionjqSubmit() {
{# $('#fafafa')[0]#}
varfile_obj = document.getElementById('fafafa').files[0];
varfd =newFormData();
fd.append('username', 'root')
fd.append('fafafa', file_obj);
$.ajax({
url:'/upload_file/',
type:'POST',
data:fd,
processData:false,//tell jQuery not to process the data
contentType:false,//tell jQuery not to set contentType
//這兒的三個(gè)參數(shù)其實(shí)就是XMLHttpRequest里面帶的信息显熏。
success:function(arg,a1,a2) {
console.log(arg);
console.log(a1);
console.log(a2);
}
})
}
</script>
3.偽ajax(iframe標(biāo)簽雄嚣，既發(fā)送，也接受)
<form action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
<iframe id="ifm1" name="ifm1"></iframe>
{% csrf_token %}
{# 這兒也可以設(shè)置自動(dòng)提交喘蟆，就把下面的提交去掉现诀，加一個(gè)onchange="changeUpload();#}
<input type="file" name="fafafa"/>
<input type="submit" onclick="iframeSubmit()" name="提交"/>
</form>
<div id="preview"></div> <!-- 處理預(yù)覽 -->
<script type="text/javascript">
function iframeSubmit() {
{# 等點(diǎn)了submit再加載load方法#}
$('#ifm1').load(function () {
var text = $('#ifm1').contents().find('body').text();
var obj = JSON.parse(text);
console.log(obj);
//處理預(yù)覽
$('#preview').empty();
var imgTag = document.createElement('img');
{# 注意這兒的路徑，得加上"/"#}
imgTag.src = "/" +obj.data;
$('#preview').append(imgTag);
})
}
</script>
4. python后端處理
fafafa = request.FILES.get('fafafa')
importos
img_path= os.path.join('static/images',fafafa.name)
#下面這句等于 f = open(str(fafafa),mode='wb)履肃，并且添加了清理功能（f.close）仔沿。
with open(img_path,'wb') as f:
foriteminfafafa.chunks():
f.write(item)
