由于前段时间的项目中 涉及到图纸的上传 前端大神很随意的扔给我一个页面 让我自己修修改改 找了好几个素材站都没有找到合适的上传插件 最后不得已 用formdata 写了一个 顺便记录下吧

html 代码

    上传产品图片：    
      
           　　
       +
添加图片    　　
           　　
       支持jpeg、jpg、gif、png等图片格式，单张图片最大不超过8M。　　 
      

js 代码

$("#inputfile").change(function(){            //创建FormData对象            var data = new FormData();            //为FormData对象添加数据            $.each($('#inputfile')[0].files, function(i, file) {                data.append('upload_file'+i, file);            });            //发送数据            $.ajax({                url:'url',  //地址自己写啊                type:'POST',                data:data,                cache: false,                contentType: false,        //不可缺参数                processData: false,        //不可缺参数                success:function(data){                                    data = $(data).html();                    //第一个feedback数据直接append，其他的用before第1个（ .eq(0).before() ）放至最前面。                    //data.replace(/</g,'<').replace(/>/g,'>') 转换html标签，否则图片无法显示。                    if($("#feedback").children('img').length == 0)                        $("#feedback").prepend(data.replace(/</g,'<').replace(/>/g,'>'));                    else                        $("#feedback").children('img').eq(0).before(data.replace(/</g,'<').replace(/>/g,'>'));                    $(".loading").hide();    //加载成功移除加载图片                },                error:function(err){//                    alert('上传出错');//                    $(".loading").show();    //加载失败移除加载图片                }            });        });

php 代码

1 function img(){ 2     $db = $GLOBALS['db']; 3     $ecs = $GLOBALS['ecs']; 4  5     $dir_base = DATA_DIR . '/product_img/' . date('Ymd') . '/'; 6     if (!file_exists($dir_base)) { 7         if (!@mkdir($dir_base, 0755,true)) { 8             return false; 9         }10     }11     //没有成功上传文件，报错并退出。12      if(empty($_FILES)) {13          echo "<img src='{$dir_base}error.jpg'/>";14          exit(0);15      }16 17      $output = "";18      $index = 0;        //$_FILES 以文件name为数组下标，不适用foreach($_FILES as $index=>$file)19      foreach($_FILES as $file){20          $upload_file_name = 'upload_file' . $index;        //对应index.html FomData中的文件命名21          $fix = substr(strrchr($_FILES[$upload_file_name]['name'], '.'), 1);22          $filename = base64_encode("product_img_62_48".date('YmdHis')."_".rand(1000,9999)).".".$fix;23          $gb_filename = iconv('utf-8','gb2312',$filename);    //名字转换成gb2312处理24         //文件不存在才上传25         if(!file_exists($dir_base.$gb_filename)) {26              $isMoved = false;  //默认27              $MAXIMUM_FILESIZE = 8 * 1024 * 1024;     //文件大小限制    8M = 8 * 1024 * 1024 B;28              $rEFileTypes = "/^\.(jpg|jpeg|gif|png){1}$/i";   //取文件后缀29 30              if ($_FILES[$upload_file_name]['size'] <= $MAXIMUM_FILESIZE && preg_match($rEFileTypes, strrchr($gb_filename, '.'))) {32                 $isMoved = @move_uploaded_file ( $_FILES[$upload_file_name]['tmp_name'], $dir_base.$gb_filename);        //上传文件33              }34          }else{35                  $isMoved = true;    //已存在文件设置为上传成功36          }37          if($isMoved){38              $sql = 'INSERT INTO'.$ecs->table('goods_img').'(`img_path`) VALUES '."('$dir_base$filename')";39              $db->query($sql);40              $img_id = $db->insert_id();41              //输出图片文件<img>标签42             //注：在一些系统src可能需要urlencode处理，发现图片无法显示，43              //    请尝试 urlencode($gb_filename) 或 urlencode($filename)，不行请查看HTML中显示的src并酌情解决。44              $output .= "<div class='thumblist' id='imageDelete{$img_id}' >";45              $output .= "<div class='thumboperate'>";46 //             $output .= "<a href='' class='replace'></a>";47              $output .= "<a href='' onclick='imgdelete({$img_id});return false;' class='delete'></a>";48              $output .= "</div>";49              $output .= "<input type='hidden' name='imagepath[]' value='{$img_id}'>";50              $output .= "<img src='{$dir_base}{$filename}' title='{$filename}' alt='{$filename}' style='width: 62px;height: 48px;'/>";51              $output .= "</div>";52          }else {53              $output .= "<div class='thumblist' >";54              $output .= "<div class='thumboperate'>";55 //             $output .= "<a href='' class='replace'></a>";56              $output .= "<a href='' class='delete'></a>";57              $output .= "</div>";58              $output .= "<input type='hidden' name='imagepath[]' value='{$dir_base}{$filename}'>";59              $output .= "<img src='{$dir_base}error.jpg' title='{$filename}' alt='{$filename}' style='width: 62px;height: 48px;'/>";60              $output .= "</div>";61          }62 63          $index++;64     }65 66     echo $output."";67 }

由于本人比较懒，细节方面就不调了

验证方法附上

1 function checkImgExt(filename) 2     { 3         var flag = false; //状态 "jpg","png","jpeg","gif" 4         var arr = ["jpg","png","jpeg","gif"]; 5         //取出上传文件的扩展名 6         var index = filename.lastIndexOf("."); 7         var ext = filename.substr(index+1).toLowerCase( ); 8         //循环比较 9         for(var i=0;i