知识站

 找回密码
 立即注册
知识站 首页 html 查看内容

jQuery-File-Upload 使用,jQuery-File-Upload上传插件

2020-3-4 08:39| 发布者: admin| 查看: 15| 评论: 0|来自: iteye

摘要: jQuery-File-Upload 使用,jQuery-File-Upload上传插件================================©Copyright蕃薯耀 2018年9月26日http://fanshuyao.iteye.com/一、官网地址:https://github.com/blueimp/jQuery-File-Upload ...

jQuery-File-Upload 使用,jQuery-File-Upload上传插件

 

================================

©Copyright 蕃薯耀 2018年9月26日

http://fanshuyao.iteye.com/

 

一、官网地址:

https://github.com/blueimp/jQuery-File-Upload

 

二、使用文档(参数说明)

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

 

三、浏览器支持(官网说明)

  • Google Chrome
  • Apple Safari 4.0+
  • Mozilla Firefox 3.0+
  • Opera 11.0+
  • Microsoft Internet Explorer 6.0+

 

四、jQuery-File-Upload 入门使用

 

1、最简单的使用方法:

Html代码  收藏代码
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>jQuery File Upload Example</title>  
  6. </head>  
  7. <body>  
  8. <input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>  
  9. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
  10. <script src="js/vendor/jquery.ui.widget.js"></script>  
  11. <script src="js/jquery.iframe-transport.js"></script>  
  12. <script src="js/jquery.fileupload.js"></script>  
  13. <script>  
  14. $(function () {  
  15.     $('#fileupload').fileupload({  
  16.         dataType: 'json',  
  17.         done: function (e, data) {  
  18.             $.each(data.result.files, function (index, file) {  
  19.                 $('<p/>').text(file.name).appendTo(document.body);  
  20.             });  
  21.         }  
  22.     });  
  23. });  
  24. </script>  
  25. </body>   
  26. </html>  

 如果不使用iframe,jquery.iframe-transport.js文件可以不引用。

 

 

 

2、自定义使用

 

不显示文件选择框,只显示上传按钮

Html代码  收藏代码
  1. <a id="btnUploadMdbFile" href="javascript:;" class="plui-linkbutton" >上传mdb文件</a>   
  2.   
  3. <div style="display: none;">        
  4.     <input id="inputUploadMdbFile" type="file" name="mdbFiles" />  
  5. </div>  

 

控件初始化:

Js代码  收藏代码
  1. $(function(){  
  2.       
  3.     $("#btnUploadMdbFile").click(function(){  
  4.         $("#inputUploadMdbFile").click();  
  5.     });  
  6.       
  7.     //multiple 多选  
  8.     //input限制文件上传可以使用(IE9+): accept="application/msaccess" accept="image/*"  
  9.     $("#inputUploadMdbFile").fileupload({  
  10.         url : "${pageContext.request.contextPath}/xxx/fileUploadAction.go?method=fileUpload",  
  11.         dataType: "json",  
  12.         //autoUpload: false,  
  13.         formData: {  
  14.             "dirPath" : "temp_dir/mdb/"  
  15.         },  
  16.         add: function(e, data){  
  17.             //var acceptFileTypes = /^(gif|jpe?g|png)$/i;  
  18.             var acceptFileTypes = /^mdb$/i;  
  19.             var files = data.originalFiles;  
  20.             if(files && files.length > 0){  
  21.                 var isPass = true;  
  22.                 for(var i=0; i<files.length; i++){  
  23.                     var name = files[i]["name"];  
  24.                     var lastIndex = name.lastIndexOf(".");  
  25.                     if(lastIndex < 0){  
  26.                         isPass = false;  
  27.                         break;  
  28.                     }else{  
  29.                         var fileType = name.substring(lastIndex + 1);  
  30.                         if(!acceptFileTypes.test(fileType)){  
  31.                             isPass = false;  
  32.                             break;  
  33.                         }  
  34.                     }  
  35.                 }  
  36.                 if(!isPass){  
  37.                     top.$.messager.alert("系统提示","只能上传*.mdb文件","info");   
  38.                     return;  
  39.                 }  
  40.                 data.submit();  
  41.             }  
  42.         },  
  43.         done: function(e, data){  
  44.             //alert($.toJSON(data.result));  
  45.             if(data.result && data.result.files && data.result.files.length > 0){  
  46.                 var file = data.result.files[0];  
  47.                 if(file.suffix == ".mdb"){  
  48.                     dealMdbFile(file.absolutePath);  
  49.                 }else{  
  50.                     top.$.messager.alert("系统提示","只能上传*.mdb文件","info");   
  51.                 }  
  52.             }  
  53.         }  
  54.     });  
  55.       
  56. });  

 

formData:可以传递自己的参数。

add: function(e, data){}:增加控制文件的类型限制,这个可以省略。

done: function(e, data){}:上传成功后结果返回处理。

 

更多参数设置见:

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

 

 

================================

发表评论

最新评论

Archiver|知识站 ( 鲁ICP备20004068号-1 )

鲁公网安备 37132502371390号

GMT+8, 2020-6-23 22:50 , Processed in 0.018284 second(s), 17 queries .

返回顶部