0825自我总结

关于django中input标签中file类型

1.input提交图片实时展示

<img src="/static/img/default.png" width="80" height="80" style="margin-left: 20px" id="id_img">

<input type="file" name="file" id="id_file">

<script>

    //当该控件发生变化，响应该事件

    $("#id_file").change(function () {

        //alert(1)

        //取到文件对象

        var file = $("#id_file")[0].files[0]

        //放到img控件上，借助于filereader 中间的东西，文件阅读器

        //生成一个文件阅读器对象赋值给filereader

        var filereader = new FileReader()

        //把文件读到filereader对象中

        //读文件需要时间，需要文件读完再去操作img

        //如果没这一步操作下面不一定变化

        filereader.readAsDataURL(file)

        filereader.onload = function () {

            $("#id_img").attr('src', filereader.result)

        }

    })

</script>

2.对于后台传输与接收

1.传输

<script>

xxxxxxxxxx #就是就是触发传图片的时间,下面核心的aja**-

$.ajax({

            url: '/register/',

            type: 'post',

            data: {'img':$("#id_file")[0].files[0]},

    success: function (data){

    }

})

</script>

2.接收

#核心代码

img=request.FILES.get('img')

#如果设置中没有设置默认存储在avatar文件下

#对于存储位置设置需要在setting中设置

#加这两句，以后再上传的图片，都放在media文件夹下

MEDIA_URL = "/media/"

MEDIA_ROOT = os.path.join(BASE_DIR, "media")

3.路由

#开路由,直接通过URL能访问源码

from django.views,static import serve

from django.conf import settings #要载入他的配置文件

urlpatterns = [

    url(r'^media/(?P<path>.*)',serve,{'document_root':'文件的根路径'}),

]

#他会进行拼接,根据传的path拼接再文件的根路径后,然后找到文件