菜单

Angularjs实现多图上传预览功能

2018年11月18日 - Ajax

预先让大家展示下效果图,大家发没错,请参见实现代码。

前不久设落实一个多图上传的预览功能,网上发成百上千事例大多不顶完整,我虽将她们之整合了生又加了部分效及界面,我们惟有待调用一长指令就可实现,但污染为后台还需格外的代码,会当后边controller里介绍。不亮堂包的是否符合标准,还期待大家一起讨论下,如果来时空封装下Angular4的图纸及污染和预览分享给大家。

图片 1

图上传的预览,我们太要害解决之是用到input的on-change事件,再是读取图片,读取图片我们得为此到FileReader。

近日于运ThinkPHP5开发项目中客户来一个求是以图及传时附带预览功能。虽然现在发生无数底插件能兑现,但是要觉得好写于好。我们懂得,图片及污染得一个input:file表单

我们先勾勒一个读取图片的服务,这是网上的一模一样号大佬写的,我便直接以了恢复

<input type='file' name='pic'> 
/**
 * 图片上传获取返回的url
 */
      app .factory('fileReader', ["$q", "$log", function($q, $log){
        var onLoad = function(reader, deferred, scope) {
          return function () {
            scope.$apply(function () {
              deferred.resolve(reader.result);
            });
          };
        };

        var onError = function (reader, deferred, scope) {
          return function () {
            scope.$apply(function () {
              deferred.reject(reader.result);
            });
          };
        };

        var getReader = function(deferred, scope) {
          var reader = new FileReader(); //fileReader
          reader.onload = onLoad(reader, deferred, scope);
          reader.onerror = onError(reader, deferred, scope);
          return reader;
        };

        var readAsDataURL = function (file, scope) {
          var deferred = $q.defer();
          var reader = getReader(deferred, scope);   
          reader.readAsDataURL(file);  
          return deferred.promise;

        };

        return {
          readAsDataUrl: readAsDataURL 
      };
}])

当我们点击表单的时节提醒选择要上传的图样。但是这需要我们解析一下,可以于点击图片的当儿下JS实现预览功能,并且楼主也是这般做的。代码如下:

咱本出矣图片的读取,我们重来将定图片的on-change事件

function getFileUrl(sourceId) {  
  var url; 
  url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));  
  return url;  
}  
function preImg(sourceId, targetId) {  
  var url = getFileUrl(sourceId);  
  var imgPre = document.getElementById(targetId);  
  imgPre.src = url;  
} 
/**
 * 图片上传预览
 */
app .directive('file', ['$parse', 'fileReader', function ($parse, fileReader) { 
      return {
        restrict: 'A',
        link: function(scope, element, attrs, ngModel) {

          var model = $parse(attrs.file);
          var modelSetter = model.assign;
          console.log(modelSetter)
          element.bind('change', function(event){
            scope.$apply(function(){
              modelSetter(scope, element[0].files[0]);
            });
            //附件预览         
               scope.imgupload = (event.srcElement || event.target).files[0];
               getFile(scope.imgupload, scope);

              //获得预览图地址并且把file对象放入上传合集内
               function getFile (imgupload, scope) {
                 if(!imgupload) {
                   return;
                 }
                 fileReader.readAsDataUrl(imgupload, scope)
                        .then(function(result) {
                         scope.imgshows.push(result)
                         var file = document.querySelector('input[type=file]').files[0];
                         scope.uploadimgs.push(file)//这里是放着传给后台的数据file,下面controller的时候会有
                        });
               };
          });
        }
      };
    }]) 

作用如下:

这里就是是提供上传图片预览的样式,还有预览图删除的效力

图片 2

app .directive('uploadimg', function () { 
      return {
        restrict: 'E', 
        scope: {
          uploadimgs: "="
        },
        templateUrl: './js/directives/uploadimg/uploadimg.html',      
        link: function(scope, element, attrs) {
            scope.imgshows = []//预览图片合集放的是src    
            scope.uploadimg_del = function(index,imgs) {  
                scope.imgshows.splice(index,1);
                scope.uploadimgs.splice(index,1);
      }
     }
 }
}) 


