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

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

©Copyright 蕃薯耀 2020-01-10

https://www.cnblogs.com/fanshuyao/

一、官网地址：

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

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

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

https://www.cnblogs.com/fanshuyao/

巴特西

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

最新文章

热门文章