jQuery-File-Upload 使用备忘

引入：

< script src=" ~/ lib/ jQuery-File-Upload/ jquery.ui.widget.js"></ script>

< script src=" ~/ lib/ jQuery-File-Upload/ jquery.iframe-transport.js"></ script>

< script src=" ~/ lib/ jQuery-File-Upload/ jquery.fileupload.js"></ script>

< script src=" ~/ lib/ jQuery-File-Upload/ jquery.fileupload-process.js"></ script>

< script src=" ~/ lib/ jQuery-File-Upload/ jquery.fileupload-validate.js"></ script>

html：

< form asp-action=" UpVideo" enctype=" multipart/form-data">

    < div class=" col-lg-6">

        新的图片

        < input id =" fileuploadImg " type =" file " name =" files " data-url =" UpLoadImg " style =" margin-top : 20px ;”>

        <!— 进度条 —>

        < div id=" progress" class=" progress" style=" margin-top: 20px;">

            < div class=" progress-bar progress-bar-success"></ div>

        </ div>

    </ div>

</ form >

js：

$( '#fileuploadImg'). fileupload({

            dataType: 'json', //期望从服务器得到json类型的返回数据

            formData: {

                activityId: '@Model.ActivityId',

                videoId: '@Model.VideoId',

                __RequestVerificationToken: $( "input[name = '__RequestVerificationToken']"). val() // 防止 csrf

            },

            autoUpload: true, //是否自动上传

            acceptFileTypes: / ( .| \/ )(jpe ?g |png |bmp |gif ) $ /i, //文件格式限制

            maxNumberOfFiles: 1, //最大上传文件数目

            maxFileSize: 500 * 1024 * 1024,

            //设置进度条

            progressall: function(e, data) {

                console. log( "progressall:", data)

                var progress = parseInt(data. loaded / data. total * 100);

                $( '#progress .progress-bar'). css(

                    'width',

                    progress + '%'

                );

            },     

            processfail: function(e, data) {      

                var currentFile = data.files[data.index];

                if (currentFile. error === "File is too large") {

                    layer. alert( '文件超过500MB限制',

                        {

                            icon: 2,

                            skin: 'layer-ext-moon'

                        })

                } else if (currentFile. error === "File type not allowed") {

                    layer. alert( '文件格式错误',

                        {

                             icon: 2,

                            skin: 'layer-ext-moon'

                        })

                }

            },

            //上传完成之后的操作

            done: function(e, data) {

                if (data. result. result == 0) {

                    layer. msg( '上传成功');

                    $( '#img-show'). attr( 'src',data. result. msg)

                } else {

                    layer. alert( '上传失败',

                        {

                            icon: 2,

                            skin: 'layer-ext-moon'

                        }) 

                }

                console. log( "done:", data)

//               

            },

            // 上传失败

            fail: function(xhr, ajaxOptions, thrownError) {

                console. log( "fail-xhr", xhr)

                console. log( "fail-ajaxOptions", ajaxOptions)

                console. log( "fail-thrownError", thrownError)

                layer. alert( '上传失败',

                    {

                        icon: 2,

                        skin: 'layer-ext-moon'

                    })

            }

        });