AngularJS 上传图片demo 多图上传支持删除操作 angularjs php

先看demo样式：

 

1.HTML结构：

<div class="clear">
                    <div class="rightWrap upload-wrap">
                        <div class="addimg-wrap">
                            <input class="upload-btn" multiple type="file" name="files" onchange="angular.element(this).scope().img_upload(this.files, 'logo', event)">
                        </div>
                        <div class="img-list clear fl" ng-show="uploadImg.length>0" ng-repeat="item in uploadImg track by $index">
                            <div class="imgitem"><img src="{{item}}" > <em ng-click="del_pic(item, $index)"></em></div>
                        </div>
                    </div>
                </div>

2.AngularJS：

/**
         * 图片上唇test
         * @param files
         * @param type_name
         * @param deviceType
         */
        $scope.uploadImg = []
        $scope.img_upload = function(files, type_name, deviceType) {       //单次提交图片的函数
            var myOBJ = $(deviceType.target).closest('.upload-btn')
            var data = new FormData();      //以下为像后台提交图片数据
            console.log(files);
            // alert(files.length);

            for (i=0; i< files.length; i++){
                console.log(i)
                data.append('myfile_name[]', files[i]);
            }

            data.append('type_name', type_name);
            console.log(data);
            // data.append('myfile_name', files[0]);
             $http({
                method: 'post',
                url: '/api/buy/upload_file',
                data:data,
                dataType:'json',
                headers: {'Content-Type': undefined},
                transformRequest: angular.identity
            }).success(function(data) {
                if (data.status == 'success') {
                    // $scope.refresh();
                    console.log(data.data)
                    // $scope.uploadImg = data.data
                    data.data.forEach(function(item,index){
                        $scope.uploadImg.push(item)
                    })

                    console.log('xinde',$scope.uploadImg)


                }
                if(data.status == 'fail'){
                    console.log(data)
                }
            })
        }


/**
* js 请求后台删除
*/

$scope.del_pic = function(file, index){
    $http.get('/api/buy/del_pic?file='+file).success(function (data) {
        console.log(data);
        if(data.status== 200){
            $scope.uploadImg.splice(index,1) //删除数组中的值
        }else{
            alert(data.success)
        }
    });
}

3.PHP：

 /**
     * 上传图片接口
     */
    public function upload_file_post()
    {
        $companyid = $this->session->userdata('companyid');
        if(isset($_FILES) && !empty($_FILES)){
            $this->load->library('FileUpload');
            $up = new fileupload;
            $file_dir = './uploads/company/logo/';
            $up -> set("path",$file_dir);
            $up -> set("maxsize", 2000000000);
            $up -> set("allowtype", array("gif", "png", "jpg","jpeg"));
            if($up -> upload("myfile_name")) {
                // 获取上传后的文件名称
                $data = $up->getFileName();
                foreach ($data as $k =>$v){
                    $data[$k] = ltrim($file_dir.$v,'.');
                }

                $this->response(['status'=>'success', 'data' => $data],200);
            } else {
                echo json_encode(array('status'=>'fail', 'data' => $up->getErrorMsg()[0]));exit();

            }
        }
        return null;
    }

ps：请注意，后台返回的回显js 这里是用PHP返回的数组形式。例如：

["/uploads/company/logo/20181119141502_953634848.png", "/uploads/company/logo/20181119141504_705319500.jpg", "/uploads/company/logo/20181119141509_978349726.jpg", "/uploads/company/logo/20181119141509_602445392.jpg"]

 

js 使用数组循环追加到数组中：

 data.data.forEach(function(item,index){
     $scope.uploadImg.push(item)
 })