实现文件上传的多种方法
2023-09-14 08:56:57 时间
实现文件上传的多种方法
一、Form表单上传
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>上传文件</title> </head> <body> <form action="/update.html/" method="POST" enctype="multipart/form-data"> {% csrf_token %} <input type="text" name="user"> <div style="position:relative;"> <a>选择文件</a> <input type="file" name="img" style="opacity:0;position:absolute;top:0;left:0;height:16px;width:64px;"> </div> <input type="submit" value="提交"> </form> </body> </html>
def update(request): if request.method=="GET": return render(request,'update.html') else: img=request.FILES.get('img') if img: print(img.name) print(img.size) f = open(img.name, "wb") for line in img.chunks(): f.write(line) f.close() return HttpResponse('上传成功') else: return HttpResponse('选择上传文件')
二、AJAX上传
HTML - XMLHttpRequest
获取数据: var fileObj = document.getElementById("img").files[0];
封装数据: var form = new FormData(); form.append("k1", "v1"); form.append("fff", fileObj); 注意:FormData是个用来封装数据的。
创建XMLHttpRequest: var xhr = new XMLHttpRequest();
发送数据:
xhr.open("post", '/index', true); xhr.send(form);
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="file" id="img" /> <input type="button" onclick="UploadFile();" /> <script> function UploadFile(){ var fileObj = document.getElementById("img").files[0]; var form = new FormData(); form.append("k1", "v1"); form.append("fff", fileObj); var xhr = new XMLHttpRequest(); xhr.open("post", '/index', true); xhr.send(form); } </script> </body> </html> HTML - XMLHttpRequest
HTML - jQuery
1.这里使用ajax进行数据提交
2.需要加上这两条
processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="file" id="img" /> <input type="button" onclick="UploadFile();" /> <script> function UploadFile(){ var fileObj = $("#img")[0].files[0]; var form = new FormData(); form.append("k1", "v1"); form.append("fff", fileObj); $.ajax({ type:'POST', url: '/index', data: form, processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType success: function(arg){ console.log(arg); } }) } </script> </body> </html> HTML - jQuery
HTML - iframe
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <form id="my_form" name="form" action="/index" method="POST" enctype="multipart/form-data" > <div id="main"> <input name="fff" id="my_file" type="file" /> <input type="button" name="action" value="Upload" onclick="redirect()"/> <iframe id='my_iframe' name='my_iframe' src="" class="hide"></iframe> </div> </form> <script> function redirect(){ document.getElementById('my_iframe').onload = Testt; document.getElementById('my_form').target = 'my_iframe'; document.getElementById('my_form').submit(); } function Testt(ths){ var t = $("#my_iframe").contents().find("body").text(); console.log(t); } </script> </body> </html>
演示图片上传功能(iframe+From)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> {% load staticfiles %} </head> <body> <!--FormData文件上传--> <script src="{% static '/js/jquery/jquery-3.3.1.js' %}"></script> <iframe style="" id="iframe" name="ifra"></iframe> <form id="fm" action="/upload_img.html/" method="post" enctype="multipart/form-data" target="ifra"> <input type="file" name="File" onchange="uploadFile();"> </form> <h3>预览</h3> <div id="preview"> </div> <script> function uploadFile(){ document.getElementById('iframe').onload=reloadIframe; document.getElementById('fm').submit(); } function reloadIframe(){ var content=this.contentWindow.document.body.innerHTML; var obj=JSON.parse(content); console.log(obj); var tag=document.createElement('img'); tag.src='http://127.0.0.1:8080/'+obj.data; console.log(obj.data); console.log(tag.src); $('#preview').empty().append(tag); } </script> </body> </html>
from django.shortcuts import render, HttpResponse, redirect import json import os import uuid def upload_img(request): nid = str(uuid.uuid4()) ret={'status':True,'data':None,'message':None} obj=request.FILES.get('File') file_path=os.path.join('static',nid+obj.name) print(file_path) print(1) f=open(file_path,'wb') for line in obj.chunks(): f.write(line) f.close() ret['data']=file_path return HttpResponse(json.dumps(ret))
相关文章
- Python 进行 SSH 操作,实现本地与服务器的链接,进行文件的上传和下载
- python上传文件方法总结
- 干货!java文件上传判重姿势浅谈
- upload-labs文件上传漏洞
- PHP文件上传方法
- PHP实现通过CURL上传本地文件到另一个服务器
- JSP的文件上传和下载
- windows电脑上传ipa文件到appstore的方法
- PHP 5.6 如何使用 CURL 上传文件
- linux实现对上传文件的定时备份、增量备份的方法
- Git在windows下上传文件至github流程详解程序员
- 使用commons-fileupload实现文件上传详解编程语言
- 使用Linux系统上传文件的步骤(向linux上传文件)
- 上传PHP和MySQL实现文件上传功能(phpmysql文件)
- Linux远程传输文件的简单方法(linux远程上传文件)
- Linux下快速传输文件的rz命令(linux上传文件rz)
- Linux FTP上传文件报错解决方法(linuxftp无法上传)
- 解决Linux无法上传文件的方法(linux无法上传文件)
- Linux文件写入教程:简单易懂的文件写入方法(linux将文件写入文件)
- 可上传大小与如何限制Linux单文件最大可上传大小及限制方法(linux单文件最大)
- Linux上传文件的简单方法(linux 怎么上传文件)
- MySQL上传文件的实现方法(mysql上传文件语句)
- 使用MySQL实现高效稳定的200MB文件上传教程(mysql上传200m)
- asp.netslickupload使用方法(文件上传)
- 最新的php文件上传模型,支持多文件上传
- PHP图片文件上传实现代码
- php中关于普通表单多文件上传的处理方法
- SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
- Asp.Net超大文件上传问题解决
- jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
- php多文件上传实现代码
- yii上传文件或图片实例
- Thinkphp多文件上传实现方法
- 封装ThinkPHP的一个文件上传方法实例
- PHP文件上传判断file是否己选择上传文件的方法
- iis6和iis7限制上传文件(请求头)大小以及不支持FSO解决方法
- C#采用HttpWebRequest实现保持会话上传文件到HTTP的方法