用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 用于处理文件上传的服务端组件 ...
随机推荐
- Voyager下的Dashboard Widgets
widgets设置,voyager.php下找到'widgets': 'widgets' => [ 'TCG\\Voyager\\Widgets\\UserDimmer', 'TCG\\Voya ...
- Java使用Apache的HttpClient组件发送https请求
如果我们直接通过普通的方式对https的链接发送请求,会报一个如下的错误: javax.net.ssl.SSLHandshakeException: sun.security.validator.Va ...
- Linux 常用命令(三)
一.less --分页查看文件:方面查阅(编辑)大文件 说明:支持方向键盘和鼠标向上向下浏览 -N 显示行号 二.head --output the first part of files 默认显示 ...
- Python爬取全站妹子图片,差点硬盘走火了!
在这严寒的冬日,为了点燃我们的热情,今天小编可是给大家带来了偷偷收藏了很久的好东西.大家要注意点哈,我第一次使用的时候,大意导致差点坏了大事哈! 1.所需库安装 2.网站分析 首先打开妹子图的官网(m ...
- centos7 bond 和 网桥配置
rhel7系统bond配置(更新版本):https://www.cnblogs.com/zhangjianghua/p/9119808.html Bonding的模式一共有7种: 1.mode=0(b ...
- LAMP动态网站安装脚本
#!/bin/bash #auto make install LAMP #by authors zhangjianghua #httpd define path variable H_FILES=ht ...
- SPOJ 375 树链剖分 QTREE - Query on a tree
人生第一道树链剖分的题目,其实树链剖分并不是特别难. 思想就是把树剖成一些轻链和重链,轻链比较少可以直接修改,重链比较长,用线段树去维护. 貌似大家都是从这篇博客上学的. #include <c ...
- 关于freetype在安装中的遇到的问题
本人电脑配置的是Anconda环境+pycharm2017.2.2 comuniity,每次安装什么包就是直接pip install 的,但是这次在安装freetype的安装中却遇到了麻烦. 具体是在 ...
- perl第三章 列表和数组
访问数组中的元素 $fred[0] $fred[1] $number=2.75; print $fred[$number-1] 结果就是print $fred[1] 特殊的数组索引1.对索 ...
- 爬虫Scrapy框架-2爬取网站视频详情
爬取视频详情:http://www.id97.com/ 创建环境: movie.py 爬虫文件的设置: # -*- coding: utf-8 -*- import scrapy from movi ...