[武汉|荣耀师兄]JS-叶紫阳|2017年05月13日的日报-技能树.IT修真院

发表于： 2017-05-13 23:08:24

2 951

任务九

今天完成的事情

1实现了官网上图片插件的所有功能，包括图片上传，图片信息预览，图片预览，动态进度条。
2.将自己写的图片上传插件（不可复用）应用到编辑页面中。
明天计划的事情

1想学下自定义指令，不然别人写的代码完全看不懂。
2实现上传文章功能。

遇到的问题

1.上传图片的时候，没有仔细看接口说明，file字段的命名是自己随便命名的，然后服务器端一直给我报400错误，然后我一直各种换编码格式。终于在快要放弃的时候找到了原因。

2.进度条的实现，不管是官网的还是我的，都有一个无法解决的问题，进度条加载完，也就是图片上传完后，图片并没有加载出来，要过一段时间才可以加载出来，这个问题基本不可能解决。首先说一下进度条的实现原理吧，这里我们的文件上传是通过$http的post方法结合formdata上传的，简单说就是ajax的方式上传的。在angular1.5以后，angular在$http中提供了2个方法，用来处理进度。写法如下：

$http({
   method: 'POST',
   url: url,
   eventHandlers: {
      progress: function(c) {
         console.log('Progress -> ' + c);
         console.log(c);
      }
   },
   uploadEventHandlers: {
      progress: function(e) {
         console.log('UploadProgress -> ' + e);
         console.log(e);
      }
   },
   data: uploadData,
}).success(function(data) {
   console.log(data);
}).error(function(data, status) {
   console.log(data);
});

其中uploadevent在数据上传的时候触发，而evvent在接收到返回来的数据的时候触发，而我们的控制进度条的方法是写在upload中的，当进度条加载完了说明我们上传确实上传完了，但是服务器还没有把数据发给我们，也就是图片的url地址发给我们，所以需要过一段时间才能加载出来。

3关于dom对象的files属性：

<body>
<input type="file" id="fileLists" onchange="readFile()">
</body>
<script>
   function readFile() {
      var file=document.getElementById("fileLists").files[0];
      var demo=document.getElementById("fileLists").files;
      console.log(file);
      console.log(demo);
   }
</script>