PHP+Ajax+JS实现多图上传

Java  /  管理员 发布于 5年前   399

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

/* ajax 上传图片 */ var num = 0; // 点击删除图片function onDelete(num){  if($("#"+num).attr('src')!="/public/static/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(" ");               // $("#yulan").append("
删除
");       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/static//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程序设计有所帮助。

您可能感兴趣的文章:

• 简单的PHP多图上传小程序代码
• php+html5使用FormData对象提交表单及上传图片的方法
• 简单PHP上传图片、删除图片实现代码
• 简单的PHP图片上传程序
• PHP实现多图上传和单图上传功能