一个基于jQuery file Upload插件的花哨的文件上传器插件，它将正常的文件输入转换为响应灵敏、移动友好的上传器界面，支持拖放、键盘交互、文件预览、分块文件上传等。麻省理工学院或LGPL双重许可。

如何使用它:

1.在网页的头部加载主CSS文件“fancy_fil上传.CSS”。

<link rel="stylesheet" href="fancy_fileupload.css">

2.在文档末尾加载文件上传插件的脚本和其他所需的JavaScript文件。

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.fileupload.js"></script>
<script src="jquery.iframe-transport.js"></script>
<script src="jquery.fancy-fileupload.js"></script>

3.在文件输入字段上调用插件并完成。您可以指定服务器接受的文件类型：

<input id="demo" type="file" name="files" accept=".jpg, .png, image/jpeg, image/png" multiple>

$('#demo').FancyFileUpload({
  params : {
    action : 'fileuploader'
  },
  maxfilesize : 1000000
});

4.所有可能的插件选项，以自定义文件上传器。

$('#demo').FancyFileUpload({
 
  // send data to this url
  'url' : '',
 
  // key-value pairs to send to the server
  'params' : {},
 
  // editable file name?
  'edit' : true,
 
  // max file size
  'maxfilesize' : -1,
 
  // a list of allowed file extensions
  'accept' : null,
 
  // 'iec_windows', 'iec_formal', or 'si' to specify what units to use when displaying file sizes
  'displayunits' : 'iec_windows',
 
  // adjust the final precision when displaying file sizes
  'adjustprecision' : true,
 
  // the number of retries to perform before giving up
  'retries' : 5,
 
  // the base delay, in milliseconds, to apply between retries
  'retrydelay' : 500,
 
  // an object containing valid MediaRecorder options
  // https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
  'audiosettings' : {},
 
  // whether or not to display a toolbar button with a webcam icon for recording video directly via the web browser 
  'recordvideo' : false,
 
  // an object containing valid MediaRecorder options
  // https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
  'videosettings' : {},
 
  // A valid callback function that is called after the preview dialog appears. Useful for temporarily preventing unwanted UI interactions elsewhere.
  'showpreview' : function(e, data, preview, previewclone) {
    // do something
  },
 
  // A valid callback function that is called after the preview dialog disappears. 
  'hidepreview' : function(e, data, preview, previewclone) {
    // do something
  },
 
  // A valid callback function that is called during initialization to allow for last second changes to the settings. 
  // Useful for altering fileupload options on the fly. 
  'preinit' : null,
 
  // A valid callback function that is called at the end of initialization of each instance. 
  'postinit' : null,
 
  // called for each item after it has been added to the DOM
  'added' : function(e, data) {
    // do something
  },
 
  // called whenever starting the upload
  'startupload' : function(SubmitUpload, e, data){
    // do something
  }
 
  // called whenever progress is updated
  'continueupload' : function(e, data) {
    // do something
  },
 
  // called whenever an upload has been cancelled
  'uploadcancelled' : function(e, data) {
    // do something
  },
 
  // called whenever an upload has successfully completed
  'uploadcompleted' : function(e, data) {
    // do something
  },
 
  // jQuery File Upload options
  'fileupload' : {},
 
  // translation strings here
  'langmap' : {}
 
});

更新日志：

2022-03-24

• 固定间距问题。

2022-02-27

• 更新的文件上传器帮助程序

2021-05-18

• 增加了德语翻译语言包。

2020-11-29

• 已更新

2020-04-19

• 修复了相同元素问题上的销毁/重新创建循环。

2020-04-13

• 停止流跟踪以释放摄像头/麦克风访问权限。

2020-04-12

• 更新的jQuery文件上传

2020-03-04

• 添加了postinit选项。

2019-10-03

• 已更新服务器端帮助程序。

2019-03-30

• 修复了Edge中的语法错误问题。
• 修复了FlexForms依赖关系问题。FlexForms模块中的Backported GetFileStartPosition（）更改。

2019-02-01

• 增加了对直接从麦克风和网络摄像头/摄像机录制的支持。

2018-03-03

• 修复了DOM元素创建问题。

2018-02-18

• 修复了缺少URL引用的问题。
• 添加了服务器端帮助PHP类。

2018-01-20

• 添加了预览对话框显示/隐藏回调。

2017-10-10

• 添加了服务器端帮助PHP类。

2017-08-07

• 改进了对分块上传的支持，并修复了各种错误。添加了预安装选项。

2017-08-04

• 修复了上传前取消的问题。

预览截图

jQuery Fancy响应文件上传器 FancyFileUpload