django实现图片预加载

在html中加入以下代码

 <div class="am-form-group">
   <label for="user-weibo" class="am-u-sm-3 am-form-label">
     封面图 
   label>
   <div class="am-u-sm-9">
       <div class="am-form-group am-form-file">
           <div class="tpl-form-file-img">
               <img id="showImg" style="width: 200px;" src="assets/img/a5.png" alt="">
           div>
           <button type="button" class="am-btn am-btn-danger am-btn-sm">
             <i class="am-icon-cloud-upload">i> 添加封面图片button>
           <input id="ReadFile" name="pic" type="file" multiple="">
       div>
   div>
 div>
 <script type="text/javascript">
 	//给input的id绑定监听事件，当input发生改动时执行函数中代码
     $('#ReadFile').change(function(){
     	// 获取当前的文件对象
         var file = this.files[0];

         //限定上传文件的类型，判断是否是图片类型
         if (!/image\/\w+/.test(file.type)) {
             alert("只能选择图片");
             return false;
         }
         var reader = new FileReader();
         reader.readAsDataURL(file);
         //onload 当图片加载完成后立即执行该函数代码
         reader.onload = function(e) {
             base64Code = this.result;
             //把得到的base64赋值到img标签显示
             $("#showImg").attr("src", base64Code);
         }
     })
 script>

可在官网查看函数/方法介绍：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader