html5(拖拽3)

<!DOCTYPE html">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>无标题页</title>

    <style type="text/css">

        *

        {

            margin: 0;

            padding: 0;

        }

        .content

        {

            margin: 50px auto;

            width: 600px;

            border: 1px solid #ccc;

            padding: 20px;

        }

        .content .drag

        {

            width: 596px;

            min-height: 300px;

            background: url(images/bg.jpg) no-repeat center center;

            border: 2px dashed #666;

        }

        .spn-img img

        {

            max-width: 596px;

        }

    </style>

    <script type="text/javascript">

        window.onload = function () {

            var oDragWrap = document.getElementById("box");

            var fileList = null;

            //拖进

            oDragWrap.addEventListener('dragenter', function (e) {

                e.preventDefault();

            }, false);

            //拖离

            oDragWrap.addEventListener('dragleave', function (e) {

                dragleaveHandler(e);

            }, false);

            //拖来拖去 , 一定要注意dragover事件一定要清除默认事件

            //不然会无法触发后面的drop事件

            oDragWrap.addEventListener('dragover', function (e) {

                e.preventDefault();

            }, false);

            //扔

            oDragWrap.addEventListener('drop', function (e) {

                e.preventDefault();

                dropHandler(e);

            }, false);

            var dropHandler = function (e) {

                fileList = e.dataTransfer.files; //获取文件列表

                var img = document.createElement('img');

                //检测是否是拖拽文件到页面的操作

                if (fileList.length == 0) { return; };

                //检测文件是不是图片

                if (fileList[0].type.indexOf('image') === -1) { return; }

                if (window.URL) {

                    //FF4+

                    img.src = window.URL.createObjectURL(fileList[0]);

                } else if (window.webkitURL) {

                    //Chrome8+

                    img.src = window.webkitURL.createObjectURL(fileList[0]);

                } else {

                    //实例化file reader对象

                    var reader = new FileReader();

                    reader.onload = function (e) {

                        img.src = this.result;

                    }

                    reader.readAsDataURL(fileList[0]);

                }

                oDragWrap.appendChild(img);

                //-------------------------------

                //发送请求

                var xhr = new XMLHttpRequest();

                var url = 'actionHandler.ashx';

                var boundary = '-----------------------' + new Date().getTime();

                // var fileName = file.name;

                xhr.open("post", url, true);

                xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest','Content-Type', 'multipart/form-data; boundary=' + boundary);if (window.FormData) {

                    //Chrome12+

                    var formData = new FormData();

                    formData.append('xfile', fileList[0]);

                    //formData.append('filename', "upfile");

                    //formData.append('requestToken',"t");

                    data = formData;

                } else if (fileList[0].getAsBinary) {

                //FireFox 3.6+

                //data = "--" +boundary +crlf +"Content-Disposition: form-data; " +"name=\"" +'file' +"\"; " +"filename=\"" +unescape(encodeURIComponent(file.name)) +"\"" +crlf +"Content-Type: image/jpeg" +crlf +crlf +file.getAsBinary() +crlf +"--" +boundary +crlf +"Content-Disposition: form-data; " +"name=\"hostid\"" +crlf +crlf +userId +crlf +"--" +boundary +crlf +"Content-Disposition: form-data; " +"name=\"requestToken\"" +crlf +crlf +t +crlf +"--" +boundary +'--';

                }

                xhr.send(data);

            }

        }

    </script>

</head>

<body>

    <div class="content">

        <div class="drag" id="box">

            <span class="spn-img" id="spn-img"></span>

        </div>

    </div>

</body>

</html>

aps.net后台代码：

<%@ WebHandler Language="C#" class="IbeaconHandler" %>

using System;
using System.Web;
using System.IO;

