这篇文章主要为大家详细介绍了PHP+Ajax+JS实现多图上传的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下。

本文实例在wap站项目中需要做一个ajax多图片上传，结合js插件做了一个，供大家参考，具体内容如下：

1. /* ajax 上传图片 */ 
2.  var num = 0; 
3.  // 点击删除图片 
4. function onDelete(num){ 
5.   if($("#"+num).attr('src')!="__PUBLIC__/Home/images/jiazai.gif" && $("#"+num).attr('src')!=""){ 
6.       if(confirm("确认删除吗")){ 
7.         $("#a"+num).remove(); 
8.       }else{ 
9.         //  
10.       } 
11.   } 
12. } 
13. $(function(){  
14.    
15.     $("#file0").bind("change",function(){ 
16.        
17.           clickUpload(num); 
18.              
19.     });  
20.     function clickUpload(num){ 
21.        var imgObject = document.getElementById('file0'); // 文件对象 
22.    
23.       $("#yulan").append("<a id='a"+num+"' onclick='onDelete("+num+")' href='javascript：;'> <img id='"+num+"' width='75' height='75'  src='__PUBLIC__/Home/images/jiazai.gif'/></a>"); 
24.           
25.        // $("#yulan").append("<li id='a"+num+"' ><img id='"+num+"' src='__PUBLIC__/Home/images/jiazai.gif' /><a href='javascript：;' onclick='onDelete("+num+")'>删除</a></li>"); 
26.        var getImageSrc = getFullPath(imgObject); // 本地路径 
27.        // 实例化image对象 
28.    
29.        var pos = getImageSrc.lastIndexOf("."); 
30.        var lastname = getImageSrc.substring(pos, getImageSrc.length) // 图片后缀 
31.    
32.        if(lastname!=".jpg" && lastname!=".png" && lastname!=".jpeg" && lastname!='.gif'){ 
33.          $("#a"+num).remove(); 
34.           alert("请选择一张图片"); 
35.        }else{ 
36.          ajaxFileUpload(num); 
37.          $("#file0").unbind("change").bind("change",function(){ 
38.            clickUpload(num); 
39.           }); 
40.        }  
41.        num++; 
42.     } 
43.    
44.    
45.     function getFullPath(obj) {  //得到图片的完整路径 
46.       if (obj) { 
47.         if (window.navigator.userAgent.indexOf("MSIE") >= 1) { 
48.           obj.select(); 
49.           return document.selection.createRange().text; 
50.         }else if (window.navigator.userAgent.indexOf("Firefox") >= 1) { 
51.           if (obj.files) { 
52.             return obj.files.item(0).getAsDataURL(); 
53.           } 
54.           return obj.value; 
55.         } 
56.           return obj.value; 
57.       } 
58.     }  
59.     function ajaxFileUpload(num) { 
60.    
61.       $.ajaxFileUpload 
62.       ( 
63.         { 
64.           url: 'http://xxxx/updateImg', //用于文件上传的服务器端请求地址 
65.           secureuri: false, //是否需要安全协议，一般设置为false 
66.           fileElementId: 'file0', //文件上传域的ID 
67.           dataType: 'json', //返回值类型 一般设置为json 
68.           success: function (data) //服务器成功响应处理函数 
69.           { 
70.             var jsonText = data;  
71.             console.log(jsonText); 
72.             if(jsonText['status']==1){  
73.               if(jsonText['info']!=""){  
74.                 console.log(jsonText['info']); 
75.                 $("#"+num).attr("src","__PUBLIC__//Admin/Upload/"+jsonText['info']); 
76.      
77.                  var images = $("#img").val(); 
78.      
79.                 if(images!=""){ 
80.                   $("#img").val(images+","+jsonText['info']); 
81.                 }else{ 
82.                   $("#img").val(images+""+jsonText['info']); 
83.                 } 
84.                    
85.               } 
86.             }else{ 
87.               $("#a"+num).remove(); 
88.               // alert("图片上传失败");   
89.             }             
90.           }, 
91.           error: function (data,e)//服务器响应失败处理函数 
92.           { 
93.             alert(e); 
94.           } 
95.         } 
96.       ) 
97.     } 
98. }); 

以上就是本文的全部内容，希望对大家学习php程序设计有所帮助。

Tags: PHP+Ajax+JS

分享到：