Php+ajax upload pictures without refreshing the implementation of the method _php skills

This article describes the implementation of Php+ajax upload image without refreshing. Share to everyone for your reference, specific as follows:

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>
</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 ()) R
    Eturn;
    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 showimg. Empty ();
        Empty the displayed picture Imgsrc.val (""); Btn.html ("Upload ..."); Upload button shows uploaded in}, Uploadprogress:function (event, Position, total, PercentComplete) {}, Success:fun
        Ction (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.

More about PHP interested readers can view the site topics: "Php+ajax Skills and Application Summary", "PHP file Operation Summary", "PHP graphics and picture Operation skills Summary", "PHP Network Programming Skills Summary", "PHP object-oriented Programming Program", " Summary of PHP string usage, Introduction to PHP+MYSQL database operations, and a summary of PHP common database operations Tips

I hope this article will help you with the PHP program design.