jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度条显示。标准HTML form文件上传,也就是说,只要服务端支持接收multipart/form-data格式数据就能使用此上传插件。
本站web端文件文件提交即使用此插件,效果如下:
浏览器支持
浏览器支持:IE 8.0,IE 9.0,IE 10.0,Firefox,Safari,Opera,Chrome
支持文件拖拽上传的浏览器:IE10+,Firefox,Safari,Opera,Chrome
使用方法
1.在页面head节点添加css和js文件引用
<link href="/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">
<script src="/jquery/1.9.1/jquery.min.js"></script>
<script src="/jQuery-Upload-File/jquery.uploadfile.min.js"></script>
由于此插件依赖jQuery插件,因此以上示例也添加了就jQuery库的引用。别外在jQuery Upload File的源码中引用在jQuery Form插件,在使用时应做相应检查,确保jQuery Form插件的可访问性。
2.在页面的body节点中添加一个div处理上传文件
<div id="fileuploader">Upload</div>
3.添加js启动脚本
$(document).ready(function()
{
$("#fileuploader").uploadFile({
url:"文件上传url",
fileName:"myfile"
});
});
本站的初始化示例
本站上传文章封面图时使用了jQuery Upload File插件,用于前端数据提交。
$("#fileuploader").uploadFile({
url:"/file/upload", //文件上传url
fileName:"image", //提交到服务器的文件名
maxFileCount: , //上传文件个数(多个时修改此处
returnType: 'json', //服务返回数据
allowedTypes: 'jpg,jpeg,png,gif', //允许上传的文件式
showDone: false, //是否显示"Done"(完成)按钮
showDelete: true, //是否显示"Delete"(删除)按钮
onLoad: function(obj)
{
//页面加载时,onLoad回调。如果有需要在页面初始化时显示(比如:文件修改时)的文件需要在此方法中处理
obj.createProgress('/tmpImage.jpg'); //createProgress方法可以创建一个已上传的文件
},
deleteCallback: function(data,pd)
{
//文件删除时的回调方法。
//如:以下ajax方法为调用服务器端删除方法删除服务器端的文件
$.ajax({
cache: false,
url: "file/upload",
type: "DELETE",
dataType: "json",
data: {file:data.url},
success: function(data)
{
if(data.code===){
pd.statusbar.hide(); //删除成功后隐藏进度条等
$('#image').val('');
}else{
console.log(data.message); //打印服务器返回的错误信息
}
}
});
},
onSuccess: function(files,data,xhr,pd)
{
//上传成功后的回调方法。本例中是将返回的文件名保到一个hidden类开的input中,以便后期数据处理
if(data&&data.code===){
$('#image').val(data.url);
}
}
});
根据以上介绍,及本站的使用示例,已经可以这个高大上的、有进度的文件上传插件了。更多设置及使用方法请自行参考其github源代码:jQuery Upload File
jQuery文件上传插件jQuery Upload File 有上传进度条的更多相关文章
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
- jQuery懒加载插件jquery.lazyload.js使用说明实例
jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...
- jQuery响应式幻灯片插件jquery.glide.js(支持触摸&轻量级)
找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...
- JQuery文件上传插件JQuery.upload.js的用法简介
JQuery文件上传插件,这个插件很小,用法很简单,效果却很棒.注意:JQuery版本要求1.8及以上,大家执行如果没效果,则检查JQuery版本,如果是1.8及以上,则该插件源码中的.size()需 ...
- 关于Plupload结合上传插件jquery.plupload.queue的使用
之前使用过很多的上传组件,但对各种浏览器的兼容性太差,不得不放弃!! plupload 是款很强大的上传组件,不得不推荐.plupload 前端根据浏览器不同选择使用Html5. Gears, Sil ...
- jquery上传插件Jquery.uploadify.js-转
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示 ...
- 支持多文件上传,预览,拖拽,基于bootstra的上传插件fileinput 的ajax异步上传
首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...
- 支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput 的ajax异步上传(转载)
首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...
随机推荐
- Spark java.lang.outofmemoryerror gc overhead limit exceeded 与 spark OOM:java heap space 解决方法
引用自:http://cache.baiducontent.com/c?m=9f65cb4a8c8507ed4fece7631046893b4c4380146d96864968d4e414c42246 ...
- 视图UIView的大小和位置属性详解
UIView类中定义了三个属性,分别是frame.bounds与center属性: IKit中的坐标系X轴正方向为水平向右,Y轴正方向为竖直向下. frame属性指的是视图在其父视图坐标系中的位置与尺 ...
- ios程序发布测试打包
1. 获取测试机UDID 手机连接电脑,打开iTunes-摘要-点击序列号,设备概要界面显示设备udid-反键-拷贝 2. 添加设备 取得UDID后,进入开发者中心-iOS PRovisioning ...
- zookeeper+jstorm的集群搭建
zookeeper的配置: zookeeper有三种配置方式:单机式/伪分布式/集群式 其中伪分布式是在一台电脑上通过不同的端口来模拟分布式情形,需要N份配置文件和启动程序,而集群式是多个zookee ...
- Java 泛型约束
类型约束: import java.util.List; import java.util.ArrayList; import java.util.LinkedList; /** * Created ...
- Error : An error occurred while creating the WebJob schedule: Response status code does not indicate success: 409 (Conflict).
How to fix the error? the answer is simple switch from Free to Standard...
- input固定在底部
// input固定在底部//isFocusing获取焦点:true 失去焦点:false _onTouchInput(isFocusing){ this.phone_width = screen.w ...
- 【进展】LL谱面存储方式的改善
今天得某位高人相助,获得了一堆LL里面的标准谱面文件,是json格式的.于是折腾了一下午加一晚上,总算让SLP正确解析了json格式的谱面.
- 关于nodejs能同时接受多少个请求的问题?////zzz
关于nodejs能同时接受多少个请求的问题? 最近学习node,看了很多教程,都在赞扬nodejs的异步I/O,异步I/O的特点就是,每接收一个请求,使用异步调用处理请求,不用等待结果,可以继续运行其 ...
- jffs2和yaffs2文件系统制作工具的编译与使用
一 . 先准备文件 mtd-utils-1.4.5.tar.bz2 ftp://ftp.infradead.org/pub/mtd-utils/ zlib-1.2.5.tar.bz2 http://z ...