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