jquery上传图片_文件上传三种方式

来源：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))

实现了异步刷新，但是部分老版本的浏览器不支持FormData对象

基于iframe实现form提交

<html lang="en"><head><meta charset="UTF-8"><title>Titletitle><style>.container img{width: 200px;height: 200px;
       }style>head><body><h1>基于iframe实现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内部的内容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))