Go语言视频零基础入门到精通

admin

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。


自定义的样式：

1. <div class="row fileupload-buttonbar" style="padding-left:15px;">
2. <div class="thumbnail col-sm-6">
3. <img id="weixin_show" style="height:180px;margin-top:10px;margin-bottom:8px;"  src="__PUBLIC__/images/game/game_1.png" data-holder-rendered="true">
4. <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>
5. <div class="caption" align="center">
6. <span id="weixin_upload" class="btn btn-primary fileinput-button">
7. <span>上传</span>
8. <input type="file" id="weixin_image" name="weixin_image" multiple>
9. </span>
10. <a id="weixin_cancle" href="javascript:void(0)" class="btn btn-warning" role="button" onclick="cancleUpload("weixin")" style="display:none">删除</a>
11. </div>
12. </div>
13. </div>

复制代码

需要引入的js、css文件

1.     <link href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet">
2.     <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
3.     <link rel="stylesheet" href="__PUBLIC__/css/jquery.fileupload.css">
4.     <link rel="stylesheet" href="__PUBLIC__/css/jquery.fileupload-ui.css">
5.     <script src="__PUBLIC__/js/jquery.min.js"></script>
6.     <script src="__PUBLIC__/js/vendor/jquery.ui.widget.js"></script>
7.     <script src="__PUBLIC__/js/jquery.fileupload.js"></script>
8.     <script src="__PUBLIC__/js/jquery.iframe-transport.js"></script>

复制代码

调用方式：

1. $(function() {
2.         $("#weixin_image").fileupload({
3.                     url: "__CONTROLLER__/uploadImg",
4.                     sequentialUploads: true
5.             }).bind("fileuploadprogress", function (e, data) {
6.                     var progress = parseInt(data.loaded / data.total * 100, 10);
7.                     $("#weixin_progress").css("width",progress + "%");
8.                     $("#weixin_progress").html(progress + "%");
9.             }).bind("fileuploaddone", function (e, data) {
10.                     $("#weixin_show").attr("src","__PUBLIC__/"+data.result);
11.                     $("#weixin_upload").css({display:"none"});
12.                     $("#weixin_cancle").css({display:""});
13.             });
14.                   
15.         });

复制代码

url：后台提交的地址
fileuploadprogress：主要是进度条的修改

fileuploaddone：上传结束后执行的操作

3. 后台执行的代码
使用的thinkphp代码，上传代码很简单

1. public function uploadImg(){
3.         $upload = new \Think\Upload();// 实例化上传类
4.         $upload->maxSize   =     3145728 ;// 设置附件上传大小
5.         //$upload->exts      =     array("jpg", "gif", "png", "jpeg");// 设置附件上传类型
6.         $upload->rootPath  =      "./Public/Uploads/"; // 设置附件上传根目录
7.         $upload->savePath  =      ""; // 设置附件上传（子）目录
8.         
9.         // 上传文件
10.         $info   =   $upload->uploadOne($_FILES["weixin_image"]);
11.         if(!$info) {// 上传错误提示错误信息
12.             //$this->error($upload->getError());
13.             echo 0;
14.         }else{// 上传成功 获取上传文件信息
15.             //$this->display("templateList");
16.             echo "Uploads/".$info["savepath"].$info["savename"];
17.         }
18.     }

复制代码