上传文件 --- Ajax和iframe

一，上传图片并在前端展示

为了避免前端整体刷新，我们采用ajax+iframe（兼容所有浏览器）上传，这样用户上传之后就可以立即看到图片：

上传前

 

上传后

 

<form style="display: inline-block" id="upload_img_form" name="form" action="/upload/" method="POST"
          enctype="multipart/form-data">
        {% csrf_token %}
        　　<a id="fakeFile" class="fake-file">
        　　　　<input type="file" name="img" onchange="UploadImage(this);"/>
        　　　　<input type="text" name="url" class="hide"/>
        </a>
        <iframe id='upload_img_iframe' name='upload_img_iframe' src="" class="hide"></iframe>
</form>

1，enctype="multipart/form-data"，文件上传相对于其他表单类型出现的概率比较小，而文件上传确是这些表单类型中的异类，它需要在form写上enctype="multipart/form-data"。

2，{% csrf_token %}，django运行程序时，请求首先会通过中间件，然后才会通过url，django配置文件中有关于跨站请求伪造的中间件.

MIDDLEWARE_CLASSES = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    <strong>'django.middleware.csrf.CsrfViewMiddleware',</strong>
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

JavaScript代码：

function UploadImage(ths) {
        document.getElementById('upload_img_iframe').onload = UploadImageComplete;  //页面加载完成后执行UploadImageComplete函数
        document.getElementById('upload_img_form').target = 'upload_img_iframe';  //设置form提交到iframe
        document.getElementById('upload_img_form').submit(); //#提交到iframe
    }
    function UploadImageComplete() {
        var origin = $("#upload_img_iframe").contents().find("body").text();//#获取图片数据
        var obj = JSON.parse(origin); //#转换成JavaScript对象
            var img = document.createElement('img'); //#创建img标签
            img.src = obj.path; //图片地址
            img.style.width = "200px";
            img.style.height = "180px";
            $("#upload_img_form").append(img);//添加图片
            $('#fakeFile').addClass('hide');
            $('#reUploadImage').removeClass('hide');
            $('#fakeFile').find('input[type="text"]').val(obj.data);//#保存图片地址到隐藏的input标签中
    }

后台views函数代码：

def upload(request):
    if request.method == 'POST':
        obj = request.FILES.get('img')#获取图片对象
        pat = os.path.join('static','img','vote',obj.name)#文件打开目录，需要和当前文件路径一致    
        f = open(pat,'wb')
        for ch in obj.chunks():
            f.write(ch)
        f.close()
        ret = {'path': '/'+os.path.join('static','img','vote',obj.name)}#django前端文件路径：'/' + 静态文件前缀static + 静态文件下的目录
        import json
        return HttpResponse(json.dumps(ret))#反馈给前端
    return render(request,'upload.html',)