页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

简单的浏览器多文件上传插件Simple Ajax Uploader

表单 文件上传 HTML我帮您 1年前  次浏览
一个跨浏览器的JavaScript的Ajax多文件上传插件。支持拖放,CORS,和多文件上传进度条。支持跨浏览器 IE7+, Firefox, Chrome, Safari, Opera。
简单的浏览器多文件上传插件Simple Ajax Uploader
特征

跨浏览器 IE7+, Firefox, Chrome, Safari, Opera
支持多个并发的文件上传(即使不是html5浏览器)
内置CORS支持
拖放文件上传
支持自定义CSS样式
浏览器进度条。
使用任何HTML元素作为上传按钮
不依赖或不使用jQuery
提供单独的回调函数的XHR支持的浏览器和浏览器不支持XHR上传

在请求中传递自定义头文件的能力,如授权头

var sizeBox = document.getElementById('sizeBox'), // container for file size info
    progress = document.getElementById('progress'); // the element we're using for a progress bar

var uploader = new ss.SimpleUpload({
      button: 'uploadButton', // file upload button
      url: 'uploadHandler.php', // server side handler
      name: 'uploadfile', // upload parameter name        
      progressUrl: 'uploadProgress.php', // enables cross-browser progress support (more info below)
      responseType: 'json',
      allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
      maxSize: 1024, // kilobytes
      hoverClass: 'ui-state-hover',
      focusClass: 'ui-state-focus',
      disabledClass: 'ui-state-disabled',
      onSubmit: function(filename, extension) {
          this.setFileSizeBox(sizeBox); // designate this element as file size container
          this.setProgressBar(progress); // designate as progress bar
        },         
      onComplete: function(filename, response) {
          if (!response) {
              alert(filename + 'upload failed');
              return false;            
          }
          // do something with response...
        }
});        


相关链接

发表评论