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拼接再文件的根路径后,然后找到文件
来源:小小咸鱼YwY