• FormData自定义上传图片


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

    html 代码

    <li>
        <label class="left">上传产品图片:</label>
        <div class="formlisttext" id="feedback">
          <a onClick="getElementById('inputfile').click()" class="addpic"><b>+</b><br />添加图片</a>
          <input type="file" onchange=checkImgExt(this.value) multiple="multiple" name="image" id="inputfile" style="height:0;0;z-index: -1; position: absolute;left: 10px;top: 5px;"/>
          <small class="long">支持jpeg、jpg、gif、png等图片格式,单张图片最大不超过8M。</small>
       </div>
    </li>

    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(/&lt;/g,'<').replace(/&gt;/g,'>') 转换html标签,否则图片无法显示。
                        if($("#feedback").children('img').length == 0)
                            $("#feedback").prepend(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));
                        else
                            $("#feedback").children('img').eq(0).before(data.replace(/&lt;/g,'<').replace(/&gt;/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 "<textarea><img src='{$dir_base}error.jpg'/></textarea>";
    14          exit(0);
    15      }
    16 
    17      $output = "<textarea>";
    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=' 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=' 62px;height: 48px;'/>";
    60              $output .= "</div>";
    61          }
    62 
    63          $index++;
    64     }
    65 
    66     echo $output."</textarea>";
    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<arr.length;i++)
    10         {
    11             if(ext == arr[i])
    12             {
    13                 flag = true; //一旦找到合适的,立即退出循环
    14                 break;
    15             }
    16         }
    17         //条件判断
    18         if(!flag)
    19         {
    20             alert('你上传的图片类型不正确');
    21 //            $("#Model").val('');
    22             return false;
    23         }
    24     };
  • 相关阅读:
    快速排序
    Web总结
    浏览器兼容性问题汇总
    AngularJS理论基础
    预处器的对比——Sass、LESS.
    js事件知识整理
    Java script基础
    重拾nodeJs
    全国城市三级联动
    js 获取地址栏参数
  • 原文地址:https://www.cnblogs.com/we-jack/p/8136575.html
Copyright © 2020-2023  润新知