帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

漂亮的jQuery可拖动文件上传插件

帝国模板之家 2020-12-09 网页特效 评论

插件介绍

这是一款漂亮的文件拖拽上传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: "不支持的文件格式。",
});
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言