Implementation of php + ajax refreshing image uploads,

Implementation of php + ajax refreshing image uploads,

This article describes how to implement php + ajax to upload images without refreshing the image. We will share this with you for your reference. The details are as follows:

1. Import files

<! -- Image 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 "/> <! -- Image Upload end -->

2.html

<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 images </span> <input class =" fileupload "type =" file "name =" pic [] "> </div>

3. Add a form to fileupload

/* Upload images */$ (". fileupload "). wrap ("<form action = '/bookstore/book/uploadpic' method = 'post' enctype = 'multipart/form-data'> </form> "); // function processing

4. upload an ajax File

JQuery (function ($) {$ (". fileupload "). change (function () {// select the 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', // the data format is json beforeSend: function () {// start to upload showimg. empty (); // clear the displayed image imgsrc. val (""); btn.html ("Uploading... "); // upload button display uploading}, uploadProgress: function (event, position, total, percentComplete) {}, success: function (data) {// success // obtain the json data returned by the background, display the file name, size, and delete button var img = data; // display the uploaded image imgsrc. val (""); imgsrc. val (img); showimg.html (" "); btn.html ("uploaded successfully"); // upload button restore}, error: function (xhr) {// Upload Failed btn.html ("Upload Failed ");}});});});

5. Processing in the background

Public function uploadpicAction () {// upload and display images $ 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. Send the returned data to the front-end for processing.

Then, submit it to the background database.