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、最简单的使用方法: - <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8">
- <title>jQuery File Upload Example</title>
- </head>
- <body>
- <input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
- <script src="js/vendor/jquery.ui.widget.js"></script>
- <script src="js/jquery.iframe-transport.js"></script>
- <script src="js/jquery.fileupload.js"></script>
- <script>
- $(function () {
- $('#fileupload').fileupload({
- dataType: 'json',
- done: function (e, data) {
- $.each(data.result.files, function (index, file) {
- $('<p/>').text(file.name).appendTo(document.body);
- });
- }
- });
- });
- </script>
- </body>
- </html>
如果不使用iframe,jquery.iframe-transport.js文件可以不引用。 2、自定义使用 不显示文件选择框,只显示上传按钮 - <a id="btnUploadMdbFile" href="javascript:;" class="plui-linkbutton" >上传mdb文件</a>
-
- <div style="display: none;">
- <input id="inputUploadMdbFile" type="file" name="mdbFiles" />
- </div>
控件初始化: - $(function(){
-
- $("#btnUploadMdbFile").click(function(){
- $("#inputUploadMdbFile").click();
- });
-
-
-
- $("#inputUploadMdbFile").fileupload({
- url : "${pageContext.request.contextPath}/xxx/fileUploadAction.go?method=fileUpload",
- dataType: "json",
-
- formData: {
- "dirPath" : "temp_dir/mdb/"
- },
- add: function(e, data){
-
- var acceptFileTypes = /^mdb$/i;
- var files = data.originalFiles;
- if(files && files.length > 0){
- var isPass = true;
- for(var i=0; i<files.length; i++){
- var name = files[i]["name"];
- var lastIndex = name.lastIndexOf(".");
- if(lastIndex < 0){
- isPass = false;
- break;
- }else{
- var fileType = name.substring(lastIndex + 1);
- if(!acceptFileTypes.test(fileType)){
- isPass = false;
- break;
- }
- }
- }
- if(!isPass){
- top.$.messager.alert("系统提示","只能上传*.mdb文件","info");
- return;
- }
- data.submit();
- }
- },
- done: function(e, data){
-
- if(data.result && data.result.files && data.result.files.length > 0){
- var file = data.result.files[0];
- if(file.suffix == ".mdb"){
- dealMdbFile(file.absolutePath);
- }else{
- top.$.messager.alert("系统提示","只能上传*.mdb文件","info");
- }
- }
- }
- });
-
- });
formData:可以传递自己的参数。 add: function(e, data){}:增加控制文件的类型限制,这个可以省略。 done: function(e, data){}:上传成功后结果返回处理。 更多参数设置见: https://github.com/blueimp/jQuery-File-Upload/wiki/Options ================================ |