<style type="text/css">
.fileupload {
  width: 100px;
  height: 100px;
  border: 1px dotted #ccc;
  display: inline-block;
}
.fileupload-icon {
  font-size:32px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
</style>
<div>
  <div class="fileupload pos-rlt" ng-repeat="imageSrc in imgshows">
    <img ng-src="{{imageSrc}}" style="max-width:200px;max-height:300px;margin:0 auto; display:block;" class="pos-rlt" width=100%; height=100%;/>
    <i class="icon ion-close-circled" style="position: absolute; top:5px; right: 5px" ng-click="uploadimg_del($index, imgshows)"></i>
  </div>
  <div class="fileupload pos-rlt clear" >
    <i class="icon ion-plus-round fileupload-icon"></i>
    <input type="file" style="display:inline-block; width: 100%; height: 100%; opacity:0" name="upload_img" file="upload_img" placeholder="选择图片" accept="image/png,image/gif,image/jpeg,image/jpg"  >
  </div>
</div>
</label>

然这样的话会提到许多兼容问题。所以即便想到了Ajax,在图上传时,使用Ajax技术。将图纸及传出服务器,再由服务器返回给咱们图片的上传地址,然后上加至img标签中失。过程虽然累了点,但是亲测不会见发出兼容问题。

末段的调用也深简单
俺们就待在2独地方加代码一个是当界面,一个凡是以Controller里

用发送Ajax请求的语句,当然input:file表单是不能够落实我们的需求的,因此,我们需要被表单关联一个单击事件去帮忙咱开展Ajax请求并选图片

<uploadimg uploadimgs="uploadimgs"></uploadimg>
<form id="form1"> 
   <label for="exampleInputEmail1">头像</label> 
   <input type="button" value="上传图片" onclick="f.click()" class="btn_mouseout"/><br> 
    <p><input type="file" id="f" name="f" onchange="sc(this);" style="display:none"/></p> 
 </form> 
<div id="result"></div> 

夫是以Controller里的,这是因此来传被后台的多少集合,我们要传为后台的凡file对象

当我们点击上传图片是button按钮时触发input:file选择图片实现Ajax上污染

$scope.uploadimgs = []//上传图片合集放的是file对象
<script> 
function sc(){ 
  var animateimg = $("#f").val(); //获取上传的图片名 带// 
  var imgarr=animateimg.split('\\'); //分割 
  var myimg=imgarr[imgarr.length-1]; //去掉 // 获取图片名 
  var houzui = myimg.lastIndexOf('.'); //获取 . 出现的位置 
  var ext = myimg.substring(houzui, myimg.length).toUpperCase(); //切割 . 获取文件后缀 
  var file = $('#f').get(0).files[0]; //获取上传的文件 
  var fileSize = file.size;      //获取上传的文件大小 
  var maxSize = 1048576;       //最大1MB 
  if(ext !='.PNG' && ext !='.GIF' && ext !='.JPG' && ext !='.JPEG' && ext !='.BMP'){ 
    parent.layer.msg('文件类型错误,请上传图片类型'); 
    return false; 
  }else if(parseInt(fileSize) >= parseInt(maxSize)){ 
    parent.layer.msg('上传的文件不能超过1MB'); 
    return false; 
  }else{  
    var data = new FormData($('#form1')[0]);  
    $.ajax({  
      url: "{:url('User/uppic')}",  
      type: 'POST',  
      data: data,  
      dataType: 'JSON',  
      cache: false,  
      processData: false,  
      contentType: false  
    }).done(function(ret){  
      if(ret['isSuccess']){ 
        var result = ''; 
        var result1 = ''; 
        // $("#show").attr('value',+ ret['f'] +); 
        result += '<img src="' + '__ROAD__' + ret['f'] + '" width="100">'; 
        result1 += '<input value="' + ret['f'] + '" name="user_headimg" style="display:none;">'; 
        $('#result').html(result); 
        $('#show').html(result1); 
        layer.msg('上传成功'); 
      }else{  
        layer.msg('上传失败'); 
      }  
    });  
    return false; 
    }  
  } 
</script> 

何以传于后台呢,直接沾代码,其实不为难

此地我们用FormData对面进行表单提交,然后服务器端接收

$scope.save = function() {     
    var Fromdata = {
      'name': $scope.form.name,
      'desc': $scope.form.descr,
      'price': $scope.form.price,
      'status': $scope.form.status?1:0,

    }
    var uploadData = createFromData(Fromdata)
    for(var i = 0; i < $scope.uploadimgs.length; i++) {
      uploadData.append('upload_imgs', $scope.uploadimgs[i])
    }

     $http({
     method:'POST',
     url:"后台地址",
     data: fd,
     headers: {'Content-Type':undefined},
     transformRequest: angular.identity
     })
     .success( function(response){
     //上传成功的操作

     });

   }  

//构造FormData
//@param 是一个对象
function createFromData(Fromdata) {
   var fd = new FormData();
   for(key in Fromdata) {
     fd.append(key,Fromdata[key]); 
   }
   return fd
}
public function uppic() 
  { 
    $file = request()->file('f'); 
    $info = $file->move(ROOT_PATH . 'public/uploads/avatar'); 
    $a=$info->getSaveName();  
    $imgp= str_replace("\\","/",$a);  
    $imgpath='uploads/avatar/'.$imgp;  
    $banner_img= $imgpath; 
    $response = array();  
    if($info){  
      $response['isSuccess'] = true;  
      $response['f'] = $imgpath;  
    }else{  
      $response['isSuccess'] = false;  
    }  

    echo json_encode($response); 
  } 

说到底给大家看下预览图

此会返回图片上传的url路径:$response['f] = $imgpath;现在咱们若召开的就是拿此url写进前台HTML部分开展一个出示

图片 3

<div class="form-group"> 
  <!-- 将Ajax上传的图片路径添加到数据库 --> 
  <div id="show"></div> 
</div> 

如上就是是本文的全部内容,希望对大家之念有帮助,也想大家多多支持脚本的小。

在JS中添加

公或许感兴趣的章:

$('#show').html(result1); 

总结

如上所述是稍稍编为大家介绍的Ajax实现图片及传并预览功能,希望对大家持有帮助,如果大家发另疑窦请给自己留言,小编会及时回复大家的。在这吧非常感谢大家对台本的小网站的支持!

乃或许感兴趣之章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图