JQuery file upload use, jQuery file upload plug-in

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

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

1, Official website address:

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

2, Use document (parameter description)

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

3, Browser support (official website description)

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

4, Getting started with jQuery file upload

1. The easiest way to use it:

<!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>

If you do not use iframe, the jquery.iframe-transport.js file can be unreferenced.

2. Custom use

Do not display the file selection box, only the upload button

<a id="btnUploadMdbFile" href="javascript:;" class="plui-linkbutton" >upload mdb file</a> 

<div style="display: none;">        
    <input id="inputUploadMdbFile" type="file" name="mdbFiles" />
</div>

Control initialization:

$(function(){
    
    $("#btnUploadMdbFile").click(function(){
        $("#inputUploadMdbFile").click();
    });
    
    //multiple Multiple selection
    //input Restrict file upload to use( 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("System hint","Upload only*.mdb file","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("System hint","Upload only*.mdb file","info"); 
                }
            }
        }
    });
    
});

formData: you can pass your own parameters.

add: function(e, data) {}: increase the type limit of control file, which can be omitted.

done: function(e, data) {}: the result is returned for processing after the upload is successful.

For more parameter settings, see:

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

If you think the article is helpful to you, welcome to donate

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

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

Keywords: Javascript JQuery github JSON Google

Added by eatadi on Fri, 10 Jan 2020 16:40:20 +0200

Programming VIP

JQuery file upload use, jQuery file upload plug-in

Popular Keywords