jquery File upload使用總結，jqueryupload

jquery File upload使用總結，jqueryupload
1. jquery file upload 下載

jquery file upload Demo 地址：https://blueimp.github.io/jQuery-File-Upload/

jquery file upload 下載   地址：https://github.com/blueimp/jQuery-File-Upload/tags

jquery file upload API    地址：https://github.com/blueimp/jQuery-File-Upload/wiki/API

2. jquery file upload 樣式

使用了bootstrap架構，樣式可以參考Demo。

自訂的樣式：

<div class="row fileupload-buttonbar" style="padding-left:15px;"><div class="thumbnail col-sm-6"><img id="weixin_show" style="height:180px;margin-top:10px;margin-bottom:8px;"  src="__PUBLIC__/images/game/game_1.png" data-holder-rendered="true"><div class="progress progress-striped active" role="progressbar" aria-valuemin="10" aria-valuemax="100" 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>上傳</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">刪除</a></div></div></div>

需要引入的js、css檔案

    <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>

調用方式：

$(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：後台提交的地址

fileuploadprogress：主要是進度條的修改

fileuploaddone：上傳結束後執行的操作

3. 後台執行的代碼

使用的thinkphp代碼，上傳代碼很簡單

public function uploadImg(){        $upload = new \Think\Upload();// 執行個體化上傳類        $upload->maxSize   =     3145728 ;// 設定附件上傳大小        //$upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 設定附件上傳類型        $upload->rootPath  =      './Public/Uploads/'; // 設定附件上傳根目錄        $upload->savePath  =      ''; // 設定附件上傳（子）目錄                // 上傳檔案         $info   =   $upload->uploadOne($_FILES['weixin_image']);        if(!$info) {// 上傳錯誤提示錯誤資訊            //$this->error($upload->getError());            echo 0;        }else{// 上傳成功 擷取上傳檔案資訊            //$this->display('templateList');            echo "Uploads/".$info['savepath'].$info['savename'];        }    }