Jquery File upload usage summary, jqueryupload

Jquery File upload usage summary, jqueryupload
1. jquery file upload download

Jquery file upload Demo: 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

The bootstrap framework is used. For details about the style, refer to the Demo.

Custom style:

<Div class = "row fileupload-buttonbar" style = "padding-left: 15px; "> <div class =" thumbnail col-sm-6 ">  <div class =" progress-striped active "role =" progressbar "aria-valuemin =" 10 "aria-valuemax =" 100 "aria-valuenow =" 0 "> <div id =" weixin_progress "class =" progress-bar -success "style =" width: 0%; "> </div> <div class =" caption "align =" center "> <span id =" weixin_upload "class =" 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-warning "role =" button "onclick =" cancleUpload ('weixin') "style =" display: none "> Delete </a> </div>

Js and css files to be introduced

    <link href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet">    <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->    <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 method:

$(function() {$("#weixin_image").fileupload({    url: '__CONTROLLER__/uploadImg',    sequentialUploads: true    }).bind('fileuploadprogress', function (e, data) {    var progress = parseInt(data.loaded / data.total * 100, 10);    $("#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 in the background

Fileuploadprogress: Mainly changes the progress bar

Fileuploaddone: The operation performed after the upload is complete.

3. Code executed in the background

The thinkphp code used, the upload code is very simple

Public function uploadImg () {$ upload = new \ Think \ Upload (); // instantiate the upload class $ upload-> maxSize = 3145728; // set the attachment upload size // $ upload-> exts = array ('jpg ', 'gif', 'png', 'jpeg '); // set the attachment upload type $ upload-> rootPath = '. /Public/Uploads/'; // sets the root directory for uploading attachments $ upload-> savePath = ''; // sets the attachment upload (child) directory // upload File $ info = $ upload-> uploadOne ($ _ FILES ['weixin _ image']); if (! $ Info) {// upload error message/$ this-> error ($ upload-> getError (); echo 0 ;} else {// obtain the information of the uploaded file after the upload succeeds. // $ this-> display ('templatelist'); echo "Uploads /". $ info ['savepath']. $ info ['savename'];}