<!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)的更多相关文章
	

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

	


随机推荐
	

    
									
  1. NodeJS基础入门-Buffer
			
    Buffer.byteLength console.log(Buffer.byteLength('test')); console.log(Buffer.byteLength('我是C语言爱好者')) ...
    
			
    2. 
						
  2. printk的使用技巧
			
    在 linux/kernel.h 中有相应的宏对应. #define KERN_EMERG    "<0>"    /* system is unusable */#d ...
    
			
    3. 
						
  3. Python虚拟机之for循环控制流（二）
			
    Python虚拟机中的for循环控制流 在Python虚拟机之if控制流(一)这一章中,我们了解if控制流的字节码实现,在if控制结构中,虽然Python虚拟机会在不同的分支摇摆,但大体还是向前执行, ...
    
			
    4. 
						
  4. EXCEL宏做数据拆分
			
    用处:将大容量的EXCEL工作簿分解成若干个小的工作簿 Sub aa() For i = 1 To 8 Set nb = Workbooks.Add nb.SaveAs Filename:=ThisW ...
    
			
    5. 
						
  5. 修改Echarts 图表的坐标轴的文本的排列位置
			
    option.xAxis.axisLabel['interval'] = 0 option.xAxis.axisLabel['formatter'] = function(value,index){  ...
    
			
    6. 
						
  6. mysql update连表
			
    UPDATE price_air_item t1 LEFT JOIN order_item t2 ON t1.ORDER_ITEM_ID = t2.ORDER_ITEM_ID SET t1.BUYER ...
    
			
    7. 
						
  7. day04_02 知识回顾、赋值运算符
			
    input命令输出的是字符串 数字转换成字符串 字符串转换成数字 以上成为类型的强制转换 运算符
    
			
    8. 
						
  8. Python_Virtualenv及Pycharm配置
			
    Virtualenv存在的意义 在Python使用过程中,你是否有遇到过同时需要开发多个应用的情况? 假设A应用需要使用DJango1.X版本,而B应用需要使用DJango2.X的版本,而你全局开发环 ...
    
			
    9. 
						
  9. 【POJ 2585】Window Pains 拓扑排序
			
    Description . . . and so on . . . Unfortunately, Boudreaux's computer is very unreliable and crashes ...
    
			
    10. 
						
  10. Leetcode 423.从英文中重建数字
			
    从英文中重建数字 给定一个非空字符串,其中包含字母顺序打乱的英文单词表示的数字0-9.按升序输出原始的数字. 注意: 输入只包含小写英文字母. 输入保证合法并可以转换为原始的数字,这意味着像 &quo ...
    
			
    11.