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实践——美国人口分析
1.导入文件,并查看数据样本 abbr = pd.read_csv("./state-abbrevs.csv")areas =pd.read_csv("./state-a ...
python列表中的深浅copy
列表中的赋值和平常的赋值是不一样的,看下面的代码: In [1]: a = 1 In [2]: b = a In [3]: a Out[3]: 1 In [4]: b Out[4]: 1 In [5] ...
XenServer 6.5 安装
为了方便截图我下面的所有操作都是在VMware Workstation 11 上面完成的,但在之后的所有Citrix产品的操作中都将会在物理环境完成,物理机安装XS的步骤和下面是相同的. 1.打开Wo ...
CSS效果小结
效果属性 1.box-shadow(盒子阴影) 示例加上 box-shadow 内阴影复杂例子阴影的形状跟原来的形状是一样的结果: box-shadow 作用:1.营造层次感(立体感)2.充当 ...
UVA10779Collectors Problem
uva 10779 Collectors Problem Some candy manufacturers put stickers into candy bar packages. Bob and ...
[转] 重定向 CORS 跨域请求
非简单请求不可重定向,包括第一个preflight请求和第二个真正的请求都不行. 简单请求可以重定向任意多次,但如需兼容多数浏览器,只可进行一次重定向. 中间服务器应当同样配置相关 CORS 响应头. ...
JAVA 消耗 CPU过高排查方法
#找出cpu占用最高的进程top -H#再次确定进程ps aux|grep 17408 #查看进程的线程(tid) ps -mp 17408 -o THREAD,tid,time#将线程转换为十六进制 ...
令人惊叹的sublime text 3 插件
1.ChineseLocalization------语言汉化.(新手必备) 2.SublimeTmpl------打开生成模板.(新手必备) 3.SublimeCodeIntel------代码自 ...
Flash中国地图开放源码
Flash中国地图,以Object为数据源,便于实现基于中国地图的可视化项目. 特征: swc,便于导入到Flex项目中数据源为Object,比XML更方便数据驱动的地图块颜色和Hover颜色可 ...
python算法-排列组合
排列组合一.递归 1.自己调用自己 2.找到一个退出的条件二.全排列:针对给定的一组数据,给出包含所有数据的排列的组合 1:1 1,2:[[1,2],[2,1]] 1,2,3:[[1,2,3],[ ...

html5(拖拽3)

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

随机推荐

热门专题