这篇文章为大家分享了php+ajax无刷新上传图片实例代码，需要的朋友可以参考下

本文分享了php结合ajax实现无刷新上传图片的实例代码，分享给大家，希望大家可以和小编一起学习学习，共同进步。

1.引入文件

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

2.html部分

1. <div class="upimg"> 
2.        <input name="icon" type="text" class="imgsrc" value="<!--{$contents.icon}-->" /> 
3.        <div class="showimg"> 
4.         <!--{if $contents.icon}--> 
5.         <img src="<!--{$contents.icon}-->" height="120px"> 
6.         <!--{/if}--> 
7.        </div>           
8.        <div class="btn" style="height:20px;"> 
9.           <span>添加图片</span> 
10.           <input class="fileupload" type="file" name="pic[]"> 
11.        </div> 
12.        </div> 

3.给fileupload加上表单

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

4.ajax文件上传

1. jQuery(function ($) {  
2.   $(".fileupload").change(function(){ //选择文件  
3.     if ('' === $(this).val()) return; 
4.     var upimg = $(this).parent().parent().parent(); 
5.     var showimg = upimg.find('.showimg'); 
6.     var btn = upimg.find('.btn span'); 
7.     var imgsrc = upimg.find('.imgsrc'); 
8.     $(this).parent().ajaxSubmit({  
9.       //dataType: 'json', //数据格式为json  
10.       beforeSend: function() { //开始上传  
11.         showimg.empty(); //清空显示的图片  
12.         imgsrc.val(""); 
13.         btn.html("上传中..."); //上传按钮显示上传中  
14.       },  
15.       uploadProgress: function(event, position, total, percentComplete) {  
16.       },  
17.       success: function(data) { //成功  
18.         //获得后台返回的json数据，显示文件名，大小，以及删除按钮  
19.         var img = data; 
20.         //显示上传后的图片  
21.         imgsrc.val(""); 
22.         imgsrc.val(img); 
23.         showimg.html("<img width='120' height='120' src='"+img+"'>");  
24.         btn.html("上传成功"); //上传按钮还原  
25.       },  
26.       error:function(xhr){ //上传失败  
27.         btn.html("上传失败");  
28.       }  
29.     });  
30.   });  
31. });  

5.后台进行处理

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

6.将返回的数据交给前端，进行一些处理。

进而提交到后台数据库。

Tags: php+ajax无刷新上传图片

分享到：