Browse Catalogs
Form form upload File
Ajax Uploading Files
Forge Ajax Upload Files
Form form upload file html
1234567 |
<
h3
>form表单上传文件</
h3
>
<
form
action="/upload_file/" method="post" enctype="multipart/form-data">
<
p
><
input
type="file" name="upload_file_form"></
p
>
<
input
type="submit">
</
form
>
|
Note: You must add the Enctype= "Multipart/form-data property.
View
123456789 |
def
index(request):
return
render(request,
"index.html"
)
def
upload_file(request):
print
(
"FILES:"
,request.FILES)
print
(
"POST:"
,request.POST)
return
HttpResponse(
"上传成功!"
)
|
Ajax uploading files What is Formdata
XMLHttpRequest Level 2 Adds a new interface FormData
. Using FormData对象
JavaScript, we can simulate a series of form controls with some key-value pairs, and we can also use the send()
XMLHttpRequest method to submit the "form" asynchronously. The FormData
biggest advantage of using it is that we can upload a binary file asynchronously, rather than the usual Ajax.
This object has been supported by newer versions of all major browsers, such as Chrome 7+, Firefox 4+, IE + +, Opera 12+, Safari 5+. Html
12345678910111213141516171819202122232425262728293031323334 |
<
h3
>Ajax上传文件</
h3
>
<
p
><
input
type="text" name="username" id="username" placeholder="username"></
p
>
<
p
><
input
type="file" name="upload_file_ajax" id="upload_file_ajax"></
p
>
<
button
id="upload_button">提交</
button
>
{#注意button标签不要用在form表单中使用#}
<
script
>
$("#upload_button").click(function(){
var username=$("#username").val();
var upload_file=$("#upload_file_ajax")[0].files[0];
var formData=new FormData();
formData.append("username",username);
formData.append("upload_file_ajax",upload_file);
$.ajax({
url:"/upload_file/",
type:"POST",
data:formData,
contentType:false,
processData:false,
success:function(){
alert("上传成功!")
}
});
})
</
script
>
|
Note: Contenttype:false, Processdata:false, essential. views.py
123456789 |
def
index(request):
return
render(request,
"index.html"
)
def upload_file(request):
print
(
"FILES:"
,request.FILES)
print
(
"POST:"
,request.POST)
return
HttpResponse(
"上传成功!"
)
|
Forge Ajax Upload File iframe tags
<iframe> tags provide an inline framework.
An inline frame is used to embed another document in the current HTML document.
Example:
1 |
< iframe src="http://www.baidu.com" width="1000px" height="600px"></ iframe >< em id="__mceDel" style=" font-family: ‘PingFang SC‘, ‘Helvetica Neue‘, Helvetica, Arial, sans-serif; font-size: 14px;"> </ em > |
Iframe+form
123456789101112131415161718192021222324252627 |
<
h3
>伪造Ajax上传文件</
h3
>
<
form
action="/upload_file/" method="post" id="form2" target="ifr" enctype="multipart/form-data">
<
p
>
<
iframe
name="ifr" id="ifr"></
iframe
></
p
>
<
p
><
input
type="file" name="upload_file"></
p
>
<
p
><
input type="text" name="user"></
p
>
<
input
type="button" value="提交" id="submitBtn">
</
form
>
<
script
>
$("#submitBtn").click(function(){
$("#ifr").load(iframeLoaded);
$("#form2").submit();
});
function iframeLoaded(){
alert(123)
}
</
script
><
em
id="__mceDel" style=" font-family: ‘PingFang SC‘, ‘Helvetica Neue‘, Helvetica, Arial, sans-serif; font-size: 14px;"> </
em
>
|
Views
12345678 |
def
index(request):
return
render(request,
"index.html"
)
def
upload_file(request):
print
(
"FILES:"
,request.FILES)
print
(
"POST:"
,request.POST)
return HttpResponse(
"上传成功!"
)
|
The Django Framework form form and Ajax upload file