input标签中file类型

1.input提交图片实时展示

复制<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<img src="空图片连接" width="80" height="80" style="margin-left: 20px" id="id_img">


<input type="file" name="file" id="uploadForm">
<button id="btnUpload">up</button>

<script>
    //当该控件发生变化，响应该事件
    $("#uploadForm").change(function () {
        //alert(1)
        //取到文件对象
        var file = $("#uploadForm")[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>
    $("#btnUpload").on("click", function () {
        var formData = new FormData();

        //获取要上传多个文件
        //let file = $("#uploadForm");
        //for (let w = 0; w < file.length; w++) {
        //    formData.append("files[]", file[w]);
        //}
        formData.append('img', $("#uploadForm")[0].files[0]); //添加图片信息的参数
        formData.append('sizeid', 123); //添加其他参数
        $.ajax({
            url: '/register/',
            type: 'post',
            secureuri: false,  //是否启用安全提交，默认为false。
            cache: false, //上传文件不需要缓存
            data: formData,
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success: function (data) {
                alert(" 上传成功");
            },
            error: function (data) {
                alert("上传失败");
            }
        })
    })
</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拼接再文件的根路径后,然后找到文件