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

演示  website 下载

插件介绍

这是一款漂亮的文件拖拽上传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: "不支持的文件格式。",
});