Browse Catalogs
Form form upload File
Ajax Uploading Files
Forge Ajax Upload Files
Form form upload file html
| 1234567 |
<h3>form表单上传文件</h3><formaction="/upload_file/" method="post" enctype="multipart/form-data"> <p><inputtype="file" name="upload_file_form"></p> <inputtype="submit"></form> |
Note: You must add the Enctype= "Multipart/form-data property.
View
| 123456789 |
defindex(request): returnrender(request,"index.html")defupload_file(request): print("FILES:",request.FILES) print("POST:",request.POST) returnHttpResponse("上传成功!") |
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><inputtype="text" name="username" id="username" placeholder="username"></p><p><inputtype="file" name="upload_file_ajax" id="upload_file_ajax"></p><buttonid="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 |
defindex(request): returnrender(request,"index.html") defupload_file(request): print("FILES:",request.FILES) print("POST:",request.POST) returnHttpResponse("上传成功!") |
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 |
<iframesrc="http://www.baidu.com" width="1000px" height="600px"></iframe><emid="__mceDel" style=" font-family: ‘PingFang SC‘, ‘Helvetica Neue‘, Helvetica, Arial, sans-serif; font-size: 14px;"> </em> |
Iframe+form
| 123456789101112131415161718192021222324252627 |
<h3>伪造Ajax上传文件</h3><formaction="/upload_file/" method="post" id="form2" target="ifr" enctype="multipart/form-data"> <p> <iframename="ifr" id="ifr"></iframe></p> <p><inputtype="file" name="upload_file"></p> <p><inputtype="text" name="user"></p> <inputtype="button" value="提交" id="submitBtn"></form><script> $("#submitBtn").click(function(){ $("#ifr").load(iframeLoaded); $("#form2").submit(); }); function iframeLoaded(){ alert(123) }</script><emid="__mceDel" style=" font-family: ‘PingFang SC‘, ‘Helvetica Neue‘, Helvetica, Arial, sans-serif; font-size: 14px;"> </em> |
Views
| 12345678 |
defindex(request): returnrender(request,"index.html") defupload_file(request): print("FILES:",request.FILES) print("POST:",request.POST) returnHttpResponse("上传成功!") |
The Django Framework form form and Ajax upload file
