Php+ajax No refresh upload picture instance code _php tips

This article shares the PHP combined with Ajax to achieve no refresh upload picture of the example code, to share to everyone, I hope we can and small set together to learn and progress together.

1. Introduction of documents

<!--picture upload 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 "/>
<!--picture upload end-->

2.html part

<div class= "upimg" >
       <input name= "icon" type= "text" class= "imgsrc" value= "<!--{$contents .icon}--> "/>
       <div class=" showimg ">
        <!--{if $contents .icon}-->  "height=" 120px ">
        <!--{/if}-->
       </div>          
       <div class=" btn "style=" height:20px; " >
          <span> Add pictures </span>
          <input class= "fileupload" type= "file" Name= "pic[]" >
       </ Div>
       

3. Add a form to FileUpload

/* Picture Upload * *
  (". FileUpload"). Wrap ("<form action= '/bookstore/book/uploadpic ' method= ' post ' enctype= ') multipart /form-data ' ></form> '); function processing

4.ajax File Upload

JQuery (function ($) {$ (". FileUpload"). Change (function () {//Select File 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 ',//Data format is JSON beforesend:function () {//Start uploading Showi Mg.empty ();
        Empty the displayed picture Imgsrc.val (""); Btn.html ("Upload ...");  Upload button shows uploaded in}, Uploadprogress:function (event, Position, total, PercentComplete) {}, Success:
        function (data) {//success//Get back in the background JSON data, display filename, size, and delete button var img = data;
        Show the uploaded picture Imgsrc.val ("");
        Imgsrc.val (IMG); 
        Showimg.html (" 

5. Processing in the background

Public Function Uploadpicaction () {//Picture upload and display
    $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. Give the returned data to the front end for some processing.

It is then submitted to the background database.

I hope this article will help you learn about PHP programming.