jQuery-File-Upload 使用备忘

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/afr3828/article/details/80322151
引入:
<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'
                    })
            }
        });
阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页