用jQuery File Upload实现简单的文件上传
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效果:
用jQuery File Upload实现简单的文件上传的更多相关文章
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
服务器文档下载zip格式 刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...
- javascript插件uploadify简单实现文件上传
最近在学习mvc,需要用到文件上传的功能,找了很多的jquery插件,最后决定使用uploadify这个插件,参照了各位大神的博客,终于勉勉强强会用了.在此,做一下笔记,方便以后忘了查看. 首先在官网 ...
- jsp+servlet+jquery 用jquery uploadify最新版本实现多文件上传
//这是script代码 <link rel="stylesheet" type="text/css" href="uploadify/uplo ...
- 使用jsp/servlet简单实现文件上传与下载
使用JSP/Servlet简单实现文件上传与下载 通过学习黑马jsp教学视频,我学会了使用jsp与servlet简单地实现web的文件的上传与下载,首先感谢黑马.好了,下面来简单了解如何通过使用 ...
- Django 实现简单的文件上传
今天分享一下Django实现的简单的文件上传的小例子. 步骤 创建Django项目,创建Django应用 设计模型 处理urls.py 以及views.py 设计模板,设计表单 运行项目,查看数据库 ...
- DVWA靶机--简单的文件上传漏洞
简单的文件上传漏洞(靶机安全级别:low) 事先准备好一句话木马,密码为pass 上传一句话木马,显示上传路径(一般网站是不会显示路径的,这里靶机为了方便你测试漏洞,直接显示出了路径: ../../h ...
- Java实现一个简单的文件上传案例
Java实现一个简单的文件上传案例 实现流程: 1.客户端从硬盘读取文件数据到程序中 2.客户端输出流,写出文件到服务端 3.服务端输出流,读取文件数据到服务端中 4.输出流,写出文件数据到服务器硬盘 ...
- struts2中简单的文件上传
2016-08-31 一. 文件上传 利用commons-fileupload-1.2.1.jar实现简单的上传文件,首先在页面上填写表单,记得加上enctype="multip ...
- MVC文件上传-使用jQuery.FileUpload和Backload组件实现文件上传
本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: 处理文件上传的服务端组件Backload 用于处理文件上传的服务端组件 ...
随机推荐
- sphinx 快速使用
建立配置文件 例可以参照之前的模板新建一个配置文件 sphinx/etc目录 #MySQL数据源配置,详情请查看:http://www.coreseek.cn/products-install/mys ...
- React和Vue组件间数据传递demo
一.React (一)父组件向子组件传数据 简单的向下传递参数 /* Parent */ class App extends Component { render() { return ( <d ...
- paper:synthesizable finit state machine design techniques using the new systemverilog 3.0 enhancements之fsm summary
主要是1.不要用1段式写FSM 2.不要用状态编码写one-hot FSM ,要用索引编码写one-hot FSM.
- Linux学习-Boot Loader: Grub2
boot loader 的两个 stage 在 BIOS 读完信息后,接下来就是会到第一个开机装置 的 MBR 去读取 boot loader 了.这个 boot loader 可以具有选单功能.直接 ...
- bash循环for/while/until
shell流程控制之一:for循环 for VAR in LIST; do STATEMENT1 ... done 例: ...
- luogu3383 【模板】线性筛素数
如果prime[i]是k的因子,那么[k * (在prime[i]以后的质数)]等于[prime[i]*(k/prime[i])*(这个质数)],一定被筛过了,所以这里可以break. #includ ...
- Flask_Blueprint(蓝图)
在Flask中,我们需要一个可以模块化的方法. Flask自身给我们提供的就是Blueprint方法. 通过Blueprint,可以让我们实现模块化组织程序结构. 官方文档解释: 代码结构: 核心代码 ...
- datatable 修改点击列头进行排序顺序
一般点击排序时,是先升序后降序 可以通过如下代码修改排序规则 jQuery(function ($) { $(".datatable").dataTable({ "pag ...
- Python socket粘包问题(最终解决办法)
套接字: 就是将传输层以下的协议封装成子接口 对于应用程序来说只需调用套接字的接口,写出的程序自然是遵循tcp或udp协议的 实现第一个功能个:实现:通过客户端向服务端发送命令,调取windows下面 ...
- [python 测试框架学习篇] 分享 uiautomator测试框架
uiautomator测试框架 :https://testerhome.com/topics/4194