Explication détaillée du téléchargement asynchrone d'images thinkphp ajaxfileupload-PensezPHP-php.cn

Explication détaillée du téléchargement asynchrone d'images thinkphp ajaxfileupload

藏色散人

Libérer： 2021-04-30 09:02:15

avant

1633 Les gens l'ont consulté

La colonne tutorielle suivante de thinkphp vous présentera la méthode de téléchargement asynchrone d'image thinkphp ajaxfileupload. J'espère qu'elle sera utile aux amis dans le besoin !

thinkphp développe le téléchargement d'images asynchrone est actuellement une fonction plus pratique. Je n'écrirai pas le fichier CSS ici, mais j'écrirai le code.

Présentez le téléchargement du fichier de base https://github.com/carlcarl/AjaxFileUpload

HTML

ci-dessous Tout d'abord, introduisez les ressources js pertinentes dans la page html

<!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>

Copier après la connexion

Ensuite, créez le p

<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" />

Copier après la connexion

pertinent dans le corps et expliquez :
upd_file(this,'image_file') est indispensable
L'entrée cachée est utilisée pour attribuer le chemin de l'image une fois le téléchargement réussi, afin que le formulaire puisse soumettre des données
Ensuite, modifiez le script javascript en html pour faciliter la livraison et la soumission de la fonction image

<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>

Copier après la connexion

Créez la méthode app_upload_image dans thikphp ()

    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));
        }
    }

Copier après la connexion

OK, c'est tout. Tout d'abord, laissez-moi vous dire que si ajaxfileupload.js signale une erreur, le programme ne s'exécutera pas si votre programme le signale. une erreur, vérifiez si votre fichier ajaxfileupload est un problème de version.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!