multiple多图选择，借助FormData通过ajax实现上传

<html>
<head>
 <script>
      var files;
      var url = "/upimage/3g_xhr.PHP";
      function getPath(fileQuery){
          var i;
          files =fileQuery.files;
          var imgContainer=document.getElementById("imgPanel");
          for(i=0;i<files.length;i++){
              var reader = new FileReader();
              var  filename=files[i].name;
              reader.onload =(function(filename){
                  return function(e){
                      var obj=document.createElement("tr");
                      obj.innerHTML="<td><img title='"+filename
                      +"' src='"+e.target.result
                  +"' style='width:100;height:100;' /></td><td " 
               +" style='vertical-align:bottom;'>"+filename+"</td>";
                   imgContainer.appendChild(obj);
              };
             })(filename);
             reader.readAsDataURL(files[i]);
           }
      }
      function getvl(obj){
        getPath(obj);
      }
      function submitImg(){
           for(var j=0;j<files.length;j++){
               var xhr = new XMLHttpRequest ();
               xhr.onreadystatechange = function () {
                  if (xhr.readyState == 4) {
                       if ((xhr.status >= 200 && xhr.status < 300)
                          || xhr.status == 304)               
                       //200:Success.304:Tell browser to read cache.
                       {
                            alert(xhr.responseText);
                       }
                  }
               }
               var boundary = "------" + new Date () .getTime ();
               xhr.open ("post",url,true );
               var formData = new FormData ();
               formData.append("name","nik22"); 
               formData.append ("upfile",files[j]);
               xhr.send (formData);
           }
       }
 </script>
</head>
<body>
    <form enctype="multipart/form-data" action="" method="post"
          id="upform">
         <div id="text" style="color:#f00;"></div>
         选择图片：<input type="file" name="upfile[]" id="upfile"  
                    multiple="multiple" onchange="getvl(this)" />
         <table id="imgPanel">
         </table>
         <input type="button" value="上传" />
    </form>
</body>
</html>

<?PHP
    echo "No. files uploaded : ".count($_FILES['upfile']['name'])."<br>";
     $uploadDir = "images_xhr/";
     /**
     for ($i = 0; $i < count($_FILES['upfile']['name']); $i++) {
          echo "File names : ".$_FILES['upfile']['name'][$i]."<br>";
      $ext = substr(strrchr($_FILES['upfile']['name'][$i],"."),1);
          // generate a random new file name to avoid name conflict
          $fPath = md5(rand() * time()) . ".$ext";
      echo "File paths : ".$_FILES['upfile']['tmp_name'][$i]."<br>";
     $result = move_uploaded_file($_FILES['upfile']['tmp_name'][$i],$uploadDir . $fPath);
          if (strlen($ext) > 0){
           echo "Uploaded ". $fPath ." succefully. <br>";
          }
     }
     echo "Upload complete.<br>"*/
    if($_FILES['upfile']['size'] == 0)
      die("<script>alert('请选择您要上传的图片！');history.go(-1);
          </script>");
                  
    $imageinfo = getimagesize($_FILES['upfile']['tmp_name']);
    if($imageinfo[0] > 1200 || $imageinfo[1] > 800)
     die("<script>alert('图片大小不符合标准(长1200宽800)！');history.go(-1);</script>");
    if($imageinfo[2] < 1 || $imageinfo[2] > 3)
     die("<script>alert('图片只能是GIF,JPG,PNG格式！');history.go(-1);</script>");
    //$imageinfo[2] 的值得于1,表示是gif格式， 2是jpg格式,3是png
    if($imageinfo[2] == 1)
    {
     $imageinfo[2] = ".gif";
    }
    elseif($imageinfo[2] == 2)
    {
     $imageinfo[2] = ".jpg";
    }else
    {
     $imageinfo[2] = ".png";
    }
    //文件名:把时间和文件名的md5值组合，加上后缀得到文件名。
    $randval = rand();
    $imgname = date("YmdHis").substr(md5($randval),5).$imageinfo[2];
    copy($_FILES['upfile']['tmp_name'],$uploadDir.$imgname) or die("move img error!");
    echo "Upload succefully.<br>";
?>

注：1）上面的PHP 文件放到文件夹upimage下，同时在PHP所在文件夹新建文件夹images_xhr，用于存

放上传的图片；

2）如果不通过ajax上传图片，那么将html页面中的form的action设置为/upimage/3g_xhr.PHP，

提交按钮的type设置为submit,同时将PHP 文件中的注释的那段去掉注释，同时将它后面的代码

注释掉，就可以实现同时提交多个图片。

原文链接：https://www.f2er.com/ajax/165315.html

multiple多图选择，借助FormData通过ajax实现上传

猜你在找的Ajax相关文章