PHP 프레임워크 ThinkPHP thinkphp ajaxfileupload 비동기 사진 업로드에 대한 자세한 설명

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

Apr 29, 2021 pm 04:01 PM
javascript php

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

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,'image_file');">
        <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="'+ path.path +'" />');
                       }
                       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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Ubuntu 및 Debian용 PHP 8.4 설치 및 업그레이드 가이드 Ubuntu 및 Debian용 PHP 8.4 설치 및 업그레이드 가이드 Dec 24, 2024 pm 04:42 PM

Ubuntu 및 Debian용 PHP 8.4 설치 및 업그레이드 가이드

CakePHP 날짜 및 시간 CakePHP 날짜 및 시간 Sep 10, 2024 pm 05:27 PM

CakePHP 날짜 및 시간

CakePHP 프로젝트 구성 CakePHP 프로젝트 구성 Sep 10, 2024 pm 05:25 PM

CakePHP 프로젝트 구성

CakePHP 파일 업로드 CakePHP 파일 업로드 Sep 10, 2024 pm 05:27 PM

CakePHP 파일 업로드

CakePHP 라우팅 CakePHP 라우팅 Sep 10, 2024 pm 05:25 PM

CakePHP 라우팅

CakePHP 토론 CakePHP 토론 Sep 10, 2024 pm 05:28 PM

CakePHP 토론

PHP 개발을 위해 Visual Studio Code(VS Code)를 설정하는 방법 PHP 개발을 위해 Visual Studio Code(VS Code)를 설정하는 방법 Dec 20, 2024 am 11:31 AM

PHP 개발을 위해 Visual Studio Code(VS Code)를 설정하는 방법

CakePHP 빠른 가이드 CakePHP 빠른 가이드 Sep 10, 2024 pm 05:27 PM

CakePHP 빠른 가이드

See all articles