PHP+Ajax+JS实现多图上传

前端技术 2023/09/08 PHP

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

/* ajax 上传图片 */
 var num = 0;
 // 点击删除图片
function onDelete(num){
  if($(\"#\"+num).attr(\'src\')!=\"__PUBLIC__/Home/images/jiazai.gif\" && $(\"#\"+num).attr(\'src\')!=\"\"){
      if(confirm(\"确认删除吗\")){
        $(\"#a\"+num).remove();
      }else{
        // 
      }
  }
}
$(function(){ 
 
    $(\"#file0\").bind(\"change\",function(){
     
          clickUpload(num);
           
    }); 
    function clickUpload(num){
       var imgObject = document.getElementById(\'file0\'); // 文件对象
 
      $(\"#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>\");
        
       // $(\"#yulan\").append(\"<li id=\'a\"+num+\"\' ><img id=\'\"+num+\"\' src=\'__PUBLIC__/Home/images/jiazai.gif\' /><a href=\'javascript:;\' onclick=\'onDelete(\"+num+\")\'>删除</a></li>\");
       var getImageSrc = getFullPath(imgObject); // 本地路径
       // 实例化image对象
 
       var pos = getImageSrc.lastIndexOf(\".\");
       var lastname = getImageSrc.substring(pos, getImageSrc.length) // 图片后缀
 
       if(lastname!=\".jpg\" && lastname!=\".png\" && lastname!=\".jpeg\" && lastname!=\'.gif\'){
         $(\"#a\"+num).remove();
          alert(\"请选择一张图片\");
       }else{
         ajaxFileUpload(num);
         $(\"#file0\").unbind(\"change\").bind(\"change\",function(){
           clickUpload(num);
          });
       } 
       num++;
    }
 
 
    function getFullPath(obj) {  //得到图片的完整路径
      if (obj) {
        if (window.navigator.userAgent.indexOf(\"MSIE\") >= 1) {
          obj.select();
          return document.selection.createRange().text;
        }else if (window.navigator.userAgent.indexOf(\"Firefox\") >= 1) {
          if (obj.files) {
            return obj.files.item(0).getAsDataURL();
          }
          return obj.value;
        }
          return obj.value;
      }
    } 
    function ajaxFileUpload(num) {
 
      $.ajaxFileUpload
      (
        {
          url: \'http://xxxx/updateImg\', //用于文件上传的服务器端请求地址
          secureuri: false, //是否需要安全协议,一般设置为false
          fileElementId: \'file0\', //文件上传域的ID
          dataType: \'json\', //返回值类型 一般设置为json
          success: function (data) //服务器成功响应处理函数
          {
            var jsonText = data; 
            console.log(jsonText);
            if(jsonText[\'status\']==1){ 
              if(jsonText[\'info\']!=\"\"){ 
                console.log(jsonText[\'info\']);
                $(\"#\"+num).attr(\"src\",\"__PUBLIC__//Admin/Upload/\"+jsonText[\'info\']);
   
                 var images = $(\"#img\").val();
   
                if(images!=\"\"){
                  $(\"#img\").val(images+\",\"+jsonText[\'info\']);
                }else{
                  $(\"#img\").val(images+\"\"+jsonText[\'info\']);
                }
                 
              }
            }else{
              $(\"#a\"+num).remove();
              // alert(\"图片上传失败\");  
            }            
          },
          error: function (data,e)//服务器响应失败处理函数
          {
            alert(e);
          }
        }
      )
    }
});

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

本文地址:https://www.stayed.cn/item/22647

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。