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
随机推荐
- 分割catalina.out 每天生成一个文件
1. touch xxx(文件名字).sh 2. vim xxx.sh 写入 ----------------------- #!/bin/sh cd `dirname $0`pwdd=`d ...
- Win2008 Server配置PHP环境
Win2008 Server配置PHP环境 阅读目录 创建一个网站 配置PHP环境 配置iis的“处理应用程序映射” 在配置PHP环境之前要先配置好IIS. 传送门-> Win2008 Se ...
- jsp常用动作
jsp:include 动态包含: jsp:forward 转发: jsp:useBean 实例化bean对象: jsp:setProperty 设置一个属性值 jsp:getProperty 获取一 ...
- perl-tips-1
.pm 应该保存 Perl Module,也就是 Perl 模块.例如 Socket.pm.pl 应该保存 Perl Library,也就是 Perl 库文件.例如 perldb.pl.plx 应该保 ...
- vagrant 安装ubuntu12.04 64 bit
1 下载用于ubuntu 12.04 用于vagrant的镜像,虚拟机是virtualbox $ wget http://files.vagrantup.com/precise64.box jb@e3 ...
- Python之log的处理方式
配置文件: #! /usr/bin/env python # -*- coding: utf-8 -*- """ logging配置 """ ...
- 和为n连续正数序列 【微软面试100题 第五十一题】
题目要求: 输入一个正数n,输出所有和为n连续正数序列(至少两个). 例如输入15,由于1+2+3+4+5 = 4+5+6 = 7+8 = 15.所以输出3个连续序列1~5,4~6,7~8. 参考资料 ...
- Sonar - 部署常见问题及解决方法
1. sonarqube启动报错,查看es.log如下: 问题原因:sonarqube不能使用root用户启动 解决方法: (1)更改sonarqube所属用户权限 chown -R gold:gol ...
- Python 单例模式（3种方式）
方式一: # 单例模式: # 实现目的:实例化多次,得到的实例是同一个,就是同一个对象,同一个名称空间(更加节省空间) ####################################方式一: ...
- iOS------手势操作(nib文件、纯代码)
总共有六种手势识别:轻击手势(TapGestureRecognizer),轻扫手势 (SwipeGestureRecognizer), 长按手势(LongPressGestureRecognizer) ...