jquery上传图片_文件上传三种方式
生活随笔
收集整理的這篇文章主要介紹了
jquery上传图片_文件上传三种方式
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
來源：python寶典? ? 鏈接：
https://mp.weixin.qq.com/s/YUplCQDfAucA_rS8E1T6WA
需求
上傳圖片在頁面顯示
Form表單上傳
<html lang="en"><head><meta charset="UTF-8"><title>Titletitle>head><body><form method="POST" action="/upload.html" enctype="multipart/form-data"><input type="text" name="user" /><input type="file" name="fafafa" /><input type="submit" value="提交" />form><div>? ? ? {% if img %}<img style="height: 200px;width: 200px;" src="/{{ img }}" />
? ? ? {% endif %}div><script src="/static/jquery-2.1.4.min.js">script>body>html>
//后臺代碼
from django.shortcuts import render
import os
def upload(request):
? if request.method == 'GET':
? ? ? return render(request,'upload.html')
? elif request.method == "POST":
? ? ? user = request.POST.get('user')
? ? ? fafafa = request.POST.get('fafafa')
? ? ? obj = request.FILES.get('fafafa')
? ? ? file_path = os.path.join('static','upload',obj.name)
? ? ? f = open(file_path, 'wb')
? ? ? for chunk in obj.chunks():
? ? ? ? ? f.write(chunk)
? ? ? f.close()
? ? ? ret = {'status': True, 'path': file_path}
? ? ? return render(request,"upload.html",{'img':file_path})
缺點：上傳后整個頁面會刷新，不好
Ajax上傳
<html lang="en"><head><meta charset="UTF-8"><title>Titletitle><style>.container img{width: 200px;height: 200px;? ? ? }style>head><body><input ID="v1" name="user" placeholder="用戶"><input type="file" name="fafafa" id="img" /><input type="button" value="提交XML" onclick="UploadXML()" /><input type="button" value="提交JQ" onclick="Uploadjq()" /><div id="imgs">div>body><script src="/static/jquery-2.1.4.min.js">script><script>function UploadXML() {var dic = new FormData();
? ? ? ? ? dic.append('user', $('#v1').val());
? ? ? ? ? dic.append('fafafa', document.getElementById('img').files[0]);var xml = new XMLHttpRequest();
? ? ? ? ? xml.open('post', '/upload.html', true);
? ? ? ? ? xml.onreadystatechange = function () {if(xml.readyState == 4){var obj = JSON.parse(xml.responseText);console.log(obj)if(obj.status){var img = document.createElement('img');
? ? ? ? ? ? ? ? ? ? ? img.src = "/" + obj.path;document.getElementById("imgs").appendChild(img);
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
? ? ? ? ? };
? ? ? ? ? xml.send(dic);
? ? ? }function Uploadjq() {var dic = new FormData();
? ? ? ? ? dic.append('user', $('#v1').val());
? ? ? ? ? dic.append('fafafa', document.getElementById('img').files[0]);
? ? ? ? ? $.ajax({url: '/upload.html',type: 'POST',data: dic,processData: false, ?// tell jQuery not to process the data
? ? ? ? ? ? ? contentType: false, ?// tell jQuery not to set contentType
? ? ? ? ? ? ? dataType: 'JSON',success: function (arg) {if (arg.status){console.log("111")var img = document.createElement('img');
? ? ? ? ? ? ? ? ? ? ? img.src = "/" + arg.path;
? ? ? ? ? ? ? ? ? ? ? $('#imgs').append(img);
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
? ? ? ? ? })
? ? ? }script>body>html>
/后臺代碼
from app01 import models
import json
from django.shortcuts import render,HttpResponse
import os,json
def upload(request):
? if request.method == 'GET':
? ? ? return render(request,'upload.html')
? elif request.method == "POST":
? ? ? user = request.POST.get('user')
? ? ? print(user)
? ? ? fafafa = request.POST.get('fafafa')
? ? ? obj = request.FILES.get('fafafa')
? ? ? file_path = os.path.join('static','upload',obj.name)
? ? ? f = open(file_path, 'wb')
? ? ? for chunk in obj.chunks():
? ? ? ? ? f.write(chunk)
? ? ? f.close()
? ? ? ret = {'status': True, 'path': file_path}
? ? ? return HttpResponse(json.dumps(ret))
實現(xiàn)了異步刷新，但是部分老版本的瀏覽器不支持FormData對象
基于iframe實現(xiàn)form提交
<html lang="en"><head><meta charset="UTF-8"><title>Titletitle><style>.container img{width: 200px;height: 200px;? ? ? }style>head><body><h1>基于iframe實現(xiàn)form提交h1><form action="/upload.html" method="post" target="iframe_1" enctype="multipart/form-data"><iframe style="display: none" ?id="iframe_1" name="iframe_1" src="" onload="loadIframe();">iframe><input type="text" name="user" /><input type="file" name="fafafa" /><input type="submit" value="提交" />form><div id="imgs">div>body><script src="/static/jquery-2.1.4.min.js">script><script>function loadIframe() {console.log(1);// 獲取iframe內(nèi)部的內(nèi)容var str_json = $('#iframe_1').contents().find('body').text();var obj = JSON.parse(str_json);if (obj.status){var img = document.createElement('img');
? ? ? ? ? ? ? img.src = "/" + obj.path;
? ? ? ? ? ? ? $('#imgs').append(img);
? ? ? ? ? }
? ? ? }script>body>html>
///后臺代碼
from django.shortcuts import render,HttpResponse
import os,json
def upload(request):
? if request.method == 'GET':
? ? ? return render(request,'upload.html')
? elif request.method == "POST":
? ? ? user = request.POST.get('user')
? ? ? print(user)
? ? ? fafafa = request.POST.get('fafafa')
? ? ? obj = request.FILES.get('fafafa')
? ? ? file_path = os.path.join('static','upload',obj.name)
? ? ? f = open(file_path, 'wb')
? ? ? for chunk in obj.chunks():
? ? ? ? ? f.write(chunk)
? ? ? f.close()
? ? ? ret = {'status': True, 'path': file_path}
? ? ? return HttpResponse(json.dumps(ret))
效果
python爬蟲人工智能大數(shù)據(jù)公眾號
總結(jié)
以上是生活随笔為你收集整理的jquery上传图片_文件上传三种方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微软收购动视暴雪再遇阻 谷歌和英伟达：我
- 下一篇： js粘贴板为什么获取不到图片信息_图床+