Question

     variable
col1         
A      [x, z]
B         [z]
C         [y]
D      [x, z]
E         [z]
F      [x, y]

$('.image-editor').each(function(){
  $(this).cropit();
});
$('.export').click(function(){
  var category = [];
  $("input[name='category']:checked").each(function(){
    category.push(this.value);
	});
  var imageData = [];
  $('.image-editor').each(function(){
      imageData.push( $(this).cropit() );
  });
  $.ajax({
      url: "upload.php",
      type: "POST",
      data: {
      imageData: imageData,
      category: category
    },
      success: function (result){
        alert(result);
    }
  });
});

.col100{
  width:100%;
}
.left{
  float:left;
}
.mbottom10{
  margin-bottom:20x;
}
.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

.image-editor{
	width: 100%;
	float:left;
}
.cropit-preview {
  float:left;
  background-color: #f8f8f8;
  background-size: cover;
  width: 200px;
  height: 150px;
}
.cropit-preview-image-container {
  cursor: move;
}
.image-size-label {
  margin-top: 10px;
}

我正在尝试将多个<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cropit/0.5.1/jquery.cropit.min.js"></script> <html> <head> </head> <body> <section class="col100 left mbottom10"> <input type="checkbox" name="category" value="1"> Slide <input type="checkbox" name="category" value="2" id="gallery"> Gallery <input type="submit" name="submit" class="export" /> </section> <div class="clearfix"></div><br/> <article class="image-editor"> <input type="file" class="cropit-image-input" /><br/> <input type="range" class="cropit-image-zoom-input" /><br/> <section class="cropit-preview"></section><br/> </article> <div class="clearfix"></div><br/> <article class="image-editor"> <input type="file" class="cropit-image-input" /><br/> <input type="range" class="cropit-image-zoom-input" /><br/> <section class="cropit-preview"></section><br/> </article> </body> </html>上传到服务器，但是它仅上传第一个。在base64 encoded image的帮助下通过ajax传递了多个图像形成数组之后，我在php中尝试了@ZakariaAcharki。但是，只有一个和第一张图像正在上传和提交！，根据提琴中提供的ajax数据，以下过程和代码是否错误？

foreach loop

Answer 1

Working fiddle 。

是否可以将同一CSS类的每个值存储在数组中？

是的，可以尝试将其直接添加到数组中，例如：

var imageData = [];

$('.image-editor').each(function(){
    imageData.push( $(this).cropit('export') );
});

如何在php中上传多个base64编码的图像

1 个答案: