thinkphp ajaxfileupload 비동기 사진 업로드에 대한 자세한 설명-ThinkPHP-php.cn

thinkphp ajaxfileupload 비동기 사진 업로드에 대한 자세한 설명

藏色散人

풀어 주다： 2021-04-30 09:02:15

앞으로

1607명이 탐색했습니다.

다음 튜토리얼 칼럼인 thinkphp에서는 thinkphp ajaxfileupload 비동기 이미지 업로드 방법이 필요한 친구들에게 도움이 되길 바랍니다!

thinkphp ajaxfileupload ajaxfileupload는 사진을 비동기적으로 업로드합니다

thinkphp는 사진 업로드를 개발합니다. 현재로서는 비동기 사진 업로드가 더 편리한 기능입니다. 여기서는 CSS 파일을 작성하지 않고 코드를 작성하겠습니다.

핵심 파일 다운로드 소개 https://github.com/carlcarl/AjaxFileUpload

HTML

다음은 먼저 html 페이지에 관련 js 리소스를 소개합니다

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片上传</title> 
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>   
</head>
<body>
</body>
</html>

로그인 후 복사

그런 다음 해당 p를 생성합니다. body

<label class="title w100">封面图片:</label>
<p class="f_l">
    <label class="fileupload" onclick="upd_file(this,&#39;image_file&#39;);">
        <input type="file" class="filebox" name="image_file" id="image_file"/>
        <!--上传成功后图片会给value赋值图片路径，以便于form表单提交数据-->
        <input type="hidden" name="image" value="">                        
    </label>
    <label class="fileuploading hide" ></label>                    
</p>
<p class="blank15"></p>
<!--上传成功后图片会在这里显示否则是默认图片-->
<img id="image" src="/Public/images/empty_thumb.gif" />

로그인 후 복사

설명:
upd_file(this,'image_file')은 필수입니다
숨겨진 입력은 업로드가 성공한 후 이미지 경로를 할당하는 데 사용되므로 양식에서 데이터를 제출할 수 있습니다
다음으로 JavaScript 스크립트를 편집하세요 html을 사용하여 이미지 함수

<script>
function upd_file(obj,file_id){    
$("input[name='"+file_id+"']").bind("change",function(){            
    $(obj).hide();
    $(obj).parent().find(".fileuploading").removeClass("hide");
    $(obj).parent().find(".fileuploading").removeClass("show");
    $(obj).parent().find(".fileuploading").addClass("show");
      $.ajaxFileUpload
       (
           {
                url:'/index.php/home/avatar/app_upload_image',//上传图片处理文件
                secureuri:false,
                fileElementId:file_id,
                dataType: 'json',
                success: function (data, status)
                {
                       $(obj).show();
                       $(obj).parent().find(".fileuploading").removeClass("hide");
                    $(obj).parent().find(".fileuploading").removeClass("show");
                    $(obj).parent().find(".fileuploading").addClass("hide");
                       if(data.status==1)
                       {
                           $("#image").attr("src",data.thumb_url+"?r="+Math.random());                               
                           $("input[name='image']").val(data.url);//返回json后将隐藏input赋值
                        //$("#img_url").html('<input type="hidden" name="img_url" value="&#39;+ path.path +&#39;" />');
                       }
                       else
                       {
                           $.showErr(data.msg);
                       }
                },
                error: function (data, status, e)
                {
                    $.showErr(data.responseText);;
                    $(obj).show();
                    $(obj).parent().find(".fileuploading").removeClass("hide");
                    $(obj).parent().find(".fileuploading").removeClass("show");
                    $(obj).parent().find(".fileuploading").addClass("hide");
                }
           }
       );
      $("input[name='"+file_id+"']").unbind("change");
});    
}
<script>

로그인 후 복사

thikphp에 app_upload_image()

    function app_upload_image($maxSize=52428800){
        $id=session('id');
        $config=array(
            'rootPath'  =>'Upload',         //文件上传保存的根路径
            'savePath'  =>'/avatar/',   
            'exts'      => array('jpg', 'gif', 'png', 'jpeg','bmp'),
            'maxSize'   => $maxSize,
            'autoSub'   => true,
            );
        $upload = new \Think\Upload($config);// 实例化上传类
        $z = $upload->uploadOne($_FILES['image_file']);
        if($z) {
        //拼接图片的路径名
                $img='/Upload'.$z['savepath'].$z['savename'];
                $_POST['image_file']=$img;
                //获取上传图片绝对路径
                $imgsrc=$_SERVER['DOCUMENT_ROOT'].__ROOT__.$_POST['image_file'];
                $image = new \Think\Image(); 
                $image->open($imgsrc);
                //将图片裁剪为400x400并保存为corp.jpg
                $image->thumb(205, 160,\Think\Image::IMAGE_THUMB_CENTER)->save($imgsrc);

            $this->ajaxReturn(array("thumb_url"=>$img,"url"=>$img,"status"=>1));
        }
    }

로그인 후 복사

OK 메소드를 만드세요. 우선 ajaxfileupload.js가 오류를 보고하면 프로그램이 실행되지 않습니다. 프로그램에서 오류가 보고되면 ajaxfileupload를 확인하세요. 파일 버전 문제인가요?

위 내용은 thinkphp ajaxfileupload 비동기 사진 업로드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!