public class IbeaconHandler : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
         try    {
             //获取当前Post过来的file集合对象,在这里我只获取了<input type='file' name='fileUp'/>的文件控件
             HttpPostedFile file = context.Request.Files["xfile"];
             if (file != null)
             {
                 //当前文件上传的目录
                 string path = context.Server.MapPath("~/images/");
                 //当前待上传的服务端路径
                 string imageUrl = path +Path.GetFileName(file.FileName);
                 //当前文件后缀名
                 string ext = Path.GetExtension(file.FileName).ToLower();
                 //验证文件类型是否正确
                 if (!ext.Equals(".gif") && !ext.Equals(".jpg") && !ext.Equals(".png") && !ext.Equals(".bmp"))
                 {
                     //这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址
                     context.Response.Write("<script>window.parent.uploadSuccess('你上传的文件格式不正确！上传格式有(.gif、.jpg、.png、.bmp)');</script>");
                     context.Response.End();
                 }
                 //验证文件的大小
                 if (file.ContentLength > 1048576)
                 {
                     //这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址
                     context.Response.Write("<script>window.parent.uploadSuccess('你上传的文件不能大于1048576KB!请重新上传！');</script>");
                     context.Response.End();
                 }
                 //开始上传
                 file.SaveAs(imageUrl);
                 //这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址
                 //如果成功返回的数据是需要返回两个字符串，我在这里使用了|分隔例：成功信息|/Test/hello.jpg
                 context.Response.Write("<script>window.parent.uploadSuccess('Upload Success!|/Test/" + file.FileName + "');</script>");
                 context.Response.End();
             }
             else
             {
                 //上传失败
                 context.Response.Write("upload lose!");
                 context.Response.End();
             }
         }
         catch
         {
             //上传失败
             context.Response.Write("upload lose!");
             context.Response.End();
         }
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

html5(拖拽3)的更多相关文章

Html5拖拽复制
拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...
html5拖拽
html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
HTML5 拖拽复制功能的实现方法
Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...
每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
HTML5拖拽功能中 dataTransfer对象详解
有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...
基于html5拖拽api实现列表的拖拽排序
基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...
html5拖拽事件 xhr2 实现文件上传含进度条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
html5拖拽总结
拖拽(Drag 和 drop)是 HTML5 标准的组成部分.拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. Internet Explorer 9.Firefox.Opera 12.Chrom ...
HTML5拖拽实例
最近应该会用到,借用一下......小妹儿,你又变懒了拖拽相关属性 draggable属性是html5的全局属性,是html5支持拖放操作的方式之一,用来表示元素是否可以被拖放,draggable有 ...
html之div拖拽，html5拖拽
html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp

随机推荐

pandas关联mysql并读写数据库
1.代码读写mysql,必须安装关联mysql的工具操作如下命令: sudo apt-get install mysql-server mysql-clientsudo apt-get instal ...
charles 模拟手机弱网、修改请求参数、修改返回值
1.charles模拟弱网(断网) 2.charles修改请求参数 (1)先访问一次需要改的请求,在charles上找到相应的请求地址 (2)然后在需要打断点的请求上右键,勾选[Breakpoints ...
set 方法总结整理
#!/usr/bin/env python __author__ = "lrtao2010" #Python 3.7.0 集合常用方法 #集合是无序的,元素不能重复,元素只能是数字 ...
pycharm-install scipy
懒得装双系统,所以在win7下用pycharm,python2.7 虽然机子本身是64位,但是安装包的时候,我居然需要下载32位的??迷:) 这次装的是scipy.在pycharm里添加不了,根据网上 ...
CentOS 7 配置OpenCL环境（安装NVIDIA cuda sdk、Cmake、Eclipse CDT）
序最近需要在Linux下进行一个OpenCL开发的项目,现将开发环境的配置过程记录如下,方便查阅. 完整的环境配置需要以下几个部分: 安装一个OpenCL实现,基于硬件,选择NVIDIA CUDA ...
linux学习-systemd-journald.service 简介
过去只有 rsyslogd 的年代中,由于 rsyslogd 必须要开机完成并且执行了 rsyslogd 这个 daemon 之后,登录文件才会开始记录.所以,核心还得要自己产生一个 klogd 的 ...
Python之code对象与pyc文件（一）
Python程序的执行过程我们都知道,C语言在执行之前需要将源代码编译成可执行的二进制文件,也就是将源代码翻译成机器代码,这种二进制文件一旦生成,即可用于执行.但是,Python是否一样呢?或许很多 ...
django 缓存实现
由于Django构建得是动态网站,每次客户端请求都要严重依赖数据库,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存至内存或者memcache中, ...
Ubuntu超简单文书编辑器：nano
nano 的使用很简单,可以直接加上档名就能够开启一个旧档或新档! 直接在终端输入指令:nano text.txt,如下图所示打开的是已有的文档! 第一部分反白部分,是nano的版本与档名第二部分可 ...
luogu1262 间谍网络
贿赂所有能贿赂的,如果还有人不被访问则显然是NO. 否则,必定为YES.强联通分量缩成一个DAG,若某点的入度为零,则答案要算上它的. #include <iostream> #inclu ...

html5(拖拽3)

html5(拖拽3)的更多相关文章

随机推荐

热门专题