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>
Ensuite, créez le p
<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" />
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="'+ 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>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));
}
}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.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
