网站首页 think技术

蛋碎的多图片显示排序

发布时间：2016-06-11 02:52查看次数：6291

蛋碎的多图上传 + 拖动排序!!!

这里边有个坑就是filereader 的方法都是异步执行的,就是多线程

如果放在 FOR里边永远输出的是最后一个程序 !!这个坑我也是踩了好深

然后今天翻然醒悟示例代码如下:

对你有帮助记得点赞哦!

testimg.rar

日了狗了屏幕分辨率小真蛋碎

首先蛋碎的原因是 var file_data = new FileReader();

 file_data.readAsDataURL(files[i]);
            //
主要是蛋碎这个onload事件 这个时间不能传参
            file_data.onload = function(e){
                test(this.result);
            };

想了好多方法 ...什么闭包了..什么绑定方法了..什么什么.......但效果不好!!

这个拖动排序好弄,直接用JQUERY.UI插件即可实现拖动,排列了什么的

那算了.用ajax无刷新上传然后再拖动排序 !

因为用了 readAsDataURL 把图片数据直接读取成 base64_decode 然后直接AJAXPOST数据

 $.post('1.php',{'img':imgdate},function(date){
          if (date.msg == 1) {
              
          }
      }
          ,'json');
   }

img':imgdate 这里的数据是 base64_encode的,没有折腾过!以为直接base64_decode在 file_put_contents;

就可以了~~谁知道呢!问题有来了

写出后带有base64的文件头,图片格式不对了~~~~

问题有来了 !!郁闷死我了!!! 最后咋弄?百度后知道是这个文件头作怪这个头部长度是根据图片类型的所以呢?长度不是固定的

好吧!正则匹配来了!!

function set_img($img_content){
    if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $img_content, $result)){
  $type = $result[2];
  $new_file = "./images/test.{$type}";
  if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $img_content)))){
     //这里返回JSON对象数据是因为前台还要移动排序
      $msg = array(
        'msg'=>'1',
        'imgname'=>'test.'.$type,
         'url'=>$new_file
          );
    echo json_encode($msg);
  }
 }
}

然后就这样吧!!! 效果是多图片上传->上传后返回客户端图片路径->然后浏览器拖动图片->进行排序AJAX排序!

技术点:

1.<input type="file" name="file_upload" id="file_upload_1" multiple="multiple" />

2.JQUERY的 .prop('files');

3.H5 new FileReader()

4.base64_decode base64_encode

真是折腾的一个需求---从用户体验上说不错.是我自己的 JS水准不够加油!

关键字词：蛋碎的多图片显示排序