layui plus tp5 image upload examples

　　　　　　<div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form">
                  <div class="layui-form-item">
                      <label for="username" class="layui-form-label">
                          <span class="x-red">*</span>轮播图
                      </label>
                      <div class="layui-input-inline">
                          <button type="button" class="layui-btn" id="add">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                          </button>
                      </div>
                      <div class="layui-form-mid layui-word-aux">
                          <span class="x-red">*图片格式1920*450</span>
                      </div>
                  </div>
                  <div class="layui-form-item">
                    <img src="" alt="" id="img" style="width:100%;max-height:450px;">
                  </div>
                  <input type="hidden" name="banner" id="banner" value="">
                  <div class="layui-form-item">
                      <label for="L_repass" class="layui-form-label">
                      </label>
                      <button  class="layui-btn" lay-filter="add" lay-submit="">
                          增加
                      </button>
                  </div>
              </form>
            </div>
        </div>

Reception code creates a hidden input box to receive a hideen image path when the upload is complete click the upload time to put the picture into the database path

layui code examples

// executing instances 
// performing image upload instance 
var uploadInst = upload.render ({ 
  elem: '#add' // binding element 
  , URL: '{: URL (' uploads ')}' // upload interfaces 
  , size: 2048 
  , the Choose: function (obj) {
     // prefetch exemplary local file, do not support IE8 
    obj.preview ( function (index, file, Result) { 
      $ ( '#img') attr ( 'the src', Result);. // picture link (base64) images directly address assigned to the img src attribute 
    });
     // upload the picture again pass over the old image directory to delete 
    the this .data = { 'the above mentioned id': $ ( "# Banner" ). Val ()}; 

  }, DONE:function(res){
    // assign the new picture name 
    $ ( "# Banner" ) .val (res.filename);
     // uploaded callback 
    // console.log (RES); 
    IF (res.code == 1 ) {
       return layer.msg ( 'successful upload pictures, make sure increasing' ); 
    } the else {
       return layer.msg ( 'images failed to upload. Please try again refresh' ); 
    } 
  } 
  , error: function (E) {
     // request exception callback 
  } 
} );

 

Pictures tp interface code

/ * * 
* [Photo uploads Interface] 
* @return [type] [Image Name] 
* / 
public  function uploads () {
     $ ID = INPUT ( 'ID' );
     $ File = Request () -> File ( 'File ' );
     // move to the lower frame application root / public / uploads / directory 
    IF ( $ File ) {
         // a picture before deleting the first Photo 
        // get previous image path 
        $ the dir = root_path.' public / uploads . / ' $ the above mentioned id ;
         // if the picture exists delete 
        IF ( file_exists ( $ dir )) { 
            @ unlink (dir $ ); 
        } 
        // upload a new image 
         $ info = $ the this -> the Upload ( $ File ) ;;
          $ the Result = [
              'code' => 1, 
             'msg' => 'Upload successful', 
             'filename' = > str_replace ( '\\', '/', $ info ) 
         ]; 
         return json_encode ( $ Result ); 
    } the else {
         return  to false ; 
    } 

}

Method where id is the point if you upload a second sheet, it will upload the first picture deletion process, reduce server space.

I hope here article useful to you