javascript拖拽上传类库DropzoneJS使用方法_javascript技巧

用法

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

时间: 2024-08-22 11:07:36

javascript拖拽上传类库DropzoneJS使用方法_javascript技巧的相关文章

关于js拖拽上传 [一个拖拽上传修改头像的流程]_javascript技巧

如今现代的浏览器已经有很多支持拖拽文件读取操作,其优点不再复述.前端时间利用拖拽改进了一下网站的头像上传流程,对其中的要点和实践体会做一点总结.  先看一下总体视图:1. 文件拖拽接受区域要有明显的标示,并且要尽可能的大(由于版面的原因,这个界面的拖放盒子并不大).可以用虚线框盒子等样式吸引用户拖拽文件.最好有明显的文字提示和图标配合. 2. 在交互体验上当文件拖入浏览器窗口时,可以用拖放区变换背景颜色等向用户发起放置操作邀请. 实现代码: 复制代码 代码如下: doc.bind({ 'drag

SwfUpload在IE10上不出现上传按钮的解决方法_javascript技巧

在系统测试过程中,发现使用了SwfUpload实现的无刷新上传功能,在IE10上竟然无法使用了,难道SwfUpload不支持吗?还是需要换一种实现方式呢?最后通过了解SwfUplad.JS文件发现,我们是可以修改的,让其支持IE10,具体解决方案如下: 打开SwfUpload.js,在js文件中找到// Private: getFlashHTML generates the object tag needed to embed the flash in to the document"这行和&q

使用pcs api往免费的百度网盘上传下载文件的方法_javascript技巧

百度个人云盘空间大,完全免费,而且提供了pcs api供调用操作文件,在平时的项目里往里面保存一些文件是很实用的. 环境准备: 开通读写网盘的权限及获取access_token:http://blog.csdn.net/langyuezhang/article/details/47206621 百度官方pcs api文档:http://developer.baidu.com/wiki/index.php?title=docs/pcs/overview,上面有各种语言的SDK,我用的laravel

Js+php实现异步拖拽上传文件_javascript技巧

异步拖拽上传文件--小实例 upload.html <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head&g

Js+php实现异步拖拽上传文件

         本文给大家分享的是使用php结合js实现异步拖拽上传文件的代码,及示例,有需要的小伙伴可以参考下.              异步拖拽上传文件--小实例 upload.html ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

html5拖拽上传-html5 拖拽上传,通过e.dataTransfer.files,拿到的file一直为null

问题描述 html5 拖拽上传,通过e.dataTransfer.files,拿到的file一直为null <script type="text/javascript" charset="utf-8"> //文件上传 jQuery(function ($) { var uploadFile = function (file) { var element = $("<div />"); element.text(file.f

Nodejs+express+html5 实现拖拽上传_node.js

一.前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.nodejs也是一个最近越来越流行的技术,这也是自己第一次接触nodejs,在nodejs开发中,最常用的开发框架之一是expess,它是一个类似mvc模式的框架.结合html5.nodejs express实现了拖拽上传的功能. 二.基础知识普及 1.NodeJs基础知识 nodejs简单来说就是一个可以让j

Dropzone.js实现文件拖拽上传例子

dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone"></form>

HTML5文件实现拖拽上传

通过HTML的文件API ,Firefox.Chrome等浏览器已经支持从操作系统直接拖拽文件,并上传到服务器. 相对于使用了十多年的HTML表单,这是一个革命性的进步.虽然IE的落后让很多开发者还在观望中,但是Gmail邮箱的附件拖拽功能已经给部分用户带来了极大的方便,而需要大量上传文件的CMS(内容管理系统)也将会从中受益. 让我们看一下Firefox 是如何使用拖拽上传功能的: 首先提供一个区域来放置文件 Html代码 <div name="image" id="