欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2024-01-28 15:48:46
©Copyright 蕃薯耀 2020-01-10 https://www.cnblogs.com/fanshuyao/ 一、官网地址： https://github.com/blueimp/jQuery-File-Upload 二、使用文档（参数说明） https://github.com/blu ......

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

©copyright 蕃薯耀 2020-01-10

 

一、官网地址：

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();
    });
    
    //multiple 多选
    //input限制文件上传可以使用（ie9+）： accept="application/msaccess" accept="image/*"
    $("#inputuploadmdbfile").fileupload({
        url : "${pagecontext.request.contextpath}/xxx/fileuploadaction.go?method=fileupload",
        datatype: "json",
        //autoupload: false,
        formdata: {
            "dirpath" : "temp_dir/mdb/"
        },
        add: function(e, data){
            //var acceptfiletypes = /^(gif|jpe?g|png)$/i;
            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){
            //alert($.tojson(data.result));
            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

 

（如果你觉得文章对你有帮助，欢迎捐赠，^_^，谢谢！） 

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

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

©copyright 蕃薯耀 2020-01-10

 

上一篇： Linux 防SSH暴力攻击

下一篇： 官宣！小米9 Pro不做5G“半斤机”：兼顾大电池与轻薄手感

推荐阅读