Dropzone Drag file upload apply an instance to the THINKPHP5

Reference: How to use Dropzone

Click to view dropzone Chinese documents

Backstage with the Inspinia framework template, inside there, dropzone.js

Dropzone is a can drag file upload js.

Drag it in and upload it. I wrote a image3,image4 on the page that saved the uploaded file.

This will require rewriting the dropzone.js.

The code is as follows:

Front:

<div class= "Ibox-content" >    <p>         <strong> Upload </strong>    </p>    < form action= "#"  class= "Dropzone"  id= "Dropzoneform" >         <div class= "Fallback" >             <input name= "File"  type= "file"  multiple />         </div>    </form></div><div class= "Form-group" ><label class= "Col-sm-2 control-label" > Map </label>    <div  class= "col-sm-9" >        <input name= "Pictureurls"  type= "text"  class= "Form-control"  id= "Image3"  value= "{$info. pictureurls|default= '}"/>         <input type= "text"  class= "Form-control hidden"  id= "Image4"/>         <span class= "Help-block" > The successful file has been automatically saved in the server, import attachment management can edit and delete. The Map URL box is only for the group contained in this article. </span>    </div>    <div class= "Col-sm-1" >< span class= "Btn btn-default btn-xs"  id= "delpic34" > Empty </span></div></div >

<script >dropzone.options.dropzoneform = {url: "{: url (' Admin/picture/dz_upload ')}", ParamName: "File",//The Name that'll be used to transfer the file Maxfilesize:2,//MB dictdefaultmessage: "<strong> Drag the file or click on upload </s Trong></br> "};</script>

In the dropzone.js.

  Here plus ressuccess: function (file,res)  {    // console.log (typeof (Res)) ;     res = json.parse (res);     // console.log (res[' FileName ']);     if (res[' filename ') {        //  add by zy        var hasfilename3 = $ (' #image3 '). Val ();         var hasfilename4 = $ (' #image4 ') . val ();         if (Hasfilename3) {             var newfilename3 = hasfilename3+ ', ' +res.name;         }else{             var newfilename3 = res.name;        }         if (HASFILENAME4) {            var  newfilename4 = hasfilename4+ ', ' +res.filename;        }else{             var newfilename4 =  res.filename;        }         $ (  ' #image3 '). Val (Newfilename3);         $ (  ' #image4 '). Val ( NEWFILENAME4);        //  add two boxes,id    }     if  (file.previewelement)  {        return  file.previewelement.classlist.add ("dz-success");     },

Back end:

  Multiple Images  3-1  dropzone.jspublic function dz_upload () {    //   Access to the list of documents      $files  = request ()->file (");     foreach ($files  as  $file) {        //  move to the frame for root/public/ uploads/          //  under Move () to remove the parameters, "will be renamed, plus," use the original file name.          $info  =  $file->move (root_path .  ' public '  . DS .  ' uploads '. $this->image_dir. ds, ');         if ($info) {            //  input   42a79759f284b767dfcb2a0197904287.jpg            $ filename =  $info->getinfo ($name = ' name ');                   //  Original file name              $savename  =  $info->getsavename ();              $path [' filename '] =  $filename;              $path [' name '] = ds .  ' uploads/'  . $this->image_dir. ds  .  $savename;            //  to save files to the repository   Accessories Table              $pathname  =  $path [' Name '];             $attachment  = model (' Attachment ');             $attachment  ->  saveattachment ($info, $filename, $pathname);             //  return the required information &Nbsp;           echo json_encode ($path);         }else{             //  failed to get the wrong information             return   $this->error ($file->geterror ())  ;        }     }}

Above: Saveattachment, is another method, written in the model.

  files to the Repository Annex table Public function saveattachment ($info, $filename, $pathname) {      $data  = array  (         ' module '       =>    request::instance ()->controller (),           //  controller name          ' filename '     =>     $filename,                                    //  Original filename          ' FilePath '    =>     $pathname,                                    //  's new filename          ' filesize '    = >     $info->getinfo ($name = ' size '),                //  file size          ' Fileext '     =>    get_extension ($filename),                    //  file Extensions           ' Isimage '     =>     $info GetInfo ($name = ' key ') = = ' Image '?1:0,   //  is a picture file           ' Create_time ' =>    time (),                                       //  time          ' Uploadip '    =>    GET_CLIENT_IP (),                              //  ip         ' Authcode '    = >    uniqid (),                                     //  only one          ' Create_uid '  = >    session::get (' uid '),                         //  Upload file User id          ' SiteID '      =>    1,                                             //  Station ID, ready     );     $attachment  = model (' Attachment ');     $attachment-> save ($data);}

Attachment table structure:

create table  ' hk_attachment '   (   ' id '  int (TEN)  unsigned not null  AUTO_INCREMENT,   ' module '  char (+)  NOT NULL,   ' cate_id '  smallint (5)  unsigned NOT NULL DEFAULT  ' 0 ',   ' filename '  char (+)  NOT  null,   ' filepath '  char ($)  NOT NULL,   ' filesize '  int (Ten)   unsigned not null default  ' 0 ',   ' fileext '  char (Ten)  NOT NULL,    ' Isimage '  tinyint (1)  unsigned NOT NULL DEFAULT  ' 0 ',   ' Isthumb '  tinyint (1)  unsigned NOT NULL DEFAULT  ' 0 ',   ' downloads '   Mediumint (8)  unsigned NOT NULL DEFAULT  ' 0 ',   ' userid '  mediumint (8)  unsigned NOT NULL DEFAULT  ' 0 ',   ' create_time '  int (Ten)  unsigned  not null default&nbsP; ' 0 ',   ' uploadip '  char ( NOT NULL,   ' status '  tinyint (1)  NOT  null default  ' 0 ',   ' authcode '  char (+)  NOT NULL,   ' SiteID '   smallint (5)  unsigned NOT NULL DEFAULT  ' 0 ',   ' desc '  varchar (255)   default null comment  ' picture profile ',   ' Pic_tag '  varchar (255)  default null,    ' author '  varchar  DEFAULT NULL,   ' size '  varchar (+)  default  NULL,   ' We_status '  int (one)  DEFAULT  ' 0 ',   ' title '  varchar (30)  DEFAULT NULL,   ' Update_uid '  int (Ten)  DEFAULT NULL,   ' Create_uid '  int  DEFAULT NULL,   ' click '  int (Ten)  DEFAULT  ' 1 ',   ' Mobao '  varchar (255)  DEFAULT NULL,   ' authority '  tinyint (1)  DEFAULT  ' 1 ',    ' Update_time'  int  DEFAULT NULL,   ' from_num '  varchar (+)  DEFAULT NULL,   PRIMARY KEY  (' id '),  key  ' Authcode '   (' Authcode '))  ENGINE=MyISAM  auto_increment=56 default charset=utf8;

Dropzone Drag file upload apply an instance to the THINKPHP5