jquery实现图片上传(包含多图上传)

最新推荐文章于 2024-11-11 23:32:58 发布

叶落无痕123

最新推荐文章于 2024-11-11 23:32:58 发布

阅读量3.5k

点赞数 1

文章标签： vue.js javascript html

原文链接：https://blog.csdn.net/admin_web/article/details/107442620

版权

这篇博客介绍了如何使用Vue.js实现单图和多图上传功能，并结合PHP后端进行图片处理。前端部分通过HTML、CSS和JavaScript（Vue.js）创建了上传组件，包括图片预览和上传到服务器。后端使用PHP接收文件，验证大小和类型，然后保存到指定目录并返回图片URL。文章详细展示了前端交互和后端处理的完整代码。

摘要由CSDN通过智能技术生成

*.html

<-- 单图 -->
<div class="a-upload" :style="{backgroundImage:'url(\''+headimg+'\')'}">
   <input type="file" name="" id="files" @change="uploadFile">
</div>

<-- 多图 -->
<input type="file" name="" id="imgs" multiple="multiple" @change="uploadFiles">

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

*css

.a-upload {
    padding: 4px 10px;
    width: 4rem;
    height:4rem;
    line-height: 4rem;
    position: relative;
    cursor: pointer;
    color: #999;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    background-image: url('../../image/add.png');
    background-size: cover;
}

.a-upload  input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
}

.a-upload:hover {
    color: #444;
    background: #eee;
    border-color: #ccc;
    text-decoration: none;
}

*.js

new Vue({
                el:'#app',
                data:{
                    headimg:''
                },
                methods: {
                    //单图
                    uploadFile: function(){
                        var myform = new FormData();
                        myform.append('files',$('#files')[0].files[0]);
                        //图片预览
                        var file=$('#files')[0].files[0];
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        reader.onload = function (e) {    //成功读取文件
                            _this.headimg = e.target.result;//预览图片
                        };
                        myform.append('path','headimg');
                        //图片上传
                        $.ajax({
                            url:'fileimgs',
                            type: "POST",
                            data: myform,
                            contentType: false,
                            processData: false,
                            success: function (data) {
                                console.log(data);
                            },
                            error:function(data){
                                console.log(data)
                            }
                        })
                    },
                    //多图
                    uploadFiles: function(){
                        var _this = this;
                        var formData = new FormData();
                        var fileImgs = $("#imgs")[0].files;
                        var imgs = this.imgs;
                        if(imgs.length > 5){
                            showToast('fail','最多只能选择5张图片');
                            return;
                        };

                        for(var i=0; i<fileImgs.length; i++){
                            formData.append('files[]',fileImgs[i]);
                        }
                        formData.append('path','store');
                        $.ajax({
                            url:'uploadFileImgs',
                            type: "POST",
                            data: formData,
                            contentType: false,
                            processData: false,
                            success: function (data) {
                                var imgarr = JSON.parse(data);
                                if(_this.imgs.length > 1){
                                    for(var i in imgarr){
                                        _this.imgs.push(imgarr[i]);
                                    }
                                }else{
                                    _this.imgs = imgarr;    
                                }
                            },
                            error:function(data){
                                console.log(data)
                            }
                        })
                    },
                    
                },
                created: function(){
                    var _this = this;

                }
            })

*.php

/** 
     * 图片上传
     * @param files 图像上传接收参数
     * @param string path 保存目录名称
     */
    public function fileimgs(){
        $files = request()->file("files");
        $path = input('path');
        if($files){
            $info = $files->validate(['size'=>204800000,'ext'=>'jpg,png,gif'])->move(ROOT_PATH . 'public' . DS . 'uploads'.DS.$path);
            if($info){
                $newurl = 'http://192.168.1.38/demo/public/uploads/'.$path.'/'.$info->getSaveName();
                // $newurl = 'https://www.lingtongwang.cn/uploads/'.$path.'/'.$info->getSaveName();
                $img= str_replace('\\','/',$newurl);
                // return output_data(200,$data);
                
                return $img;
            }else{
                return $files->getError();
            }
        }
    }
    
    //多图
    public function uploadFileImgs(){
        $files = request()->file('files');
        $path = input('path');
        if($files){
            $imgarr = [];
            foreach($files as $file){
                $info = $file->validate(['size'=>204800000,'ext'=>'jpg,png,gif'])->move(ROOT_PATH . 'public' . DS . 'uploads'.DS.$path);
                if($info){
                    // $newurl = 'http://192.168.0.0/demo/public/uploads/'.$path.'/'.$info->getSaveName();
                    
                    $img= str_replace('\\','/',$newurl);

                    $imgarr[]=$img;
                }
            }
            return json_encode($imgarr);
        }else{
            echo '不存在';
        }
        exit;
    }