当前位置:首页 > PHP教程 > php上传下载 > 列表

PHP+Ajax+JS实现多图上传

发布:smiling 来源: PHP粉丝网  添加日期:2021-08-01 20:36:30 浏览: 评论:0 

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

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

Tags: PHP+Ajax+JS

分享到: