How to implement php+ajax to upload images without refreshing-PHP Tutorial-php.cn

How to implement php+ajax to upload images without refreshing

墨辰丷

Release： 2023-03-28 11:54:02

Original

1420 people have browsed it

This article mainly introduces the implementation method of php ajax uploading images without refreshing, involving techniques related to php combined with ajax for file transfer operations. Friends in need can refer to the following

The details are as follows:

1.Introduce the file

<!--图片上传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-->

Copy after login

2.html part

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

Copy after login

3.Give fileupload plus form

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

Copy after login

4.ajax file upload

jQuery(function ($) {
  $(".fileupload").change(function(){ //选择文件
    if (&#39;&#39; === $(this).val()) return;
    var upimg = $(this).parent().parent().parent();
    var showimg = upimg.find(&#39;.showimg&#39;);
    var btn = upimg.find(&#39;.btn span&#39;);
    var imgsrc = upimg.find(&#39;.imgsrc&#39;);
    $(this).parent().ajaxSubmit({
      //dataType: &#39;json&#39;, //数据格式为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("上传失败");
      }
    });
  });
});

Copy after login

5.Backend Process

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

Copy after login

6. Hand the returned data to the front end for some processing.

Then submit it to the backend database.

The above is the entire content of this article, I hope it will be helpful to everyone's study.

##Related recommendations:

thinkPHP Verification code login function implemented

Usage of volist tag in Thinkphp

thinkPHP5 implementation of querying the database and returning json data instance

The above is the detailed content of How to implement php+ajax to upload images without refreshing. For more information, please follow other related articles on the PHP Chinese website!