DropzoneJS 可以拖拽上传的js库
介绍
可以拖拽上传的 js库
同类类库
1.jquery.fileupload http://blueimp.github.io/jQuery-File-Upload/
2. file-uploader https://github.com/Valums-File-Uploader/file-uploader
这2个类库分别用过..感觉,2轻巧方便些..
这个dropzonejs 其实也很轻巧
用法
1. add js and css style
<link href="~/Dropzone/css/basic.css" rel="stylesheet" /> <link href="~/Dropzone/css/dropzone.css" rel="stylesheet" /> <script src="~/Dropzone/dropzone.min.js"></script>
2. post data
<form action="~/Home/SaveUploadedFile" method="post"
enctype="multipart/form-data" class="dropzone"
id="dropzoneForm">
</form>
3.handling Server Response
<script type="text/javascript">
Dropzone.options.dropzoneForm = {
init: function () {
this.on("complete", function (data) {
var res = eval('(' + data.xhr.responseText + ')');
alert(res.Message);
});
}
};
</script>
4.支持较旧的浏览器.same ie6
具体例子 参考 官 http://www.dropzonejs.com/
]]>
DropzoneJS 可以拖拽上传的js库的更多相关文章
- dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
- DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库. 它是轻量级的,不依赖任何其他类库(如JQuery)并且高度可定制. 试试看! 将文件拖至此处或点击上传.(这仅仅是 dropzo ...
- Dropzone.js实现文件拖拽上传
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...
- 基于 jq 实现拖拽上传 APK 文件,js解析 APK 信息
技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 - ...
- php和js实现文件拖拽上传
Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...
- js拖拽上传 文件上传之拖拽上传
由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调 ...
- 实现拖拽上传文件的一款小控件——dropzone
由于专注所以专业.非常多小巧的东西乍一看非常不起眼,却在特定的领域表现不俗,就是由于集中了热情. dropzone就是这样一款小控件,实现拖拽上传.它不依赖于其他像jquery等JS库.并且支持多方面 ...
- 图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
一 . 背景及效果 当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片 ...
- h5图片上传预览与拖拽上传
图片上传: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
随机推荐
- webstrom开发微信小程序说明
在操作之前,需要对webstrom做一些设置,如下 如果未安装node.js的朋友,请到如下地址 https://nodejs.org/en/ 安装(相信大家都是会的),如果安装完了之后,就使用如下的 ...
- dubbo源码分析三:consumer注册及生成代理对象
本章我们将分析一下consumer向注册中心注册,并获取服务端相应的信息,根据这些信息生产代理对象的过程和源码. 1.类图 上图展示了部分消费者注册及生成代理对象过程中需要使用到的类和接口,其中: s ...
- 常用的Linux操作二
1.sudo 说明:以系统管理者的身份执行指令,也就是说,经由 sudo 所执行的指令就好像是 root 亲自执行 . 2.who 说明 : 显示系统中有那些使用者正在上面,显示的资料包含 ...
- JAVA中的继承和覆盖
java里面的继承是子类继承父类的一些方法和属性(除private属性和方法之外):对于父类的私有属性和方法子类是没有继承的.可是要想子类也能訪问到父类的私有属性,必须给私有属性以外界訪问的方法接口. ...
- PHP安全编程:HTTP请求欺骗(转)
一个比欺骗表单更高级和复杂的攻击方式是HTTP请求欺骗.这给了攻击者完全的控制权与灵活性,它进一步证明了不能盲目信任用户提交的任何数据. 为了演示这是如何进行的,请看下面位于http://exampl ...
- android ToolBar与DrawerLayout笔记
通过Android Studio 生成的Nagvition DrawerLayout Activity 自带的布局中的NagvitionView会覆盖ToolBar直接通到statusBar. 但是自 ...
- QT pro文件解析
在QT中使用qmake自动生成pro文件,如果要自己定制工程选项,则需要自行修改pro文件. pro文件有以下关键字:TEMPLATE.TARGET.DESTDIR.DEPENDPATH.INCLUD ...
- 关于xml作为模板的配置服务系统开发
最近在做一个后台配置系统,其实之前也接触过,所谓的配置系统就是指,将你的网站布局抽象成一个xml模板,里面包括你自定义的节点,然后将变化的部分作为配置项,通过服务将配置选项与模板组装成一个js(这个服 ...
- Adobe DreamweaverCS6安装及破解(序列号+破解补丁)
一:安装 1) Adobe DreamweaverCS6中文版下载地址:Adobe DreamweaverCS6中文版下载 2)Adobe DreamweaverCS6安装及破解说明下载地址:Adob ...
- SQL DMO のDMV
这两天对公司的一个项目进行优化,看着长长的SQL,脑袋不经有些大,一时间竟然不知道如何下手,一顿手忙脚乱后,小有成效,响应速度快了不少,同样的条件下可以做到秒级响应.闲暇时间想了想,还是得做点功课,最 ...