Detailed explanation of how thinkPHP uses ajax to asynchronously upload images and display and delete them

The following tutorial column will introduce to you how thinkPHP uses ajax to asynchronously upload images and display and delete them. I hope it will be helpful to friends in need! thinkPHP uses ajax to asynchronously upload pictures and display and delete them

In the process of learning tp5 recently, there is a posting function in the project to select theme pictures. As follows:

# Using the original file upload processing, although the uploaded image can be displayed in real time through the original js statement, this will involve many compatibility issues. Use ajax technology to realize the function of selectively deleting selected pictures without compatibility issues.

Form file form:

    主题图片:                   图片上传               

If we need to send an Ajax request, of course the form cannot meet our needs. Therefore, we need to associate a click event with the form to help us Make an Ajax request and select an image.

---

When we click the upload image button, the image selection is triggered to implement Ajax upload.

JavaScript code:

<script></script>
<script>
    function upimg(obj)
    {
        if( obj.value == "" ) {
            return;
        }
        var formdata = new FormData();
        //<input type="file" name="img" value="" />
        formdata.append("img" , $(obj)[0].files[0]);//获取文件法二
        $.ajax({
            type : &#39;post&#39;,
            url : &#39;/home/note/upimg&#39;, //接口
            data : formdata,
            cache : false,
            processData : false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
            contentType : false, // 不设置Content-type请求头
            success : function(response){
                console.log(response);
                var html = &#39;<p style="position: relative;margin-right: 20px;margin-bottom: 15px;width: 132px;display: inline-block;border: 1px solid #CCC;background:#EEE;">&#39;
                        +&#39;<span style="display: block;width: 120px;height: 80px;border: 1px solid #F2F1F0;margin: 5px;overflow: hidden;">&#39;
                        +&#39;<img  src="/static/imghwm/default1.png"  data-src="&#39;+response+&#39;"  class="lazy"     style="max-width:90%" / alt="Detailed explanation of how thinkPHP uses ajax to asynchronously upload images and display and delete them" >&#39;
                        +&#39;&#39;
                        +&#39;<input type="hidden" name="imgs[]" value="&#39;+response+&#39;" />&#39;
                        +&#39;<a onclick="delImg(this);" style="z-index: 10;display: block;top: -8px;cursor:pointer;right: -8px;position:absolute;width: 20px;height: 20px;background: #CCC;border-radius:100%;text-align:center;line-height: 20px;border: 1px solid #C1C1C1;color: #555;">X&#39;
                        +&#39;&#39;;

                $(&#39;#img-list-box&#39;).append(html);
            },
            error : function(){ }
        });
    }

    function delImg(obj)
    {
        $(obj).parent(&#39;p&#39;).remove();
    }
</script>

After clicking to select the image, it is handed over to the server for processing. php interface file:

    public function upimg()
    {
        //验证
        $file = request()->file('img');
        // 移动到框架应用根目录/public/uploads/ 目录下
        if($file){
            $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
            if($info){
                // 成功上传后 获取上传信息
                $img_src = '/uploads/'.$info->getSaveName();
                echo $img_src; //返回ajax请求
            }else{
                // 上传失败获取错误信息
                $this->error($file->getError());
            }
        }
    }

Improved renderings:

The above is the detailed content of Detailed explanation of how thinkPHP uses ajax to asynchronously upload images and display and delete them. For more information, please follow other related articles on the PHP Chinese website!