jquery File upload插件使用

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。


自定义的样式:

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  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文件

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  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>  

调用方式:

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  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代码,上传代码很简单

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. public function uploadImg(){  
  2.   
  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.     }  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值