jquery File Upload Usage Summary

1. jquery File upload Download

jquery File Upload Demo address: https://blueimp.github.io/jQuery-File-Upload/

jquery File upload download address: https://github.com/blueimp/jQuery-File-Upload/tags

jquery File Upload API address: Https://github.com/blueimp/jQuery-File-Upload/wiki/API

2. jquery File Upload Style

Using the bootstrap frame, the style can refer to the demo.

Custom styles:

<div class= "Row Fileupload-buttonbar" style= "padding-left:15px;" ><div class= "thumbnail col-sm-6" ><div class= "Progress progress-striped Active "role=" ProgressBar "aria-valuemin=" "aria-valuemax=" "aria-valuenow=" 0 "><div id=" weixin_progress " class= "Progress-bar progress-bar-success" style= "width:0%;" ></div></div><div class= "caption" align= "center" ><span id= "Weixin_upload" class= "btn Btn-primary Fileinput-button "><span> upload </span><input type=" file "id=" Weixin_image "Name=" Weixin_ Image "Multiple></span><a id=" weixin_cancle "href=" javascript:void (0) "class=" btn btn-warning "role=" Button "onclick=" Cancleupload (' Weixin ') "style=" Display:none "> Delete </a></div></div></div >

JS, CSS files that need to be introduced

    <link href= "__public__/css/bootstrap.min.css" rel= "stylesheet" >    <!--CSS to style the file input field as BU Tton and adjust the Bootstrap progress bars-to    <link rel= "stylesheet" href= "__public__/css/ Jquery.fileupload.css ">    <link rel=" stylesheet "href=" __public__/css/jquery.fileupload-ui.css ">    <script src= "__public__/js/jquery.min.js" ></script>    <script src= "__public__/js/vendor/ Jquery.ui.widget.js "></script>    <script src=" __public__/js/jquery.fileupload.js "></script >    <script src= "__public__/js/jquery.iframe-transport.js" ></script>

Call Mode:

$ (function () {$ ("#weixin_image"). FileUpload ({    URL: ' __controller__/uploadimg ',    sequentialuploads:true    }). Bind (' fileuploadprogress ', function (e, data) {    var progress = parseint (Data.loaded/data.total *);    $ ("#weixin_progress"). CSS (' width ', progress + '% ');    $ ("#weixin_progress"). HTML (progress + '% ');    }). Bind (' Fileuploaddone ', function (e, data) {    $ ("#weixin_show"). attr ("src", "__public__/" +data.result);    $ ("#weixin_upload"). CSS ({display: "none"});    $ ("#weixin_cancle"). CSS ({display: "});});   

URL: The address submitted by the background

Fileuploadprogress: Mainly the modification of the progress bar

Fileuploaddone: Actions to be performed after uploading

3. Code executed in the background

Using the thinkphp code, uploading the code is simple

Public Function uploadimg () {        $upload = new \think\upload ();//instantiation of the upload class        $upload->maxsize   =     3145728; /Set attachment upload size        //$upload->exts      =     Array (' jpg ', ' gif ', ' PNG ', ' jpeg ');//Set attachment upload type        $upload->rootpath  =      './public/uploads/';//Set attachment upload root        $upload->savepath  =      ';//Set Attachments upload (sub) directory                //upload file         $info   =   $upload->uploadone ($_files[' weixin_image ');        if (! $info) {//Upload error message error messages            //$this->error ($upload->geterror ());            echo 0;        } else{//Upload successfully uploaded file information            //$this->display (' templatelist ');            echo "uploads/". $info [' Savepath ']. $info [' Savename ';        }    }

jquery File Upload Usage Summary