Comment implémenter php+ajax pour télécharger des images sans actualiser

Cet article présente principalement la méthode d'implémentation de téléchargement d'images php+ajax sans actualisation, impliquant les compétences associées de php combinées à ajax pour les opérations de transfert de fichiers. Les amis dans le besoin peuvent se référer à

Les détails sont les suivants. :

1. Importez le fichier

<!--图片上传begin-->
<script type="text/javascript" src="/js/jquery.form.js"></script>
<script type="text/javascript" src="/js/uploadImg.js"></script>
<link href="/css/uploadImg.css" rel="stylesheet" type="text/css" />
<!--图片上传end-->

2.html partie

<p class="upimg">
<input name="icon" type="text" class="imgsrc" value="<!--{$contents.icon}-->" />
<p class="showimg">
<!--{if $contents.icon}-->
<img src="<!--{$contents.icon}-->" height="120px">
<!--{/if}-->
</p>
<p class="btn" style="height:20px;">
  <span>添加图片</span>
  <input class="fileupload" type="file" name="pic[]">
</p>
</p>

3. Ajouter un formulaire pour télécharger un fichier

/*图片上传*/
$(".fileupload").wrap("<form action=&#39;/bookstore/book/uploadpic&#39; method=&#39;post&#39; enctype=&#39;multipart/form-data&#39;></form>"); //函数处理

4.Ajax télécharger un fichier

jQuery(function ($) {
  $(".fileupload").change(function(){ //选择文件
    if ('' === $(this).val()) return;
    var upimg = $(this).parent().parent().parent();
    var showimg = upimg.find('.showimg');
    var btn = upimg.find('.btn span');
    var imgsrc = upimg.find('.imgsrc');
    $(this).parent().ajaxSubmit({
      //dataType: 'json', //数据格式为json
      beforeSend: function() { //开始上传
        showimg.empty(); //清空显示的图片
        imgsrc.val("");
        btn.html("上传中..."); //上传按钮显示上传中
      },
      uploadProgress: function(event, position, total, percentComplete) {
      },
      success: function(data) { //成功
        //获得后台返回的json数据，显示文件名，大小，以及删除按钮
        var img = data;
        //显示上传后的图片
        imgsrc.val("");
        imgsrc.val(img);
        showimg.html("<img width=&#39;120&#39; height=&#39;120&#39; src=&#39;"+img+"&#39;>");
        btn.html("上传成功"); //上传按钮还原
      },
      error:function(xhr){ //上传失败
        btn.html("上传失败");
      }
    });
  });
});

5. Traiter en arrière-plan

public function uploadpicAction(){ //图片上传和显示
    $data = "";
    $src = $this->uploadFiles2($imgpath = "/upload/book" ,$filesname = "pic");
    isset($src[0]['src']) && $src[0]['src'] ? $data = $this->concaturl($src[0]['src']) : null;
    echo $data;
}

6. Transmettre les données renvoyées au front-end pour un certain traitement.

puis soumettez-le à la base de données backend.

Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Recommandations associées :

pensezFonction de connexion par code de vérification implémentée par PHP

Utilisation de la balise volist dans Thinkphp

thinkPHP5 base de données de requêtes implémentée et renvoi d'une instance de données JSON

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!