js单图片上传

 

<form action="" id="form1">
<input type="file" name="head_img" style="display:none;" id="file0"> //这里一定要写name  后台就是通过name接受内容
<div class="tx upload">
<lable>
{if condition="($company_info.cover_img)"}
<img id="box_headimg" src="{$company_info.cover_img}" alt="">
{else/}
<img id="box_headimg" src="STATIC_BOX/box/images/tx.png" alt="">
{/if}
</lable> 
</div>
</form>

 

 

前台js

 

 

$('#file').change(function(){
        if (this.files && this.files[0]) {

            var objUrl = getObjectURL(this.files[0]);
            console.log(objUrl);
            var data = new FormData($('#form1')[0]);
            console.log($('#form1'));
            console.log(data);

            $.ajax({ 
                url: "{:url('advert/upload_img')}", 
                type: 'POST', 
                data: data,
                async: false,
                dataType: 'JSON', 
                processData: false, 
                contentType: false,

            }).done(function(ret){ 
            // alert(ret.path_img);
                if(ret.error==1){
                    $('#cover_img').attr('src',ret.path_img);
                    $('#cover_img').css('width','100px');
                    $('#cover_img').css('height','100px');
                }else{
                    alert('上传失败');
                }
            });

         }


    })

 

 

 

function getObjectURL(file) {
           
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
    }

 

 

 

后台php

public function upload(){

        $file = request()->file('head_img');

        $path=str_replace('\\', '/', 'upload/box');

        if (!is_dir($path)) {
            mkdir($path, 0777,true);
        }
        // $path=company_coverimg_path('854');

        if($file){
            $info = $file->move($path);
            if($info){
                $path_img ='/'.$path.'/'.$info->getSaveName(); 
                $data['path_img']=$path_img;
                $data['error']=1;
            }else{
                // 上传失败获取错误信息
                $msg = $file->getError();
                $data['error']=2;
                $data['msg']=$msg;
            }
        }

        echo json_encode($data);

    }

 

 

 

 

 

 

<scroll-view scroll-y="true" style="height: 200rpx;">
<view style="background: red; width: 200px; height: 100px; display: inline-block" ></view>
<view style="background: green; width: 200px; height: 100px; display: inline-block"></view>
<view style="background: blue; width: 200px; height: 100px; display: inline-block"></view>
<view style="background: yellow; width: 200px; height: 100px; display: inline-block"></view>
</scroll-view>