jquery File upload 的一个例子

叁歲伎倆 2022-06-17 12:52 164阅读 0赞

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

![Center][]

自定义的样式：

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****link** href="\_\_PUBLIC\_\_/css/bootstrap.min.css" rel="stylesheet"**>**  
2.    
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][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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.     \}  
19.

[jQuery]: http://lib.csdn.net/base/jquery
[Center]: /images/20220617/b0c39c65d0754fa0b245c25395c14fb8.png
[view plain]: http://blog.csdn.net/lengxue789/article/details/43169965#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/589925
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/589925/fork