README

基本用法

在布局相关文件中，必须使用 JavaScript 命令来实例化 pic-up

<div id="pic-up"></div>

<script>
  $('#pic-up').picup({
      name: 'imagem'
  });
</script>

必须定义 name 才能使用。表单的 enctype 将自动定义。

提交表单后，启动类以执行上传

$picUp = new Picup('imagem'); //A string 'imagem' refere-se ao mesmo valor informado no index 'name'
$imagens = $picUp->upload('uploadTest/sub1');

裁剪图片

如果要裁剪图片，可以使用以下方式的 cut() 方法。

简化后是这样的

$picUp = new Picup('imagem');
$imagens = $picUp->upload('uploadTest/sub1',  $picUp->cut(500, 500));

如果需要裁剪多个

$picUp = new Picup('imagem');
$corte1 = $picUp->upload('uploadTest/sub1',  $picUp->cut(500, 500));
$corte2 = $picUp->upload('uploadTest/sub1/thumb',  $picUp->cut(100, 100));

cut() 方法接收 4 个参数，分别是

@param $widthFinal
@param $heightFinal
@param string $type
- c = 裁剪，在选定的尺寸上中央裁剪图像
- o = 定焦，调整大小到最终尺寸（添加透明度以填补较小尺寸，并转换为 png）
- p = 比例，保持图像的较大尺寸等于缩略图的较小尺寸
- r = 相对，缺少的尺寸按相对于原始尺寸的值调整
- x [默认] = 最大，按选定的尺寸裁剪，不改变原始比例
@param string $posfix
@param string|boolean $renderOut
- 在此字段中可以配置要保存的文件类型
示例：$picup->cut(200, 200, null, '__thumb', 'webp');
示例 2：$picup->cut(400, 400, 'o');

toWebp() 方法

cut 方法的别名，执行 500x500 的裁剪预配置，并转换为 webp

@param $w
@param $h

upload() 方法

upload 方法使用两个参数，分别是

@param $folder
@param null $files

其中 $folder 是上传的路径，$files 是包含图像的数组，此参数可以是 null，这样就会使用原始文件

处理标准修改

在这里我们将看到一些关于 pic-up 正常执行标准的一些修改

$('#pic-up').picup({
   buttonText: 'Escolher imagem',
   name: 'imagem',
   addFunction: function (img, opt) {
       return '<div><div><img src="' + img + '" width="80" /></div>'
        + '<div><label>Nome</label> <input name="label['+(opt != undefined ? opt.id : "" )+']" value="'+(opt != undefined && opt.label != undefined ? opt.label : "" )+'" /></div>'
           + '</div>';
   },
   deleteImg: function (content) {
      $(content).hide();
   },
   content: [
               {id: 32, img: "http://www.minhaurl.com/imagens/ec193cp84fzbww_1_26296.JPG", label: "teste 32"},
               {id: 41, img: "http://www.minhaurl.com/imagens/ec193cp84fzbww_1_26296.JPG", label: "teste 41"},
               {id: 33, img: 'http://www.minhaurl.com/imagens/ec193cp89ruoww_1_72676.jpg', label: "teste 33"}
           ]
 });

请注意，在 pic-up 的使用中有一些新参数，buttonText、addFunction、deleteImg 和 content。

buttonText，是用于选择图像按钮的文本

addFunction，是生成图像基本视图的函数，无论是已加载的还是发送的，必须使用两个参数来创建，例如上面的示例 img 和 opt，其 return 将在每个加载或发送的图像上显示在屏幕上。

deleteImg，是执行加载或发送的图像删除视图的函数，在示例中，它正在隐藏其内容，重要的是不要删除图像内容，因为这会导致执行问题，必须使用一个参数，例如示例中的 content。

content，是构建已加载图像的对象，对于每个循环需要两个键 id 和 img，除了这些之外，还可以在 addFunction 函数中使用，它将通过第二个参数接收输入，例如示例中的 opt.label。

处理额外的输入

所有添加的输入都必须通过 filterInput() 方法进行预处理，例如示例中的 label 输入

$_POST['label'] = $picUp->filterInput($_POST['label']);

这样做，返回到变量 $_POST['label'] 的结果将如下示例所示

$_POST['label'] = array(
   'new' => array(0 => 'lorem ipsum', 1 => 'dolor')
   'original' => array( 32 => 'teste 32', 33 => 'teste 33', 41 => 'teste 41')
);

在 new => array() 中包含新图片的标签，而在 original => array() 中包含已上传的图片

删除已上传的图片

在提交后，pic-up 返回标记为删除的图片，这些图片在变量 $_POST['picup-delete-content'] 中返回，该数组将包含通过 id 传递的项和一个布尔值 0（表示不删除）和 1（表示删除）

[picup-delete-content] => Array
        (
            [imagem] => Array
                (
                    [32] => 0
                    [41] => 1
                    [33] => 0
                )

lliure / picup

维护者

详细信息