Ausführliche Erklärung des asynchronen Hochladens von Bildern mit thinkphp ajaxfileupload-Denken Sie an PHP-php.cn

Ausführliche Erklärung des asynchronen Hochladens von Bildern mit thinkphp ajaxfileupload

藏色散人

Freigeben： 2021-04-30 09:02:15

nach vorne

1635 Leute haben es durchsucht

Die folgende Tutorial-Kolumne von thinkphp stellt Ihnen die Methode zum asynchronen Hochladen von Bildern von thinkphp ajaxfileupload vor. Ich hoffe, dass sie Freunden, die sie benötigen, hilfreich sein wird!

thinkphp entwickelt das Hochladen von Bildern. Dies ist derzeit eine bequemere Funktion. Ich werde hier nicht die CSS-Datei schreiben, sondern den Code.

Stellen Sie den Kerndatei-Download vor https://github.com/carlcarl/AjaxFileUpload

HTML

Im Folgenden werden zunächst die relevanten js-Ressourcen auf der HTML-Seite vorgestellt

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

Nach dem Login kopieren

Dann erstellen Sie das entsprechende p im 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" />

Nach dem Login kopieren

Erklären Sie:
upd_file(this,'image_file') ist unverzichtbar
Die versteckte Eingabe wird verwendet, um den Bildpfad nach erfolgreichem Upload zuzuweisen, damit das Formular Daten übermitteln kann
Bearbeiten Sie als Nächstes das Javascript-Skript in HTML Um die Lieferung und Übermittlung zu erleichtern, erstellen Sie einfach die Methode app_upload_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>

Nach dem Login kopieren

OK in der Bildfunktion

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

Nach dem Login kopieren

thikphp. Lassen Sie mich Ihnen zunächst sagen, dass das Programm nicht ausgeführt wird, wenn ajaxfileupload.js einen Fehler meldet Ihr Programm meldet einen Fehler. Überprüfen Sie Ihren Ajaxfileupload. Handelt es sich um ein Problem mit der Dateiversion?

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung des asynchronen Hochladens von Bildern mit thinkphp ajaxfileupload. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!