用jQuery File Upload实现简单的文件上传

简介: FORM中的代码: {# file_path #} {{ form.

FORM中的代码:

{# file_path #}
                        <div class="form-group">
                            <label class="control-label col-md-3">
                                {{ form.file_path.label_tag }}
                                {% for error in form.file_path.errors %}
                                    <span class="label label-danger">{{ error }}</span>
                                {% endfor %}
                            </label>
                            <div id="upload-drop " class="col-md-6">

                                <span class="btn btn-success fileinput-button">

                                <i class="glyphicon glyphicon-plus"></i>

                                <span>选择上传文件</span>
                                    <input id="fileupload"  name="files[]" type="file" multiple="multiple" data-url="/version/file_upload/">
                                </span>
                                <input type="text" class="form-control" id="file_path" name="file_path"  value="" hidden readonly/>
                                <div class="progress progress-striped active">
                                    <div class="bar progress-bar-success" role="progressbar" style="width: 0%;">0%</div>
                                </div>
                            </div>
                        </div>

  js实现:

$(document).ready(function(){

            $('#fileupload').fileupload({
                dataType: 'json',
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('.progress .bar').css(
                        'width',
                        progress + '%'
                    );
                    $('.progress .bar').text(progress + '%');
                },

                done: function(e, data) {
                    uploadfilename = data.files[0].name
                    console.log(uploadfilename)
                    $('.progress .bar').text("上传完成");
                    $("#file_path").attr("value", uploadfilename);
                    $("#file_path").attr("hidden", false);
                }
            });


})

  uqjs效果:

目录
相关文章
|
2月前
|
开发框架 JSON JavaScript
ASP.NET Core3.1实战教程---基于Jquery单文件上传
ASP.NET Core3.1实战教程---基于Jquery单文件上传
51 0
|
JavaScript 前端开发 CDN
HTML + jQuery 实现轮播图
HTML + jQuery 实现轮播图
266 0
HTML + jQuery 实现轮播图
|
JavaScript
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
526 0
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
|
前端开发 JavaScript
【jquery ajax】实现文件上传提交
【jquery ajax】实现文件上传提交
247 0
【jquery ajax】实现文件上传提交
|
JavaScript
利用jquery的attr方法一行代码实现的简单的图片切换效果
利用jquery的attr方法一行代码实现的简单的图片切换效果
143 0
利用jquery的attr方法一行代码实现的简单的图片切换效果
|
JavaScript
jquery实现单击div切换背景,再次单击回到原来样式
jquery实现单击div切换背景,再次单击回到原来样式
174 0
jquery实现单击div切换背景,再次单击回到原来样式
|
JavaScript
jQuery实现判断li的个数从而实现其他功能
jQuery实现判断li的个数从而实现其他功能
90 0
jQuery实现判断li的个数从而实现其他功能
|
JavaScript 搜索推荐 API
JQuery+ajax实现类似百度搜索自动匹配功能
JQuery+ajax实现类似百度搜索自动匹配功能
329 0
JQuery+ajax实现类似百度搜索自动匹配功能
|
缓存 JavaScript 前端开发
JavaScript、jQuery实现“社区便利店收银系统”
随着个性化服务发展,学校、街边、社区等都流行将水果等商品洗净、切好,并装盒,按份出售。现开发一个“社区便利店收银系统”,店中每天提供固定种类的水果,装盒后,标记每一份价格,按份进行销售。在系统中,打开收银网页(casher.html),点击“+”添加销售水果,点击“结账”进行购买水果结算,点击“完成交易”进行下一个新用户购买。
438 0
JavaScript、jQuery实现“社区便利店收银系统”
|
JavaScript 前端开发
jQuery实现表格行的删除和增加
使用jQuery实现对表格元素行的删除和增加效果
254 0
jQuery实现表格行的删除和增加