发表于: 2017-05-19 23:21:34

1 951


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin) 

通过jQuery完成侧边栏的样式,终于把样式搞定,整个页面总算是美观了

通过 ui-sref 侧边栏点击跳转到 Article 页面

<li><ui-sref=".articleList">Article列表</a></li>


明天计划的事情:(一定要写非常细致的内容) 

实现基于HTML5的图片预览 实现图片上传功能 


遇到的问题:(遇到什么困难,怎么解决的) 

侧边栏的样式可以通过jQuery实现,但是AngularJS如何实现还是毫无头绪?


收获:(通过今天的学习,学到了什么知识)

图片上传功能 并传送到服务器


articleAdd.controller('AddCtrl', ['$scope', '$http', '$state', '$upload', function ($scope, $http, $state, $upload) {
   /**
    * 获取图片预览区域的元素
    * @type {Element}
    */
   var imgPreview = document.getElementById('imgPreview');
   /**
    * 默认内容为空
    * @type {string}
    */
   $scope.content = '';
   /**
    * 点击按钮上传图片
    * @param $files
    */
   $scope.onFileSelect = function ($files) { //$files:是已选文件的名称、大小和类型的数组
       for (var i = 0; i < $files.length; i++) {
           var file = $files[i];
           'snsole.log(file);
           /**
            * 上传图片
            * 请求:post
            * 请求方式:/a/u/img/{module}
            * 说明:module图片类型,服务器上文件夹名称,这里填写task
            * 如:/a/u/img/task
            */
           $scope.upload = $upload.upload({
               url: '/carrots-admin-ajax/a/u/img/task',
               method: 'POST',
               file: file
           }).progress(function (evt) {//上传进度
               console.log('percent' + parseInt(100.0 * loaded / evt.total))
           }).success(function (data, status, headers, config) {
               $scope.imgName = data.data.url;
               //在图片预览区域写入
     imgPreview.innerHTML = "<img src=" + data.data.url + " alt='上传文件的图片' style='width:200px; height: 200px;'>";
               console.log(data);
               console.log(data.data.url);
           }).error(function (data, status, headers, config) {
               console.log('上传失败');
           })
       }
   };


1


返回列表 返回列表
评论

    分享到