Ajax上傳文件
簡單的小例子
在input框中輸入數據，點擊提交按鈕。數據顯示在iframe中，這裏是經過form標籤中的targets屬性來綁定iframe標籤python
views.py
def test(request):
if request.method == 'GET':
return render(request,'test.html')
root = request.POST.get('root')
ret = {'status':True,'message':root}
return JsonResponse(ret)
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h3>基於iframe+Form表單提交數據</h3>
<iframe id="iframe" name="ifr"></iframe>
<form id="fm" action="/test/" method="post" target="ifr">
<input type="text" name="root">
<a onclick="AjaxSubmit()">提交</a>
</form>
</div>
</body>
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script>
function AjaxSubmit() {
document.getElementById('iframe').onload = reloadIframe // iframe的onload屬性，在iframe內容加載時自動執行
document.getElementById('fm').submit();
}
function reloadIframe() {
var content = this.contentWindow.document.body.innerText // 獲取到iframe內部的值，注意是一個頁面，經過這種方式取值
var obj = JSON.parse(content)
if (obj.status){
alert(obj.message)
}
}
</script>
</html>
1.用FormData封裝表單數據，上傳文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h3>上傳文件</h3>
<input type="file" id="file">
<button onclick="AjaxSubmit()">提交</button>
</div>
</body>
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script>
function AjaxSubmit() {
var formdata = new FormData();
var file = document.getElementById('file').files[0]
formdata.append('file', file)
$.ajax({
url: '/test/',
method: 'POST',
data: formdata,
contentType: false,
processData: false,
success: function (data) {
console.log(data)
}
})
}
</script>
</html>
2. 用iframe上傳文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h3>基於iframe+Form表單上傳文件</h3>
<iframe id="iframe" name="ifr" style="display: none;"></iframe>
<form id="fm" action="/test/" method="post" enctype="multipart/form-data" target="ifr">
<input type="file" name="file">
<a onclick="AjaxSubmit1()">提交</a>
</form>
</div>
</body>
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script>
function AjaxSubmit1() {
document.getElementById('iframe').onload = reloadIframe // iframe的onload屬性，在iframe內容加載時自動執行
document.getElementById('fm').submit();
}
function reloadIframe() {
var content = this.contentWindow.document.body.innerText // 獲取到iframe內部的值，注意是一個頁面，經過這種方式取值
console.log(content)
}
</script>
</html>
3. 預覽圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h3>基於iframe+Form表單上傳文件</h3>
<iframe id="iframe" name="ifr" style="display: none;"></iframe>
<form id="fm" action="/upload_img.html/" method="post" enctype="multipart/form-data" target="ifr">
<input type="file" name="file" onchange="AjaxSubmit1()">
</form>
<h3>預覽</h3>
<div id="preview">
</div>
</div>
</body>
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script>
function AjaxSubmit1() {
document.getElementById('iframe').onload = reloadIframe
document.getElementById('fm').submit();
}
function reloadIframe() {
var content = this.contentWindow.document.body.innerText
var obj = JSON.parse(content)
var tag = document.createElement('img');
tag.src = obj.data;
$('#preview').empty().append(tag);
}
</script>
</html>
def upload_img(request):
ret = {'status':True,'data':None,'message':None}
obj = request.FILES.get('file')
import uuid
nid = str(uuid.uuid4())
file_path = os.path.join('static', nid+obj.name)
f = open(file_path,'wb')
for line in obj.chunks():
f.write(line)
f.close()
ret['data'] = file_path
return HttpResponse(json.dumps(ret))
相關文章
- 1. ajax 文件上傳，ajax
- 2. ajax 上傳文件
- 3. Ajax上傳文件
- 4. ajax上傳文件
- 5. ajax 文件上傳
- 6. Ajax文件上傳
- 7. Ajax 文件上傳插件
- 8. 僞ajax上傳文件
- 9. [Asp.net] MVC Ajax 上傳文件
- 10. ajax上傳文件 連接
- 更多相關文章...
- • PHP 文件上傳 - PHP教程
- • R XML 文件 - R 語言教程
- • Flink 數據傳輸及反壓詳解
- • Docker容器實戰(七) - 容器眼光下的文件系統
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. ajax 文件上傳，ajax
- 2. ajax 上傳文件
- 3. Ajax上傳文件
- 4. ajax上傳文件
- 5. ajax 文件上傳
- 6. Ajax文件上傳
- 7. Ajax 文件上傳插件
- 8. 僞ajax上傳文件
- 9. [Asp.net] MVC Ajax 上傳文件
- 10. ajax上傳文件 連接