网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款漂亮的文件拖拽上传jQuery插件,支持单文件和多文件上传,上传前预览文件,AJAX文件上传,上载前验证文件大小和文件类型。
1.首先,在HTML文档中导入jQuery库和aksFileUpload.js上传插件文件。
<link rel="stylesheet" href="aksFileUpload.min.css" />
<script src="jquery.min.js"></script>
<script src="aksFileUpload.min.js"></script>
2. 在页面中添加 <aks-file-upload> 上传组件。
<aks-file-upload></aks-file-upload>
3. 初始化插件。
$(function () {
$("aks-file-upload").aksFileUpload({
// options here
});
});
4. 保存上传的文件的数据格式(JSON或input)。
<p id="uploadfile" type="json"></p>
$("aks-file-upload").aksFileUpload({
fileUpload: "#uploadfile"
});
// or an input filed
$("aks-file-upload").aksFileUpload({
fileUpload: "#uploadInput"
});
5. 自定义插件生成的隐藏文件输入字段ID。
$(function () {
$("aks-file-upload").aksFileUpload({
input: "#aksfileupload"
});
});
6. 设置可接受的上载文件类型。
$("aks-file-upload").aksFileUpload({
fileType: [
"pdf",
"docx",
"rtf",
"jpg",
"jpeg",
"png",
"txt",
"mpa",
"ogg",
"aif",
"cda",
"mid",
"midi",
"mp3",
"wav",
"wma",
"wpl",
"7z",
"arj",
"deb",
"pkg",
"rar",
"rpm",
"tar.gz",
"z",
"zip",
"csv",
"dat",
"db",
"dbf",
"log",
"mdb",
"sav",
"sql",
"tar",
"xml",
"apk",
"exe",
"jar",
"py",
"fnt",
"fon",
"otf",
"ttf",
"ai",
"bmp",
"gif",
"ico",
"jpeg",
"jpg",
"png",
"ps",
"psd",
"svg",
"tif",
"tiff",
"asp",
"aspx",
"css",
"htm",
"html",
"js",
"jsp",
"php",
"rss",
"pps",
"ppt",
"pptx",
"avi",
"flv",
"mov",
"mp4",
"mpg",
"mpeg",
"vob",
"wmv",
"doc",
"rtf",
"eps",
"opus",
"aep",
"fig",
"sketch"
]
});
7. 确定是否允许上传多个文件。默认值:false。
$(function () {
$("aks-file-upload").aksFileUpload({
multiple: true
});
});
8. 设置拖放上传文件。默认值:true。
$(function () {
$("aks-file-upload").aksFileUpload({
dragDrop: true
});
});
9. 设置允许上传最多文件数量。默认值:无限制。
$(function () {
$("aks-file-upload").aksFileUpload({
maxFile: 10
});
});
10.设置上传最大文件大小。默认值:空。
$(function () {
$("aks-file-upload").aksFileUpload({
maxSize: "1 GB"
});
});
11. 启用AJAX上传文件。默认值:false。
$("aks-file-upload").aksFileUpload({
ajaxUpload: false,
ajax: {
directlyLoad: false,
url: "upload.php",
type: "POST",
data: "formData",
contentType: false,
processData: false,
cache: false,
async: true,
enctype: "multipart/form-data"
},
});
12. 自定义上传文件区域的标题。
$(function () {
$("aks-file-upload").aksFileUpload({
label: "拖放文件或浏览"
});
});
13. 自定义反馈消息。
$("aks-file-upload").aksFileUpload({
maxFileError: "文件超出上传限制。-最大限制:",
maxSizeError: "文件超出个数。-最大限制:",
fileTypeError: "不支持的文件格式。",
});
转载请注明来源:漂亮的jQuery可拖动文件上传插件
本文永久链接地址:https://www.moyouyouw.cn/code/904.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
上一篇
下一篇
已有 位小伙伴发表了看法
欢迎 你 发表评论