问一下jquery上传多张图片

Question

我想在使用 jquery dropzone 后上传带有预览的图像。

首先，如果使用 dropzone 仅上传一张图像，则图像会显示出来，并且使用日期+rndom 编号给出唯一的名称。

这是第一种方式，

第二种方式， 我也想添加一张图片并给出唯一的名称，也必须将其保存在数据库中。但是在上传第二张图片时，它会替换第一张图片

有什么办法吗

================================================ ========================

这是执行多张上传图片的脚本， 放置在视图中：header.php。我为 header.php 中的其他 dropzone 函数创建了相同的函数。只需替换视图中的 div 标签 id 和输入标签

<script type="text/javascript">
$(function() {
  var name = Date.now();
  var key = Math.floor((Math.random() * 99999999999) + 1);
  var unique = name+'-'+key;

  $("div#eyeDropZone").dropzone({
       url:'http://localhost/work/uploadimage/multiple/'+unique,

       paramName:'foto', // param to upload image name to db
       uploadMultiple:false,
       maxFiles:2,

       acceptedFiles: '.jpg',
       maxFilesize:1,
       addRemoveLinks: 'no',
       dictFileTooBig: "File size ({{filesize}}MB). Max File Size: {{maxFilesize}}MB.",
       dictInvalidFileType: "JPG Only",


      init: function() {
        this.on("maxfilesexceeded", function(file) {
        this.removeAllFiles();
        this.addFile(file);

        });
        this.on("removedfile", function(file, xhr, formData) {
        $("#filename").val('');
         });
       },

      accept: function(file, done) {
        var filename = file.name;
        $("#filename").val(unik);
        done();
        }
  });
});
</script>

这是控制器，这段代码是朋友开发的。他需要我的帮助来改变一点， 首先只使用 jquery dropzone 将图像上传到文件夹 并从文件夹中删除图像，然后插入数据库并将图像保存到文件夹。

public function birthday_upload($unique='')
{
  error_reporting(0);
  $this->form_validation->set_error_delimiters('<div style="border: 1px solid: #999999; background-color: #ffff99;">', '</div>');

  $config['image_library'] = 'gd2';
  $original_path                     = './birthday/original';
  $resized_path                      = './birthday/resized';
  $thumbs_path                       = './birthday/thumb';
  $this->load->library('image_lib', $config);

  unlink('./birthday/original/'.$uniks.'.jpg');
  unlink('./birthday/resized/'.$uniks.'.jpg');
  unlink('./birthday/thumb/'.$uniks.'.jpg');

  $config = array(
          'allowed_types'   => 'jpg|jpeg',
          'max_size'        => 1024,
          'upload_path'     => $original_path, //upload directory
          'file_name'       => $uniks,
          );

  $gambar['filename'] = $uniks;
  $this->load->library('upload', $config);
  $this->upload->do_upload('foto');
  $image_data = $this->upload->data(); //upload the image
  $image['foto'] = $image_data['file_name'];

  //your desired config for the resize() function
  $config = array(
          'source_image'     => $image_data['full_path'], //path to the uploaded image
          'new_image'        => $resized_path,
          'maintain_ratio'   => false,
          'width'            => 566,
          'height'           => 238
          );

  $this->image_lib->initialize($config);
  $this->image_lib->resize();

  // for the Thumbnail image
  $config = array(
          'source_image'         => $image_data['full_path'],
          'new_image'            => $thumbs_path,
          'maintain_ratio'       => true,
          'width'                => 100,
          'height'               => 100
          );

  //here is the second thumbnail, notice the call for the initialize() function again
  $this->image_lib->initialize($config);

  $this->birthday_m->simpan($gambar);

}

这是插入图片的方式

public function simpan($gambar)
{
  error_reporting(0);

  $name_fb              = mysql_real_escape_string($this->input->post('name'));
  $gender_fb            = mysql_real_escape_string($this->input->post('gender'));
  $tempat_lahir_fb  = mysql_real_escape_string($this->input->post('pob_child'));
  $child_birth_fb   = mysql_real_escape_string($this->input->post('birth_child'));
  $email_fb                 = mysql_real_escape_string($this->input->post('email'));
  $address_fb           = mysql_real_escape_string($this->input->post('address'));
  $nama_anak_fb         = mysql_real_escape_string($this->input->post('child_name'));
  $filename_fb          = mysql_real_escape_string($this->input->post('foto_name').'.jpg');
  // add to the line below to save image name to database
  $akta_fb                  = mysql_real_escape_string($this->input->post('akta_name').'.jpg');

  $data= array(
    'name_fbd'                  => $name_fb,
    'email_fbd'                 => $email_fb,
    'address_fbd'           => $address_fb,
    'nama_anak_fbd'         => $nama_anak_fb,
    'tempat_lahir_fbd'  => $tempat_lahir_fb,
    'child_birth_fbd'       => $child_birth_fb,
    'filename_fbd'          => $filename_fb,
    'filename_akta'         => $akta_fb,
    'gender_fbd'            => $gender_fb,
    'dateregister_fbd'  => $now,
    'voucher_fbd'           => $voucher,
    'handphone_fbd'         => $handphones,
    // 'dateupdate'     => ''
  );


  $this->db->insert('mydatabase',$data);
  {
    redirect(''.base_url().'birthdays/success/');
  }
}

这是视图， 我为新的dropzone区域制作了其他dropzone功能来上传图像， 在 dropzone 区域中显示图像是成功的，但是第一张图像被第二张图像替换了。 并且 filaname 仅在 dropzone 区域下方显示一个。

<div class="dropzone" id="my-awesome-dropzone">
  <div id="eyeDropZone" class="dropzone" ></div>
  <input multiple  name="foto_name" type="text" id="filename"  required readonly />

</div>
<div class="dropzone" id="my-awesome-dropzone">
  <div id="eyeDropZone" class="dropzone" ></div>
  <input multiple  name="akta_name" type="text" id="filenameakta"  required readonly/>
</div>

Answer 1

我想你想上传多个文件。您可以在DropZone Options 中设置maxfile 限制

当用户尝试超过限制时，将触发事件maxfilesexceeded，您可以在那里执行验证。

    Dropzone.options.myDropzone = {
            maxFiles: 2,
      init: function() {
    this.on("maxfilesexceeded", function(file){
        alert("No more files can be uploaded!");
    });
  }
    }

如果这不能解决您的问题，请在收到任何错误消息时提供。