jQuery文件上传插件jQuery Upload File 有上传进度条

jQuery文件上传插件jQuery Upload File 有上传进度条

jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度条显示。标准HTML form文件上传,也就是说,只要服务端支持接收multipart/form-data格式数据就能使用此上传插件。

本站web端文件文件提交即使用此插件,效果如下:

jQuery文件上传插件jQuery Upload File 有上传进度条

浏览器支持

浏览器支持: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

上一篇:Layui多文件上传进度条


下一篇:【BZOJ 2154】Crash的数字表格