首页 > > 网络编程 > 其它 >

Django文件上传三种方式以及简单预览功能

2018-06-18 00:35:38来源：未知阅读 ()

主要内容：

一、文件长传的三种方式

二、简单预览功能实现

一、form表单上传

1.页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="{% url 'upload' %} " method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="file" name="img">
    <input type="submit">
</form>
</body>
</html>

2.后端view函数处理

def upload(request):
    if request.method=="GET":
        return  render(request,'upload.html')
    elif request.method=="POST":
        res={"status":"success","code":999}
        img_obj=request.FILES.get('img')#获取文件对象
        with open(os.path.join('static',img_obj.name),"wb") as f:
            for chunk in img_obj.chunks(chunk_size=1024):
                f.write(chunk)
        return HttpResponse(json.dumps(res))

二、利用Jquery中ajax+FormData实现上传文件

FormData使用方式：

创建一个空的FormData对象，然后再用append方法逐个增加键值对

　　var formdata = new FormData();
　　formdata.append("name","xx");
　　formdata.append("flie", filename);

取得form元素对象，将它作为参数传入FormData对象中。

　　var formOjb = document.getElementById("form");
　　var formdata = new FormData(formOjb );

利用form元素对象的getFormData方法生成它

　　var formobj = document.getElementById("form");
　　var formdata = formobj.fetFormData();

1.页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="{% url 'upload' %} " method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="file" name="img">
</form>
<span style="padding: 5px;color: royalblue" onclick="Jqajax();">jq上传</span>
<script type="text/javascript" src="/static/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/static/jquery.cookie.js"></script>
<script>

    function Jqajax() {
       var file_obj=$('input[name="img"]')[0].files[0];//获取dom形式的文件对象
       var form_obj=new FormData();   //创建formdata对象
       form_obj.append('img',file_obj);   //将文件对象加载formdata中
        $.ajaxSetup({                     //设置csrf_token
            beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", $.cookie("csrftoken"));
            }
        });
       $.ajax({
           type: 'POST',
           url: '{% url 'upload' %}',
           data: form_obj,//指明发送的文件对象
           processData: false, // 告诉jquery要传输data对象
           contentType: false,   // 告诉jquery不需要增加请求头对于contentType的设置
                success: function (data) {
                    console.log(data)
           }
       })
    }
</script>
</body>
</html>

后端处理逻辑不变

三、基于iframe实现伪ajax文件上传

原理：iframe数据提交不刷新页面

好处：通过iframe的src属性进行上传功能，这样的好处不用依赖FormData对象，低版本浏览器可能不支持该对象。

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <form action="{% url 'upload' %}" method="post" target="iframe_1" enctype="multipart/form-data">
     {% csrf_token %}
        <iframe style="display: none"  id="iframe_1" name="iframe_1" src=""></iframe>
        <input type="file" name="img" />
        <input type="submit" onclick="iframeSubmmit();" value="iframe上传"/>
    </form>
<script type="text/javascript" src="/static/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/static/jquery.cookie.js"></script>
<script>
function iframeSubmmit() {
 $('#iframe_1').load(function () {//用户获取上传成功以后的返回值
    var text=$('#iframe_1').contents().find('body').text();
    var obj=JSON.parse(text);
    console.log(obj) ;
 })
}
</script>
</body>
</html>

后端处理逻辑一样

四、图片预览功能

原理：通过图片上传时候服务端返回文件路径，然后使用js设置a标签src属性实现预览功能

后端代码：

def upload(request):
    if request.method=="GET":
        return  render(request,'upload.html')
    elif request.method=="POST":
        img_obj=request.FILES.get('img')#获取文件对象
        file_path=os.path.join('static',img_obj.name)
        res={"status":"success","code":999,"file_path":file_path}
        with open(os.path.join(file_path,"wb") as f:
            for chunk in img_obj.chunks(chunk_size=1024):
                f.write(chunk)
        return HttpResponse(json.dumps(res))